js定时器

最新推荐文章于 2023-07-06 16:22:02 发布

胖哥哥飘过

最新推荐文章于 2023-07-06 16:22:02 发布

阅读量189

点赞数

分类专栏：前端文章标签： js 前端

本文链接：https://blog.csdn.net/pgg_cold/article/details/81478631

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.定时器实现平移动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js定时器动画</title>

    <style type="text/css">

        .box{
            width: 200px;
            height: 200px;
            background-color: gold;
            display: inline-block;
            position: fixed;
            left: 20px;
            top: 20px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function () {
            var left=20;
            var oBox=document.getElementById('oBox');
            var timer=setInterval(function () {
                left+=2;
                oBox.style.left=left+'px';
                if (left > 700) {
                    clearInterval(timer);
                }
            },30);
        }
    </script>
</head>
<body>
<div class="box" id="oBox"></div>
</body>
</html>

2.定时器实现闹钟：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js时钟</title>
    <script type="text/javascript">

        window.onload=function () {
            var oDiv=document.getElementById('div1');
            function timeGo() {
                var now=new Date();
                var year=now.getFullYear();//获取年
                var month=now.getMonth()+1;//获取月
                var day=now.getDate();//获取天
                var week=now.getDay();//获取星期
                var hour=now.getHours();//获取时
                var minute=now.getMinutes();//获取分
                var seconds=now.getSeconds();//获取秒
                oDiv.innerHTML='当前时间是：'+year+'年'+toDouble(month)+'月'+toDouble(day)+'日'+' 星期'+toWeek(week)
                    +' '+toDouble(hour)+':'+toDouble(minute)+':'+toDouble(seconds);
            }
            timeGo();
            setInterval(timeGo,1000);

        }

        function toWeek(num) {
            switch (num) {
                case 0:
                    return '日';
                    break;
                case 1:
                    return '一';
                    break;
                case 2:
                    return '二';
                    break;
                case 3:
                    return '三';
                    break;
                case 4:
                    return '四';
                    break;
                case 5:
                    return '五';
                    break;
                case 6:
                    return '六';
                    break;

            }
        }

        function toDouble(num) {
            return num=num<10?'0'+num:num;
        }


    </script>
</head>
<body>
<div class="box" id="div1"></div>
</body>
</html>

3.js倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js倒计时</title>

    <script type="text/javascript">

        window.onload=function () {
            function timeGo() {
                var oDiv=document.getElementById('div1');
                var now=new Date();
                var future=new Date(2018,7,8,24,0,0);//截止日期
                var lefts=parseInt((future-now)/1000);//转换成秒
                var day=parseInt(lefts/86400);
                var hour=parseInt((lefts%86400)/3600);
                var minute=parseInt(((lefts%86400)%3600)/60);
                var seconds=parseInt(lefts%60);
                oDiv.innerHTML="倒计时： "+day+"天 "+toDouble(hour)+"时 "+toDouble(minute)+"分 "+toDouble(seconds)+"秒 "
            }
            timeGo();
            setInterval(timeGo,1000);
        };


        function toDouble(num) {
            return num<10?'0'+num:num;
        }


    </script>
</head>
<body>
<div class="box" id="div1"></div>
</body>
</html>

胖哥哥飘过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js定时器

1.定时器实现平移动画&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js定时器动画&lt;/title&gt; &lt;style type="text/css"
复制链接

扫一扫