js小案例

時間  2019-11-13
標籤 案例 欄目 JavaScript 简体版
原文   原文鏈接

一.js實現倒計時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>
    <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實現簡單的進度條ui

<!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>

三.懸浮框返回頂部spa

<!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程