第28天，倒计时，倒计时抢购,跑马灯,时间钟
代码
19年9月
发布日期:   2019-09-11
阅读次数:  

倒计时：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
倒计时:
<span>01</span>小时
<span>00</span>分钟
<span>02</span>秒
<script>
    setInterval(fun,1000);
    function fun() {
        var list = document.getElementsByTagName("span");
        list[2].innerHTML--;
        if(list[2].innerHTML<10) {
            var ll = list[2].innerHTML--;
            list[2].innerHTML = "0"+ll;
        }
        if(ll<0){
            list[2].innerHTML=59;
            list[1].innerHTML--;
        }
        if (list[1].innerHTML<0){
            list[1].innerHTML=59;
            list[0].innerHTML--;
        }
    }
</script>
</body>
</html>

倒计时抢购：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    表单默认值:<input type="text" placeholder="表单默认值---">
    <h1 id="h1">距离下次团购还有<span>00</span>小时<span>00</span>分钟<span id="s1">05</span>秒</h1>
    <script>
          var s1=document.getElementById("s1").innerHTML;
          var set1=setInterval(function(){
              s1--;
              document.getElementById('s1').innerHTML='0'+s1;
              if(s1==0){
                  clearInterval(set1);
                  h1.innerHTML="<a href='https://1978413822.github.io/'><button>点击去抢</button></a>";
              }
          },1000)
    </script>
</body>
</html>

跑马灯：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <p id="msg">上课不听讲，一半只有三种情况：1.手里有个手机 2.心里有个美女 3.身边做个逗比mg</p>

</body>

<script>
    var mes = document.getElementById("msg");
    setInterval(run, 300);

    function run() {
        var str = mes.innerHTML;
        mes.innerHTML = str.substr(1) + str.charAt(1);
    }
</script>

</html>

时间钟：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表</title>
    <style>
        #iWatch {
            width: 300px;
            text-align: center;
            line-height: 60px;
            font-size: 40px;
            font-weight: bold;
            border: 2px solid #333;
            background: #abcdef;
        }
    </style>
</head>

<body>
    <div id="iWatch">

    </div>
    <script>
        function run() {
            //实例化 Date
            var date = new Date();
            //获取时分秒
            var h = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds();
            //处理
            h = (h < 10) ? '0' + h : h;
            i = (i < 10) ? '0' + i : i;
            s = (s < 10) ? '0' + s : s;
            //写入表
            document.getElementById('iWatch').innerHTML = h + ':' + i + ':' + s;
        }

        setInterval(run, 1000);


        run();
    </script>

</body>

</html>

全选：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>全选框</title>
    <style type="text/css">
    </style>
</head>
<body>

            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
            <input type="checkbox"id="ok">哈哈<br>
   
    <input onclick="pp();" type="checkbox"id="ok">全选
    <button  onclick="kk();">全不选</button>
     <button  onclick="gg();">反选</button>

</body>
<script>
    var input=document.getElementsByTagName('input');

function pp(){
    for( var i=0;i<input.length;i++){
        input[i].checked=true;
    }
}
function kk(){
    for(var i=0;i<input.length;i++){
    
        input[i].checked=false;
    }
}
function gg(){
    for(var i=0;i<input.length;i++){
        input[i].checked=!input[i].checked;
    }

}
</script>
</html>

表单默认：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>表单默认值</title>
    <style>

    </style>
</head>

<body>
    <h1>表单事件</h1>
    <hr> 搜索：
    <input id='search' type="text" name="" placeholder="请输入搜索内容">
    <script>
        var input = document.getElementById('search');
        input.onfocus = function() {
            //alert('啊，我获取焦点了');
            this.value = "";
            this.style.color = "#000";
        }
    </script>
</body>

</html>
赏
  目录