从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：日期对象 — 今天你学习了吗？（JS：Day17）
前言
第十四节课：查找替换+进度条+随机颜色+随机选择今日任务
一、查找替换
<!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>
效果：
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
