从 javascript 实施 html

Question

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

这与我被赋予的任务非常相似，我在逻辑上理解它，但我不明白我需要做什么才能在 html 中实现以下代码。我知道我需要一个带有 id="count" 的元素来接收 DOM 点元素，但我不确定应该是哪种元素或它需要哪些其他参数或其他代码。我的 CSS 中有一个 .dot class，我可以用 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

这将修复您的代码：

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/

Answer 2

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

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

      </div>
</div>

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

从 javascript 实施 html

Implementing html from javascript

javascript

html

velocity.js