20个JavaScript开发案列（一）
二十个JavaScript实例，每天五个，四天更完，敬请期待！期间还会出JavaScript的复习回顾，学完这些开始搞毕设前端，也会更新到此专栏！
o(￣▽￣)ブ φ(゜▽゜*)♪ (p≧w≦q)
支付十秒倒计时
代码实现
demo1.html
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>支付十秒倒计时</title><styletype="text/css">body,h3{margin: 0;padding: 0;}.box{width: 500px;margin: 50px auto 0;background-color: #ddd;text-align: center;}</style></head><body><divclass="box"><h3>订单确认</h3><p>商品：Web前端课程</p><p>原价:1980元</p><p>内容：HTML、CSS、JS</p><p>地址：辽宁省大连市</p><p><button>取消</button><button>支付</button></p></div></body><scripttype="text/javascript">'user strict';
document.getElementsByTagName('button')[1].onclick=function(){let res=window.confirm('您确定要支付吗');if(res){
location.href='./demo2.html';}}</script></html>
demo2.html
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>支付成功</title><styletype="text/css">body,
h2{margin: 0;padding: 0;}body{background-color: #ddd;}.box{background-color:rgba(0, 0, 0, 0.5);width: 500px;margin: 200px auto 0;text-align: center;}#jump{font-size: 50px;color: red;}</style></head><body><divclass="box"><h2>恭喜您，支付成功</h2><spanid="jump">10</span>秒后自动返回首页
<p><button>立即返回</button></p></div><scripttype="text/javascript">//逻辑：加载页面触发定时器，10s
window.onload=function(){let time=10;setInterval(()=>{
time--;
document.getElementById('jump').innerText=time;if(time==0){// 计时结束发生跳转
location.href='https://blog.csdn.net/pipihan21';}},1000)//间隔为1s}
document.getElementsByTagName('button')[0].onclick=function(){
location.href='https://blog.csdn.net/pipihan21';}</script></body></html>
效果
验证码生成及校验
代码实现
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>验证码生成及校验</title><styletype="text/css">body{margin: 0;padding: 0;}a{text-decoration: none;color: #fff;}.Box{margin: 100px auto 0;text-align: center;}.box{width: 300px;color: #fff;background-color:rgba(0, 0, 0, 0.5);margin: auto;text-align: center;}.boxCode{width: 300px;background-color:rgba(0, 0, 0, 0.5);margin: auto;}.code{color: red;font-size: 30px;}</style></head><body><divclass="Box"><divclass="boxCode"><spanclass="code"id="code"></span><ahref=""id="linkbt">看不清换一张</a></div><divclass="box"><labelfor="inputCode">验证码：</label><inputtype="text"id="inputCode"><inputtype="button"id="Button1"value="确定"></div></div><scripttype="text/javascript">'user strict';functiongetCode(){var arr =['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];var str ='';for(let i =0; i <6;++i){//取0到15let num = Math.round(Math.random()*(15-0)+0);//得到0-15的一个随机数
str += arr[num];//拼接字符串}return str;}
window.onload=function(){let res=getCode();
document.getElementById("code").innerText=res;
document.getElementById("linkbt").onclick=function(){
document.getElementById("code").innerText=res;}
document.getElementById('Button1').onclick=function(){let code=document.getElementById('code').innerText;let inputCode=document.getElementById('inputCode').value;//console.log(code);//console.log(inputCode);if(code!=inputCode){alert('输入错误！');
document.getElementById('inputCode').value='';returnfalse;}else{
location.href='https://blog.csdn.net/pipihan21';}}}</script></body></html>
效果
百度搜索数据
代码实现
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>百度搜索数据</title><styletype="text/css">body{margin: 0;padding: 0;}.box{width: 300px;margin: 200px auto 0;}#input-txt{height: 30px;width: 200px;border: 1px solid #ddd;outline-color: aqua;}#search{/* color: white; *//* background-color: black; */margin-left: 10px;border-radius: 5px;border: none;height: 30px;width: 50px;}.show{width: 202px;height: 300px;color: #000;border: 1px solid #ddd;display: none;padding: 3px;}.box .show p{color: red;font-size: 13px;text-align: left;}</style></head><body><divclass="box"><inputtype="text"id="input-txt"placeholder="请输入搜索数据"><buttonid="search"type="submit">搜索</button><divclass="show"id="show"><p>哈哈哈</p></div></div><script>'user strict';let arr =['中国居民存款破纪录','致敬！灾难中的中国逆行者','社保缴费满15年就可以不缴了吗？','科学家研发出男性避孕药','高启强为什么解领带擦玻璃','吴刚说最想演的角色是高启强','我是大帅哥'];//先完成展示区域的显示或隐藏let input = document.getElementById('input-txt');let show = document.getElementById('show');
input.onkeyup=function(){
show.style.display ='block';//匹配数据let str ='';
arr.forEach((item)=>{//匹配有指定数据的字符串let res = item.indexOf(input.value);if(res !=-1){
str +='<p>'+ item +'</p>';}})// console.log(str);if(!input.value||!str){
show.innerHTML='<p>暂无结果！</p>';}else{
show.innerHTML = str;//将代码块嵌入到html中显示}}
input.onblur=function(){
show.style.display ='none';
input.value ='';}</script></body></html>
效果
tab选项卡功能
代码实现
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>tab选项卡功能</title><styletype="text/css">body,
ul{margin: 0;padding: 0;}ul{list-style: none;display: flex;}ul li{width: 50px;margin-left: 20px;text-align: center;border: 5px solid #ddd;cursor: default;background-color:rgba(0, 0, 0, 0.5);}img{width: 200px;height: 200px;display: none;margin-left: 20px;}</style></head><body><ul><li>猫</li><li>狗</li><li>老虎</li><li>狮子</li></ul><div><imgsrc="img/cat.webp"alt=""style="display: block;"><imgsrc="img/dog.webp"alt=""><imgsrc="img/tigger.webp"alt=""><imgsrc="img/lion.webp"alt=""></div><scripttype="text/javascript">'user strict';let li = document.getElementsByTagName('li');let img = document.getElementsByTagName('img');for(let i =0; i < li.length;++i){// 先进行元素数组下标设置
li[i].index = i;//鼠标移入背景变色
li[i].onmouseover=function(){
li[i].style.backgroundColor ='yellow';
console.log(this.index);for(let j=0;j<img.length;++j){
img[j].style.display='none';}
img[this.index].style.display='block';}//鼠标移出背景色还原
li[i].onmouseout=function(){
li[i].style.backgroundColor ='rgba(0, 0, 0, 0.5)';}}</script></body></html>
效果
勾选框选择效果
代码实现
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>勾选框选择效果</title></head><body><formaction=""><p><inputtype="checkbox"name=""id="">郭子晗</p><p><inputtype="checkbox"name=""id="">赵四</p><p><inputtype="checkbox"name=""id="">小沈阳</p><p><inputtype="checkbox"name=""id="">宋小宝</p></form><buttononclick="getAll(0)">全选</button><buttononclick="getAll(1)">全不选</button><buttononclick="getAll(2)">反选</button><script>'user strict';let but = document.getElementsByTagName('button');let input = document.getElementsByTagName('input');//封装函数functiongetAll(num){for(let i =0; i < input.length;++i){if(num===0){//全选
input[i].checked =true;}elseif(num===1){//全不选
input[i].checked =false;}else{//反选
input[i].checked =!input[i].checked;}}}</script></body></html>
效果
本文转载自: https://blog.csdn.net/pipihan21/article/details/129085051
版权归原作者 终成大师 所有， 如有侵权，请联系我们删除。
版权归原作者 终成大师 所有， 如有侵权，请联系我们删除。