zoukankan      html  css  js  c++  java
  • 倒计时确定

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>倒计时确定</title>
            <style>
                *{ margin:0;}
                #a01{
                    background-color:#921;
                    margin-left:220px;
                    font-size:400px;
                    font-family:Old English Text MT;
                    }
                #a02{ 
                    font-size:260px;
                    background-color:#666;
                    font-family:华文行楷;                
                    }
                #a01,#a02
                {
                    550px;
                    height:500px;
                    border:5px solid #222;
                    margin-top:100px;
                    text-align:center;
                    vertical-align:middle;
                    line-height:500px;
                    border-radius:50px;
                    float:left;
                }    
            </style>
        </head>
        
        <body>
            <div id="a01" onclick="Ks()">
                10
            </div>
            <input disabled="disabled"  type="button" value="确定" id="a02"  />
        </body>
    </html>    
    <script>
    var d= document.getElementById("a02");
    //              找到id名"a02"
    d.setAttribute("disabled","disabled");
    //把d的属性重置为disabled;
    
    function Ks()//点击事件,触发倒计时
    {
    var a =10;//从10开始倒计时
    var b=window.setInterval(c,1000);//调用函数里的函数名不加引号括号当做变量引用;
    //           间隔  执行   函数c() 间隔1s;   
    
        function c()
            {    
                a--;//每执行一次a的值-1;
                document.all.a01.innerHTML=a;//找到全部元素里id为a01的div替换里面的元素为a
                if(a==0)//判断倒计时为0时;
                {
                    window.clearInterval(b);//清除倒计时;停止倒计时b
                    d.removeAttribute("disabled");//找到d(对应id"a02")
                    d.setAttribute("onclick","dj()");//找到d改变它的onclick属性为dj();
                }        
            }
    }
    
    function dj()//上面函数运行完成后"a02"会被赋予点击事件函数名为dj();点击执行本条函数
    {
        if(e==null)//判断e是否为空,如果为空执行内容;
        {
            var e=window.open("index.html","_blank");
        }
    }
    
    </script>
  • 相关阅读:
    【CSS3】纯CSS3制作页面切换效果
    【CSS3】分类豆腐块菜单浮动效果
    【CSS3】使用CSS3制作全屏切换效果
    【JQ】toggle / slideToggle / fadeToggle 的区别
    【CSS3 + 原生JS】上升的方块动态背景
    【CSS3 + 原生JS】移动的标签
    【原生JS】简单取随机数
    【原生JS】键盘事件
    【CSS3】loading动画
    【原生JS】层叠轮播图
  • 原文地址:https://www.cnblogs.com/bkyljk/p/7721850.html
Copyright © 2011-2022 走看看