前端學習-第二階段-day07

阿新 • • 發佈：2020-12-29

練習目標

1.點選按鈕生成五位驗證碼

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

< 
body>
    <button id="shen">點我生成驗證碼</button>
    <div id="yan">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>
    <script>
        var oDiv = document.getElementById("yan");
        var oButton = document.getElementById("shen" 
);
        yan(5, oDiv, oButton)

        function yan(n, elem1, elem2) {//n:需要驗證碼的數量，emem1：顯示標籤的名字，elem2：點選標籤的名字
            var str = "1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM";

            function a(min, max) {
                return number = Math.floor(Math.random( 
) * (max - min + 1)) + min;
            }
            var c = "";

            elem2.onclick = function () {
                for (var i = 0; i < 2*n; i++) {
                    i++;
                    var number = a(0, str.length - 1);
                    c += str[number]
                    elem1.innerHTML = c;
                    if (((c.length) % n == 0)&&((c.length))!=n) {
                        elem1.innerHTML = c.slice((c.length-n), c.length);
                    }
                }
            }

        }
    </script>
</body>

</html>

2.顯示倒計時

在這裡插入圖片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin-top: 40px;
            width: 400px;
            height: 35px;
            border-top: 1px solid #f801bc;
            border-bottom: 1px solid #e6e6e6;
            text-align: right;
            line-height: 35px;
            color: #f5004b;
        }

        span {
            display: inline-block;
            width: 27px;
            height: 27px;
            background-color: #f5004b;
            text-align: center;
            line-height: 28px;
            color: white;
            border-radius: 5px;
        }

        span:nth-child(1) {
            margin-right: 10px;
            width: auto;
            font-size: 14px;
            color: #f5004b;
            background-color: white;
        }
    </style>
</head>

<body>
    <div>
        <span>本場剩餘時間</span>
        <span>00</span> ：
        <span>00</span> ：
        <span>00</span>
    </div>
</body>
<script>
    ax()
    setInterval(ax, 1000)
    function ax() {
        var oSpan = document.getElementsByTagName("span");
        var oDate = new Date();
        var future = new Date("2020,12,24")
        var ms = future - oDate;
        var hours = parseInt((ms / 60 / 60 / 1000) % 24);
        var minite = parseInt((ms / 60 / 1000) % 60)
        var s = parseInt((ms / 1000) % 60)
        oSpan[1].innerHTML = hours;
        oSpan[2].innerHTML = minite;
        oSpan[3].innerHTML = s;
    }
</script>

</html>

3.左邊輸入框輸入需要替換的文字，右邊輸入替換文字，點選按鈕替換文字框內文字

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            outline-style: none;
        }

        div {
            margin: 40px 100px;
            width: 460px;
        }

        button {
            margin-bottom: 20px;
        }

        p {

            padding: 10px;
            border: 8px solid #cccccc;
            text-align: justify;
        }

        span {
            background-color: #ffd700;
        }
    </style>
</head>

<body>

    <div>
        <input type="text" style="margin-left: 40px;"><input type="text"><button>確定</button>
        <p>
            微軟必應（英文名：Microsoft Bing），原名必應（Bing），是微軟公司於2009年5月28日推出，用以取代Live*
            Search的全新搜尋引擎服務。為符合中國使用者使用習慣，Bing中文品牌名為“必應”。作為全球領先的搜尋引擎之一， [1]
            截至2013年5月，必應已成為北美地區第二大搜索引擎，如加上為雅虎提供的搜尋技術支援，必應已佔據29.3%的市場份額。
        </p>
    </div>
    <script>
        var oInput = document.getElementsByTagName("input");
        var oButton = document.getElementsByTagName("button")[0];
        var oP = document.getElementsByTagName("p")[0];

        oButton.onclick = function () {
            
            while(oP.innerHTML.indexOf(oInput[0].value)>0){
                oP.innerHTML = oP.innerHTML.replace(oInput[0].value, "<strong>" + oInput[0].value.charCodeAt(0) + "</strong>");
            }
                
            
            while(oP.innerHTML.indexOf("<strong>" + oInput[0].value.charCodeAt(0) + "</strong>")>0){
                oP.innerHTML = oP.innerHTML.replace("<strong>" + oInput[0].value.charCodeAt(0) + "</strong>", "<span>" + oInput[1].value + "</span>");
            }
        }


        console.log(oInput[0].value.charCodeAt(0))
    </script>
</body>

</html>
```![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201228221244465.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NzIzMDM1,size_16,color_FFFFFF,t_70#pic_center)