找回密码
当前位置：前端开发者 > JavaScript > 正文

Web前端开发js实现时钟效果

2018-12-20 分类：JavaScript 阅读(713) 评论(0)
微信前端开发面试常见问题
微信登录 前端开发
微信版商城开发 前端

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”gb2312″ />
        <style type=”text/css”>
            html,
            body {
                height: 100%;
                background: #ffd740;
                position: relative;
            }
            #warp {
                width: 240px;
                height: 240px;
                border-radius: 120px;
                background: cyan;
                margin: 50px auto;
                position: relative;
            }
            #clock {
                width: 200px;
                height: 200px;
                border-radius: 100px;
                background: white;
                position: absolute;
                left: 20px;
                top: 20px;
            }
            #bNumber {
                width: 100%;
                height: 100%;
                position: relative;
            }
            #bNumber div {
                width: 190px;
                height: 20px;
                position: absolute;
                left: 10px;
                top: 90px;
            }
            #bNumber span {
                display: block;
                width: 20px;
                height: 20px;
            }
            .number {
                position: absolute;
                bottom: 90px;
                transform-origin: 50% 90%;
                -webkit-transform-origin: 50% 90%;
            }
            #houre {
                width: 5px;
                height: 60px;
                left: 100px;
                background: black;
            }
            #minute {
                width: 3px;
                height: 70px;
                left: 101px;
                background: gray;
            }
            #second {
                width: 1px;
                height: 80px;
                left: 101px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id=”warp”>
            <div id=”clock”>
                <!–指针数–>
                <div id=”bNumber”>
                    <div><span>9</span></div>
                    <div><span>10</span></div>
                    <div><span>11</span></div>
                    <div><span>12</span></div>
                    <div><span>1</span></div>
                    <div><span>2</span></div>
                    <div><span>3</span></div>
                    <div><span>4</span></div>
                    <div><span>5</span></div>
                    <div><span>6</span></div>
                    <div><span>7</span></div>
                    <div><span>8</span></div>
                </div>
                <div id=”houre” class=”number”></div>
                <div id=”minute” class=”number”></div>
                <div id=”second” class=”number”></div>
            </div>
        </div>
        <script type=”text/javascript”>
            var oBnumber = document.getElementById(‘bNumber’)
            var oDiv = oBnumber.getElementsByTagName(‘div’)
            var oSpan = oBnumber.getElementsByTagName(‘span’)
            for (var i = 0; i < oDiv.length; i++) {
                oDiv[i].style.WebkitTransform = ‘rotate(‘ + i * 30 + ‘deg)’
            }
            for (var j = 0; j < oSpan.length; j++) {
                oSpan[j].style.WebkitTransform = ‘rotate(‘ + j * -30 + ‘deg)’
            }
            function ColorNumber() {
                var oHoure = document.getElementById(‘houre’)
                var oMinute = document.getElementById(‘minute’)
                var oSecond = document.getElementById(‘second’)
                var nowTime = new Date()
                var nowHoure = nowTime.getHours()
                var nowMinute = nowTime.getMinutes()
                var nowSecond = nowTime.getSeconds()
                var houreDeg = (nowMinute / 60) * 30
                var minuteDeg = (nowSecond / 60) * 6
                oHoure.style.WebkitTransform =
                    ‘rotate(‘ + (nowHoure * 30 + houreDeg) + ‘deg)’
                oMinute.style.WebkitTransform =
                    ‘rotate(‘ + (nowMinute * 6 + minuteDeg) + ‘deg)’
                oSecond.style.WebkitTransform =
                    ‘rotate(‘ + nowSecond * 6 + ‘deg)’
            }
            ColorNumber()
            setInterval(‘ColorNumber()’, 1000)
        </script>
    </body>
</html>
微信开发是前端么
微信前端开发怎么入手
微信公众号前端开发模板
赞(0)
前端开发者 » Web前端开发js实现时钟效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论