前端开发插件_js数字滑动时钟

招聘网页前端开发|现在前端开发主要技术|手机wap前端开发标准

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style type=”text/css”>
        body,
        ul {
            margin: 0;
            padding: 0;
        }
        .content {
            margin: 100px auto;
            width: 1000px;
        }
        .box {
            position: relative;
            float: left;
            width: 50px;
            height: 120px;
            overflow: hidden;
        }
        .box li {
            position: absolute;
            left: 0;
            width: 100%;
            height: 120px;
            list-style: none;
            font-size: 80px;
            font-weight: bold;
            background-color: #fff;
            line-height: 120px;
            text-align: center;
        }
        .colon {
            float: left;
            height: 120px;
            font-size: 80px;
            color: #e91e63;
            font-weight: bold;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class=”content”>
    </div>
    <script type=”text/javascript”>
        (function () {
            var colors = [“#69D2E7”, “#E20049”, “#19215E”, “#F38630”, “#FA6900”, “#FF4E50”, “#F9D423”, “#FFB6FF”, “#474168”, “#6ACAFC”];
            var content = document.querySelector(‘.content’);
            var num = 0;
            var height = 120;
            var maxheight = (2 – num) * height;
            var timeNum = [3, 10, 6, 10, 6, 10];
            var position = [];
            var NumberBoxs = [];
            for (var i = 0; i < 10; i++) {
                position.push((1 – i) * height);
            };
            function NumberBox() { }
            NumberBox.prototype = {
                init: function () {
                    var innerHTML = “<div class=’box’ id=’box” + num + “‘><ul>”
                    this.num = num;
                    num++;
                    for (var i = 0, l = timeNum[this.num]; i < l; i++) {
                        innerHTML += “<li style=’color:” + colors[i] + “‘>” + i + “</li>”;
                    }
                    innerHTML += “</ul><div>”
                    content.innerHTML += innerHTML;
                    if (num == 2 || num == 4) { content.innerHTML += “<div class=’colon’>:</div>” }
                },
                dominit: function () {
                    this.Ali = [].slice.call(document.getElementById(‘box’ + this.num).getElementsByTagName(‘li’), 0);
                    this.Ali.forEach(function (dom, i) {
                        dom.style.top = position[i] + “px”;
                        dom.style.transition = “top .8s”;
                    })
                    this.hasdom = true;
                },
                toNum: function (n) {
                    if (!this.hasdom) { this.dominit(); }
                    n = “” + n;
                    var p = this;
                    var l = p.Ali.length – 1;
                    while (p.Ali[1].innerHTML != n) {
                        p.Ali.unshift(p.Ali.pop());
                    }
                    p.Ali.forEach(function (dom, i) {
                        dom.style.zIndex = (i == l) ? “-1” : “1”;
                        dom.style.top = position[i] + “px”;
                    })
                }
            }
            for (var i = 0; i < 6; i++) {
                var o = new NumberBox();
                o.init();
                NumberBoxs.push(o);
            }
            function getTime() {
                var time = new Date();
                return (“” + Fixed2(time.getHours()) + Fixed2(time.getMinutes()) + Fixed2(time.getSeconds())).split(“”);
            }
            function Fixed2(n) {
                return Number(n) < 10 ? “0” + n : n;
            }
            (function () {
                var time = getTime();
                NumberBoxs.forEach(function (obj, i) {
                    obj.toNum(time[i]);
                });
                setTimeout(arguments.callee, 1000);
            })()
        })();
    </script>
</body>
</html>

前端开发怎么接外包|前端手机开发手指按下抬起事件|web前端开发知识点总结

» 本文来自:前端开发者 » 《前端开发插件_js数字滑动时钟》
» 本文链接地址:https://www.rokub.com/5130.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!