js小案例

一.js实现倒计时

<!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>
    <style>
        #box{width:200px;height:200px;margin: 30px auto;border: solid 1px black;text-align:center;line-height: 200px;font-size: 40px}
        #btn{width:200px;height:40px;display: block;margin:0 auto}
    </style>
</head>
<body>
    <div id="box">
        10
    </div>
    <input type="button" value="开始" id="btn">
</body>
<script>
    // 倒计时，从10到0，停止，//点击按钮还原倒计时，到0，再停-----------------------点击，再还原
    var obox = document.getElementById("box");
    var obtn = document.getElementById("btn");
    var start = obox.innerHTML;
    var num = obox.innerHTML;
    var t;

    // 1.开关：表示多次点击时，每次要做的事情不一样
    var onoff = 0;

    obtn.onclick = function(){
        // 2.每次点击之前，先判断状态，决定要执行的功能
        if(onoff == 0){
            clearInterval(t);
            t = setInterval(function(){
                // 6.计时器每次执行都要判断是否结束
                if(num == 1){
                    // 如果结束，设置内容，设置按钮，改变状态，清除计时器
                    num = "结束了";
                    obtn.value = "复位";
                    onoff = 2;
                    clearInterval(t);
                }else{
                    num--;
                }
                obox.innerHTML = num;
            }, 1000);
            // 3.开始功能做完之后，把状态修改成下次的功能
            obtn.value = "暂停";
            onoff = 1;
        }else if(onoff == 1){   //4.如果不是开始的功能，那么有可能是停止功能
            clearInterval(t);
            // 5.停止功能做完之后，把状态修改成下次的功能
            obtn.value = "继续";
            onoff = 0;
        }else if(onoff == 2){   //7.如果不是开始和暂停的功能，那么有可能是复位功能
            // 复位显示的数字，计算的数字，按钮的文字，功能的状态
            obox.innerHTML = start;
            num = start;
            obtn.value = "开始";
            onoff = 0;
        }
    }
    
</script>
</html>

二.js实现简单的进度条

<!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>
    <style>
        .box{width:400px;height:200px;border: solid 1px black;margin: 20px auto;position: relative;}
        .box p{margin: 0;position: absolute;left: 0;top: 90px;height:20px;background: blue;width: 0;line-height: 20px;text-align: center;color: #fff}

        .cont{width:200px;height:200px;background: #ccc;display: none}
    </style>
</head>
<body>
    <div class="box">
        <p>
            <span>0%</span>
        </p>
    </div>
</body>
<script>
    var op = document.querySelector(".box p");
    var ospan = document.querySelector(".box span");
    // 设置初始宽度
    var w = 0;

    var t = null;
    // 设置目标
    var target = 400;
    // 设置步长
    var speed = 3;
    // 开启计时器
    t = setInterval(function(){
        // 判断剩下的距离是否够一步，不够就停止，并强行拉到目标
        if(target - w < speed){
            clearInterval(t)
            op.style.width = target + "px";
            ospan.innerHTML = "100%";
        }else{  //否则就正常增加，并计算百分比
            w += speed;
            ospan.innerHTML = parseInt(w / target * 100 )+ "%";
            op.style.width = w + "px";
        }
    }, 30);
</script>
</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>
<style>
  .box{width: 100px;
        height:50px;
        background: aqua;
        position: absolute;
        right: 0;
        top: 400px;
        line-height: 50px;
        text-align: center;
        }
</style>
<script>
    onload = function(){
        var oBox = document.querySelector(".box");
        var oBoxT = 400;
        onscroll = function(){
            var scrollT = document.documentElement.scrollTop;
            oBox.style.top = oBoxT +scrollT+"px";
                }

         var t;
         oBox.onclick = function(){
             clearInterval(t);
            t = setInterval(() => {
            if(document.documentElement.scrollTop<=0){
                clearInterval(t);
            }else{
                document.documentElement.scrollTop -=100;
            }
                 
             }, 30);
         }
    }
</script>
<body>
    <div class="box">回到顶部</div>
    <h2>白日依山尽</h2>
    <h2>黄河入海流</h2>
    <h2>欲穷千里目</h2>
    <h2>黄河入海流</h2>
    <h2>床前明月光</h2>
    <h2>疑是地上霜</h2>
    <h2>抬头望明月</h2>
    <h2>低头思故乡</h2>
    <h2>对酒当歌</h2>
    <h2>人生几何</h2>
    <h2>譬如朝露</h2>
    <h2>去日苦多</h2>
    <h2>慨当以慷</h2>
    <h2>忧思难忘</h2>
    <h2>何以解忧 </h2>
    <h2>唯有杜康</h2>
    <h2>青青子衿</h2>
    <h2>悠悠我心</h2>
    <h2>但为君故</h2>
    <h2>沉吟至今</h2>
    <h2>呦呦鹿鸣</h2>
    <h2>食野之苹</h2>
    <h2>我有嘉宾</h2>
    <h2>鼓瑟吹笙</h2>
    <h2>明明如月</h2>
    <h2>何时可掇</h2>
    <h2>忧从中来</h2>
    <h2>不可断绝</h2>
    <h2>越陌度阡</h2>
    <h2>枉用相存</h2>
    <h2>契阔谈䜩</h2>
    <h2>心念旧恩</h2>
    <h2>月明星稀</h2>
    <h2>乌鹊南飞</h2>
    <h2>绕树三匝</h2>
    <h2>何枝可依</h2>
    <h2>山不厌高</h2>
    <h2>海不厌深</h2>
    <h2>周公吐哺</h2>
    <h2>天下归心</h2>
    <h2>东临碣石</h2>
    <h2>以观沧海</h2>
    <h2>水何澹澹</h2>
    <h2>山岛竦峙</h2>
    <h2>树木丛生</h2>
    <h2>百草丰茂</h2>
    <h2>秋风萧瑟</h2>
    <h2>洪波涌起</h2>
    <h2>日月之行</h2>
    <h2>若出其中</h2>
    <h2>星汉灿烂</h2>
    <h2>若出其里</h2>
    <h2>幸甚至哉</h2>
    <h2>歌以咏志</h2>
</body>
</html>

 

posted @ 2019-09-23 17:07  ZL_light  阅读(437)  评论(0)    收藏  举报