美文网首页
js定时器

js定时器

作者: WANGLIN_HZ | 来源:发表于2018-06-24 16:44 被阅读0次

    定时器弹窗

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器弹框</title>
        <style type="text/css">
            .pop{
                width: 400px;
                height: 300px;
                background-color: #fff;
                border: 1px solid #000;
                /*固定定位*/
                position: fixed;
                /*左上角位于页面中心*/
                left: 50%;
                top: 50%;
                /*让div向左偏移半个宽度、向上偏移半个高度,使div位于页面中心*/
                margin-left: -200px;
                margin-top: -150px;
                /*弹窗在最上面*/
                z-index: 9999;
            }
            /*遮罩样式*/
            .mask{
                position: fixed;
                width: 100%;
                height: 100%;
                background-color: #000;
                left: 0;
                top: 0;
                /*设置透明度30%*/
                opacity: 0.3;
                filter: alpha(opacity=30);/*兼容IE6、7、8*/
                /*遮罩在弹窗的下面,在网页所有内容的上面*/
                z-index: 9990;
            }
            .pop_con{
                display: none;/*默认不显示,用定时器显示*/
            }
        </style>
        <script type="text/javascript">
            /*
            setTimeout      只执行一次的定时器
            clearTimeout    关闭只执行一次的定时器
            setInterval     反复执行的定时器
            clearInterval   关闭反复执行的定时器
            */
            window.onload = function(){
                var oPop = document.getElementById('pop');
                var oShut = document.getElementById('shutOff');
                /*setTimeout(showPop, 3000);//开启定时器,3秒后调用函数showPop()弹框
                function showPop(){
                    oPop.style.display = 'block';//显示弹框和遮罩
                }*/
                //开启定时器的简写方式:调用匿名函数
                setTimeout(function(){
                    oPop.style.display = 'block';
                }, 3000);
                oShut.onclick = function(){
                    oPop.style.display = 'none';//关闭弹框和遮罩
                }
            }
        </script>
    </head>
    <body>
        <h1>首页标题</h1>
        <p>页面内容</p>
        <a href="http://www.baidu.com">百度网</a>
    
    
        <div class="pop_con" id="pop">
            <div class="pop">
                <h3>提示信息!</h3>
                <a href="#" id="shutOff">关闭</a>
            </div>
            <div class="mask"></div>
        </div>
    </body>
    </html>
    

    定时器的基本用法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器的基本用法</title>
        <style type="text/css">
            
        </style>
        <script type="text/javascript">
            //单次定时器
            var timer = setTimeout(function(){
                alert('hello!');
            }, 3000);
            //清除单次定时器
            clearTimeout(timer);
            //反复循环定时器
            var timer2 = setInterval(function(){
                alert('hi~~~');
            }, 2000);
            //清除反复循环定时器
            clearInterval(timer2);
        </script>
    </head>
    <body>
        
    </body>
    </html>
    

    定时器动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定时器动画</title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
                background-color: gold;
                position: fixed;
                left: 20px;
                top: 20px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oBox = document.getElementById('box');
                var left = 20;
                //反复循环定时器,每30毫秒修改一次盒子的left值
                var timer = setInterval(function(){
                    left += 2;
                    oBox.style.left = left + 'px';
                    //当left值大于700时停止动画(清除定时器)
                    if(left > 700){
                        clearInterval(timer);
                    }
                },30);
            }
        </script>
    </head>
    <body>
        <div class="box" id="box"></div>
    </body>
    </html>
    

    时钟

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>时钟</title>
        <style type="text/css">
            
        </style>
        <script type="text/javascript">
            window.onload = function(){
                var oBox = document.getElementById('box');
                function timeGo(){
                    var now = new Date();
                    // alert(now);//弹出美式时间:Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
                    var year = now.getFullYear();//2018年
                    var month = now.getMonth() + 1;//6月弹出5//范围0-11
                    var date = now.getDate();//20号
                    var week = now.getDay();//3//星期几,西半球时间,范围0-6,星期日为一周的第一天,为0
                    var hour = now.getHours();
                    var minute = now.getMinutes();
                    var second = now.getSeconds();
                    // alert(hour + ":" + minute + ":" + second);//15:33:9
                    oBox.innerHTML = '当前时间是:' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
                }
                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;
                }
            }
            //此函数将不足两位的数字前面补0
            function toDouble(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return num;
                }
            }
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
    </html>
    

    倒计时

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>倒计时</title>
        <script type="text/javascript">
            window.onload = function(){
                //活动第二天要将页面下线,直接跳转到其它页面,不会走后面的代码了
                // window.location.href = "http://www.baidu.com";
                var oDiv = document.getElementById('div1');
                function timeLeft(){
                    //实际开发中此时间从服务器获取,避免客户端调整时间
                    var now = new Date();
                    var future = new Date(2018,5,20,16,30,20);
                    // alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
                    var milli = parseInt((future - now)/1000);
                    //活动当天页面下线,避免倒计时到点后继续计负时
                    // if(milli <= 0){
                    //  //页面跳转,不执行下面的代码了
                    //  window.location.href = "http://www.baidu.com";
                    // }
                    var day = parseInt(milli / 86400);
                    var hour = parseInt(milli % 86400 / 3600);
                    var minute = parseInt(((milli % 86400) % 3600) / 60);
                    var second = milli % 60;
                    oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
                }
                
                timeLeft();
                setInterval(timeLeft, 1000);
            }
            function toDouble(num){
                if(num < 10){
                    return '0' + num;
                }else{
                    return num;
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    </html>
    

    变量的作用域

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>变量的作用域</title>
        <script type="text/javascript">
            /*
            全局变量:函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享
            局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找
            函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错
            */
            var a = 12;
            function aa(){
                // var a = 5;
                var b = 7;
                // alert(a);
            }
            // alert(a);
            // alert(b);//报错
            aa();
        </script>
    </head>
    <body>
        
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:js定时器

          本文链接:https://www.haomeiwen.com/subject/qlcsyftx.html