从零开始学前端：查找替换+进度条+随机颜色+随机选择今日任务 --- 今天你学习了吗？（JS：Day18）

本文为Coisini博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_45266979/article/details/127968567

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

复习：从零开始学前端：日期对象 — 今天你学习了吗？（JS：Day17）

文章目录

从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）

前言

第十四节课：查找替换+进度条+随机颜色+随机选择今日任务

一、查找替换

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box {
            width: 500px;
            height: 650px;
            margin: 50px auto;
            padding: 10px;
            border: 3px solid pink;
        }

        span {
            color: #f60;
            font-size: 18px;
            font-weight: bold;
        }
    </style>
</head>

<body>

    <div id="box">
        <input type="text" placeholder="匹配项">
        <input type="text" placeholder="替换项">
        <button>查找</button>
        <button>替换</button>
        <p>温凝二十岁那年，被接回寒城江家，履行婚约。婚后卑微又讨好地陪了江恕半年，到头来也没能燔热他的心。<br>
            离开那晚,暴雨寒风，小姑娘抱着腿蜷缩在凉椅上，清瘦的小脸冻得苍白。<br>
            不远处的车里，助理忐忑开口:“江总,我去把太太接回来吧?”<br>
            男人冷冷勾唇,闭眼假寐:“吃点苦头长记性,受不住了自己会回家。”<br>
            江恕第一次失了算，那晚过后，连她的声音都没再听到过。<br>
            几周后。<br>
            江恕接到妹妹在酒吧惹事，要求家属保释的电话。<br>
            男人满不在意:“别放出来了，关着吧。<br>
            江檬檬听到忙喊:“哥!我小嫂子也在这!和我一起关着呢!救救我们!”<br>
            江恕一下坐起身:“你让她给我说句话。”<br>
            温凝别开脸:“不说。”<br>
            男人瞬间哑了嗓:“等我，马上过来。”<br>
            后来，寒城太子爷屈尊参加恋爱综艺，温凝被迫搭档。<br>
            男演员向温凝搭讪，江恕眸光深谙，就差把占有欲写在脸上。<br>
            却被黑粉骂: “江总嫌弃得要死，全程黑脸，恨不得立刻封杀温凝走人”<br>
            当晚，节目事故音频流出霸屏热搜。<br>
            男人音色微沉:“温凝，你是我的。”<br>
            温凝:“我早就不是你的了。”<br>
            弹幕屏息,都在等着这薄情寡性的男人发怒。<br>
            却听见他一声轻叹，温柔低笑带着宠:“那我是你的。”<br>
            几分钟后，江恕发了条微博：<br>
            “有胆的再骂一句，本来就难哄，现在更难追了”<br>
            cp粉过年:<br>
            !啊啊!!我嗑到真的了!
        </p>
    </div>
    
    <script>
        var ipts = document.querySelectorAll('#box input'),
            btns = document.querySelectorAll('#box button'),
            pText = document.querySelector('#box p');

            // 查找
            btns[0].onclick = function () {
                var val0 = ipts[0].value;
                pText.innerHTML = pText.innerHTML.split('<span>').join('');
                pText.innerHTML = pText.innerHTML.split('</span>').join('');
                pText.innerHTML = pText.innerHTML.split(val0).join('<span>'+ val0 + '</span>')
            }

            // 替换
            btns[1].onclick = function () {
                var val0 = ipts[0].value;
                var val1 = ipts[1].value;
                if (val0 && val1) {
                    pText.innerHTML = pText.innerHTML.split(val0).join('<span>'+ val1 + '</span>')
                    ipts[0].value = '';
                    ipts[1].value = '';
                }
            }
    </script>
</body>
</html>

效果图：
在这里插入图片描述

二、进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .progress {
            width: 380px;
            height: 36px;
            border-radius: 18px;
            border: 1px solid #2B4D80;
            margin: auto;
            margin-top: 200px;
            overflow: hidden;
        }
        .progress .progressBar {
            position: relative;
            width: 0%;
            height: 100%;         
            border-radius: 18px;   
            background-image: linear-gradient(to right, #f1c7df, #ebc7e7, #e3c9ee, #d8cbf5, #cbcdfb, #bfd3ff, #b5d9ff, #addeff, #aae7ff, #abf0ff, #aff8fe, #b8fffa);
            overflow: hidden;
            text-align: center;
            color: #fff;
            font-size: 12px;
            line-height: 36px;
        }
        .progress .progressBar img {
            width: 25px;
            position: absolute;
            top: 3px;
            right: 10px;
        }
        .btn {
            color: #000;
            align-items: center;
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="progress">
            <div class="progressBar">
                <span class="bfb">50%</span>
                <img src="./images/珍珠奶茶.png">
            </div>
        </div>
        <button class="btn">安装</button>
    </div>

    <script>
        var pro = document.querySelector('.progress'),
            bar = document.querySelector('.progressBar'),
            span = document.querySelector('.bfb'),
            btn = document.querySelector('.btn'),
            num = 0,
            time;

        btn.onclick = function () {
            // 为了防止定时器的叠加使用
            clearInterval(time)
            time = setInterval(function() {
                if(num < 100){
                    num ++;
                    bar.style.width = num + '%';
                    bar.innerHTML = num + '%' + "<img src='./images/珍珠奶茶.png'>";
                }else{
                    clearInterval(time);
                }
            },50);
        }
    </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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            overflow: hidden;
            border: 1px solid #000;
            border-radius: 10px;
            margin: 20px;
        }

        p {
            float: left;
            border-radius: 10px;
            height: 60px;
            margin: 5px;
            padding: 2px;
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- <p style='background-color:rgba(255,255,0,0.5)'>rgba(255,255,0,0.5)</p> -->
    </div>

    <script>
        var box = document.querySelector('#box');

        function haha () {
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var a = Math.random().toFixed(1);
            // 0.36565432  toFixed(2) =>  0.37

            // es6模板列   ${r}
            box.innerHTML += `<p style='background-color:rgba(${r},${g},${b},${a})'>rgba(${r},${g},${b},${a})</p>`
        }

        setInterval(haha, 500);
    </script>
</body>
</html>

效果：
在这里插入图片描述

四、随机选择今日任务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            width: 500px;
            flex-wrap:wrap;
        }
        .todo,.xuanze {
            width: 100px;
            height: 100px;
            margin: 20px;
            border-radius: 10px;
            border: 1px salmon solid;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .nohaha {
            background-color: red;
        }
        .haha {
            background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="todo">唱歌ktv</div>
        <div class="todo">漂流</div>
        <div class="todo">去夜市吃东西</div>
        <div class="todo">游泳</div>
        <div class="xuanze nohaha">今日份安排</div>
        <div class="todo">玩泥巴</div>
        <div class="todo">看电影</div>
        <div class="todo">工作</div>
        <div class="todo">蹦极</div>
    </div>
    
    <script>
        var todo = document.querySelectorAll('.todo'),
            xuanze = document.querySelector('.xuanze'),
            num = 0,
            time,
            flag = false;

        xuanze.onclick = function () {
            flag = !flag;
            if(flag == false){
                clearInterval(time);
            }else{
                time = setInterval(function(){
                    todo[num].classList.remove('haha');
                    num = Math.floor(Math.random()*8);
                    todo[num].classList.add('haha');
                },100);
            }
        }
    </script>
</body>
</html>