前端学习-第二阶段-day07

最新推荐文章于 2023-03-24 09:48:35 发布

澜痕

最新推荐文章于 2023-03-24 09:48:35 发布

阅读量122

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/111876099

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

练习目标

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)

澜痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习-第二阶段-day07

练习目标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&
复制链接

扫一扫