当前位置：网站首页 > JavaScript开发 > 正文

20个JavaScript开发案列（一）

JavaScript开发 来源： 网络 编辑：小编 更新时间：2024-11-17 18:09:09 浏览量：16

20个JavaScript开发案列（一）

二十个JavaScript实例，每天五个，四天更完，敬请期待！期间还会出JavaScript的复习回顾，学完这些开始搞毕设前端，也会更新到此专栏！

o(￣▽￣)ブ φ(゜▽゜*)♪ (p≧w≦q)

支付十秒倒计时

代码实现

demo1.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>支付十秒倒计时</title> <style type="text/css"> body,h3{ 
      margin: 0; padding: 0; } .box{ 
      width: 500px; margin: 50px auto 0; background-color: #ddd; text-align: center; } </style> </head> <body> <div class="box"> <h3>订单确认</h3> <p>商品：Web前端课程</p> <p>原价:1980元</p> <p>内容：HTML、CSS、JS</p> <p>地址：辽宁省大连市</p> <p> <button>取消</button> <button>支付</button> </p> </div> </body> <script type="text/javascript"> 'user strict'; document.getElementsByTagName('button')[1].onclick=function(){ 
      let res=window.confirm('您确定要支付吗'); if(res){ 
      location.href='./demo2.html'; } } </script> </html>

demo2.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>支付成功</title> <style type="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> <div class="box"> <h2>恭喜您，支付成功</h2> <span id="jump">10</span>秒后自动返回首页 <p><button>立即返回</button></p> </div> <script type="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>

效果

验证码生成及校验

代码实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>验证码生成及校验</title> <style type="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> <div class="Box"> <div class="boxCode"> <span class="code" id="code"></span> <a href="" id="linkbt">看不清换一张</a> </div> <div class="box"> <label for="inputCode">验证码：</label> <input type="text" id="inputCode"> <input type="button" id="Button1" value="确定"> </div> </div> <script type="text/javascript"> 'user strict'; function getCode(){ 
      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到15 let 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=''; return false; }else{ 
      location.href='https://blog.csdn.net/pipihan21'; } } } </script> </body> </html>

效果

百度搜索数据

代码实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度搜索数据</title> <style type="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> <div class="box"> <input type="text" id="input-txt" placeholder="请输入搜索数据"> <button id="search" type="submit">搜索</button> <div class="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选项卡功能

代码实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>tab选项卡功能</title> <style type="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> <img src="img/cat.webp" alt="" style="display: block;"> <img src="img/dog.webp" alt=""> <img src="img/tigger.webp" alt=""> <img src="img/lion.webp" alt=""> </div> <script type="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>

效果

勾选框选择效果

代码实现

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>勾选框选择效果</title> </head> <body> <form action=""> <p><input type="checkbox" name="" id="">郭子晗</p> <p><input type="checkbox" name="" id="">赵四</p> <p><input type="checkbox" name="" id="">小沈阳</p> <p><input type="checkbox" name="" id="">宋小宝</p> </form> <button onclick="getAll(0)">全选</button> <button onclick="getAll(1)">全不选</button> <button onclick="getAll(2)">反选</button> <script> 'user strict'; let but = document.getElementsByTagName('button'); let input = document.getElementsByTagName('input'); //封装函数 function getAll(num){ 
      for (let i = 0; i < input.length; ++i) { 
      if(num===0){ 
     //全选 input[i].checked = true; } else if(num===1){ 
     //全不选 input[i].checked = false; } else{ 
     //反选 input[i].checked = !input[i].checked; } } } </script> </body> </html>

效果

在这里插入图片描述

到此这篇20个JavaScript开发案列（一）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！

  • 上一篇： javascript开发技术大全_javascript开发工具
  • 下一篇： 05 JavaScript学习：语法

    • 版权声明：

    本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
    如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！


    转载请注明出处，原文链接：https://www.xkablog.com/javascriptkf/520.html

    # Javascript # 开发

    相关文章：

  • javascript开发技术大全_javascript开发工具2024-11-17 18:09:09
  • 06 JavaScript学习：语句2024-11-17 18:09:09
  • 16 JavaScript学习： 类型转换2024-11-17 18:09:09
  • 18 JavaScript学习：错误2024-11-17 18:09:09
  • 如何用 JavaScript+Canvas 开发一款超级烧脑小游戏？2024-11-17 18:09:09
  • 05 JavaScript学习：语法2024-11-17 18:09:09
  • 12 JavaScript学习： 字符串2024-11-17 18:09:09
  • 20 JavaScript学习：变量提升和严格模式2024-11-17 18:09:09
  • javascript开发框架权威指南_javascript好学吗2024-11-17 18:09:09
  • JavaScript 删除数组中指定元素(5种方法)2024-11-17 18:09:09
    • ❮ 全屏图片 ❯