从 javascript 实现 html

Question

我正在观看velocity.js 的教程/演示，该教程/演示用于在网站上模拟动态3d 视图： https://www.youtube.com/watch?v=MDLiVB6g2NY&hd=1

这与我被赋予的任务非常相似，我在逻辑上理解它，但我不明白在 html 中实现以下代码需要做什么。我知道我需要一个 id="count" 的元素来接收 DOM 点元素，但我不确定应该是哪种元素或它需要哪些其他参数或附加代码。我的 CSS 中有一个 .dot 类，我可以使用velocity.js 对其进行操作，只需将它们实例化，就像他在视频中展示的那样。

var isWebkit =  /Webkit/i.test(navigator.userAgent),
    isChrome =  /Chrome/i.test(navigator.userAgent),
    isMobile =  !!("ontouchstart" in window),
    isAndroid = /Android/i.test(navigator.userAgent);

$.fn.velocity.defaults.easing = "easeInOutSine";

function r(min,max){
    return Math.floor(Math.random() * (max-min +1)) +min;
}

var dotsCount = isMobile ? (isAndroid ? 40 : 70) : (isChrome ? 200 : 125),
    dotsHtml = "",
    $count = $("#count"),
    $dots;

//instantite DOM elements
for(var i = 0; i < dotsCount; i++){
    dotsHtml += "<div class = 'dot'></div>";
}
$dots = $(dotsHtml);
$count.html(dotsHtml);

我们将不胜感激任何帮助和建议。

Answer 1

根据视频中的说明，您的 html 应该是这样的。

<div class="container">
  <div class="description"></div>
     <div id="count">

      </div>
</div>

点会自动生成到 $('#count') 中。视频中的其余代码通过改变 z 轴的视角来控制点/容器动画。

Answer 2

这将修复您的代码：

isMobile 未初始化

 var dotsCount = 15;//isMobile ? (isAndroid ? 40 : 70) : (isChrome ? 200 : 125),
    var $dots = 0;
        dotsHtml = "",
        $count = $("#count"),
        $dots = 0;

    //instantite DOM elements
    for (var i = 0; i < dotsCount; i++) {
         dotsHtml += "<div class = 'dot'></div>";
    }
    $dots = $(dotsHtml);
    $count.html(dotsHtml);

    function r(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

http://jsfiddle.net/gpncxmf0/