js案例总结合集（持续更新中。。）

蘇。。。。

于 2022-08-14 21:41:30 发布

179

文章标签：javascript 前端 css

本文链接：https://blog.csdn.net/m0_70698588/article/details/126335992

版权

文章目录

1、百分比进度条

2、留言板

3、导航跟随

4、人物介绍切换栏

5、随机点名

6、三级联动

7、动态生成表格

8、跟随鼠标移动

9、tab选项卡

1、百分比进度条

<!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> * { padding: 0; margin: 0; } body { margin: 20px; } .box_banner { width: 100%; height: 30px; background-color: #ddd; } .banner { width: 10%; background-color: green; height: 30px; line-height: 30px; color: #fff; text-align: center; margin: 20px 0; } </style></head><body> <h1>JavaScript 百分比进度条</h1> <div class="box_banner"> <div class="banner"> <p>10%</p> </div> <button>点我</button> </div> <script> var btn = document.querySelector('button'); var banner = document.querySelector('.banner'); var width = 10 btn.addEventListener('click', function () { var timer = setInterval(function () { if (width >= 100) { clearInterval(timer); } else { width++ banner.style.width = width + '%' banner.innerHTML = width + '%' } }, 30) }) </script></body></html>

2、留言板

<!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>留言板</title> <style> * { padding: 0; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } .box { width: 300px; margin: 50px auto; font-size: 18px; } .form-group label { display: block; margin-bottom: 10px; margin-top: 5px; } .form-group input { width: 100%; height: 25px; } #content { width: 100%; } button { padding: 5px 10px; margin-top: 10px; margin-bottom: 20px; } span { color: red; font-size: 12px; font-weight: bold; } .content { width: 100%; background-color: palevioletred; position: relative; } li { list-style: none; padding: 20px; } h4 { display: inline; } small { float: right; } p { font-size: 15px; margin-top: 10px; } a { text-decoration: none; float: right; color: plum; } </style></head><body> <div class="box"> <div class="form-group"> <label for="username">姓名:</label> <input type="text" id="username"> <span></span> </div> <div class="form-group"> <label for="content">留言内容:</label> <textarea id="text" rows="5"></textarea> <span></span> </div> <button>提交</button> <div class="content"> <ul></ul> <script> var btn = document.querySelector('button'); var username = document.getElementById('username'); var text = document.querySelector('#text') var content = document.querySelector('#content'); var span = document.querySelectorAll('span'); var content = document.querySelector('.content'); var ul = document.querySelector('ul'); btn.addEventListener('click', function () { if (username.value == "") { span[0].innerHTML = '请输入用户名' } else if (text.value == "") { span[1].innerHTML = '请输入留言内容' } else { span[0].innerHTML = '' span[1].innerHTML = '' var li = document.createElement('li'); var h4 = document.createElement('h4'); li.appendChild(h4); h4.innerHTML = username.value; var small = document.createElement('small'); li.appendChild(small); small.innerHTML = getdate(); var p = document.createElement('p'); li.appendChild(p); p.innerHTML = text.value + '<a href="javascript:;">删除</a>'; content.insertBefore(li, content.children[0]); // content.appendChild(li); var as = document.querySelectorAll('a'); for(var i=0;i<as.length;i++){ as[i].onclick=function(){ content.removeChild(this.parentNode.parentNode); } } } }) function getdate() { var date = new Date(); var str = date.getFullYear() + '年' + (date.getMonth() + 1) + '月' + date.getDate() + '日'; str += '&nbsp'+'&nbsp' + date.getHours() + ':' + date.getMinutes() + ':' + date.getMinutes(); return str; } console.log(getdate()); </script></body></html>

3、导航跟随

<!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> *{ padding: 0; margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body{ width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: black; } ul{ width: 70%; height: 50px; display: flex; justify-content:space-between; align-items: center; } li{ list-style: none; position: 'relative'; } a{ text-decoration: none; font-size: 20px; } .light{ transition: all 0.2s; border: 2px solid #fff; position: absolute; top: 0; left: 0; z-index:-1; display: block; background: #fff; border-radius: 30px; } </style></head><body> <ul> <li><a href="javascript:;">Home</a></li> <li><a href="javascript:;">Order Status</a></li> <li><a href="javascript:;">Tweets</a></li> <li><a href="javascript:;">READ Our History</a></li> <li><a href="javascript:;">Contact Us</a></li> </ul> <script> const light=document.createElement('span'); light.classList.add('light'); document.body.appendChild(light); const links =document.querySelectorAll('a'); function show(){ console.log(this.getBoundingClientRect()); const linkRect =this.getBoundingClientRect(); const linkStyle ={ width:linkRect.width, height:linkRect.height, left:linkRect.left +window.scrollX, top:linkRect.top+window.scrollY } light.style.width =linkStyle.width +'px'; light.style.height=linkStyle.height+'px'; light.style.transform=`translate(${linkStyle.left}px,${linkStyle.top}px)`; } links.forEach(a => a.addEventListener('mouseenter',show)); </script></body></html>

4、人物介绍切换栏

<!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"> <script src="https://kit.fontawesome.com/ad1c705c3a.js"></script> <title>Document</title> <style> * { padding: 0; margin: 0; } .container { background-color: rgb(231, 246, 242); width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; } .testimonial { width: 70%; max-width: 800px; } .testimonial-text { width: 100%; height: 350px; background-color: black; border-radius: 30px; position: relative; box-shadow: 0 15px 20px rgba(0, 0, 0, 0.2); } .user-text { width: 80%; text-align: center; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 35px; display: none; } .active-text { display: block; } .user-text i { font-size: 30px; margin-top: 30px; } .user-text p { margin-top: 30px; } .user-text span { margin-top: 70px; display: block; font-weight: bold; font-size: 12px; } .textimonial_pic { margin-top: 30px; display: flex; justify-content: center; cursor: pointer; align-items: center; } img { width: 65px; height: 65px; margin: 10px; cursor: pointer; background-position: center; /* background-size: auto; */ object-fit: cover; transition: all 0.5s ease-in-out; border-radius: 50%; padding: 5px; } .active-pic { width: 100px; height: 100px; border: 3px solid #2c3333; } </style></head><body> <div class="container"> <div class="testimonial"> <div class="testimonial-text active-text"> <div class="user-text active-text"> <i class="fas fa-quote-left"></i> <p>不惜一切代价去选择对人类最有益的决定。而事实证明他的目光无比深远，为此所执行的手段也坚定决绝。他的信念从一开始就坚定不移。他伪装必胜信念，劫持“自然选择”号太空舰。 “没关系的，都一样。” </p> <span>章北海</span> </div> <div class="user-text"> <i class="fas fa-quote-left"></i> <p>第四位面壁者，初代执剑人，建立黑暗森林威慑，开创了威慑纪元坚守执剑换来人类62年和平发展，间接使地球文明延续近两百年，生存至二向箔降维打击来临。最后作为人类文明的守墓人，在冥王星上与太阳系一同被二维化而死亡。 </p> <span>罗辑</span> </div> <div class="user-text"> <i class="fas fa-quote-left"></i> <p>言行举止粗俗，有时一脸傻笑，有时异常严肃；观察力敏锐，察言观色几乎到了读心的水平，也很善于抓住他人性格中的弱点。” </p> <span>史强</span> </div> <div class="user-text"> <i class="fas fa-quote-left"></i> <p> 褚岩原为亚洲舰队“蓝色空间号“舰长，在章北海操纵“自然选择”号逃离太阳系后，联同另外三艘舰（北美舰队“企业”号、欧洲舰队“终极规律”号和亚洲舰队和“深空”号）追击”自然选择号“，让本舰和另外三艘追击舰船和” 自然选择号“在“水滴”全面击溃地球太空舰队的战争中幸免于难，之后于太阳系外五艘战舰成立星舰地球。 </p> <span>储岩</span> </div> <div class="user-text"> <i class="fas fa-quote-left"></i> <p>在刚从冬眠中苏醒不久的章北海担任执行舰长期间，随战舰被劫持。后在联合舰队全军覆没于三体文明发射的“水滴”探测器之后，自然选择号与四艘追击战舰“蓝色空间”号、 “企业”号、“深空号”和“终极规律”号建立了新政权——“星舰地球”并脱离地球文明。东方延绪继续担任自然选择号舰长。 </p> <span>东方</span> </div> </div> <div class="textimonial_pic"> <img src="./img/章北海.webp" class="user-pic active-pic" onclick="show()"> <img src="./img/罗辑.webp" class="user-pic" onclick="show()"> <img src="./img/史强.webp" class="user-pic" onclick="show()"> <img src="./img/储岩.webp" class="user-pic" onclick="show()"> <img src="./img/东方.webp" class="user-pic" onclick="show()"> </div> </div> </div> </div> <script> // var img =document.querySelectorAll('img'); // var user_text =document.querySelectorAll('.user-text'); // for(var i=0;i<img.length;i++){ // img[i].setAttribute('index',i); // img[i].οnclick=function(){ // for(var i=0;i<img.length;i++){ // img[i].className=""; // } // this.className='active-pic'; // var index =this.getAttribute('index'); // for( var i=0;i<user_text.length;i++){ // user_text[i].style.display='none' // } // user_text[index].style.display='block' // } // } let imgs = document.querySelectorAll('img'); let user_texts = document.querySelectorAll('.user-text'); function show() { for ( img of imgs) { img.classList.remove('active-pic'); } for ( user_text of user_texts) { user_text.classList.remove('active-text'); } let i = Array.from(imgs).indexOf(event.target); console.log(i) imgs[i].classList.add("active-pic"); user_texts[i].classList.add("active-text"); } </script></body></html>

5、随机点名

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } h1{ cursor: pointer; font-size: 40px; height: 100px; background-color: #F5F5F5; text-align: center; line-height: 100px; } .box{ font-size: 30px; margin: 0 auto; width: 400px; height: 200px; border: 5px dashed #000000; text-align: center; line-height:200px ; } button{ display: block; width: 150px; height: 50px; line-height: 50px; margin: 50px auto; } </style> </head> <body> <h1>随机点名</h1> <div class="box"> 点名要开始了 </div> <button >点名开始</button> <script> function getRandomIntInclusive(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 } var btn =document.querySelector('button'); var box=document.querySelector('.box'); var arr=['郭山彤','梁敦厦','霍负浪','虞信品','马仁毅','冯州龙','简务帅','黎丙赣','谢尉争','赵单羽', '孟航沛','龚开梦','黄蓝风','易堃登','蔡农仲'] var timer=null; btn.addEventListener('click',function(){ if(btn.innerHTML=='点名开始'){ timer =setInterval(function(){ box.innerHTML=arr[getRandomIntInclusive(0,arr.length-1)]; },100) btn.innerHTML='点名结束'; }else if (btn.innerHTML == '点名结束'){ clearInterval(timer); btn.innerHTML='点名开始'; } }) </script> </body></html>

6、三级联动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <select class="a"> <option>请选择</option> </select> <span>省</span> <select class="shi"> <option>请选择</option> </select> <span>市</span> <script> var a=document.querySelector('.a'); var shi =document.querySelector('.shi'); var shengList=['山东','山西','河北']; var shiList=[ ['济南','青岛','烟台','威海','东营','淄博','潍坊','日照','莱芜','菏泽'], ['太原市','临汾市','朔州市','大同市','长治市','吕梁市','晋中市','忻州市','运城市','阳泉市','晋城市'], ['石家庄市','唐山市','秦皇岛市','邯郸市','邢台市','保定市','张家口市','承德市','沧州市','廊坊市','衡水市'] ]; for(var i=0;i<shengList.length;i++){ // var shengGroup=new Option(shengList[i]); a.options.add(new Option(shengList[i])); } a.addEventListener('change',function(e){ console.log(e.target.selectedIndex); var shengIndex=e.target.selectedIndex-1; shi.options.length=0; for(var i=0;i<shiList[shengIndex].length;i++){ var shiGroup=new Option(shiList[shengIndex][i]); shi.options.add(shiGroup); } }) </script> </body></html>

7、动态生成表格

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> table{ width: 500px; margin: 100px auto; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody> </tbody> </table> <script> var datas = [{ name:"小红", subject: 'JavaScript', score: 100 },{ name:"小明", subject:'JavaScript', score:90 },{ name:"小米", subject:'JavaScript', score:80 }]; var tbody=document.querySelector('tbody'); for(var i=0;i<datas.length;i++){ var tr=document.createElement('tr'); tbody.appendChild(tr); for( var k in datas[i]){ var td=document.createElement('td'); td.innerHTML=datas[i][k]; tr.appendChild(td); } var td=document.createElement('td'); tr.appendChild(td); td.innerHTML='<a href="javascript:;">删除</a>'; } var as=document.querySelectorAll('a'); for(var i=0;i<as.length;i++){ as[i].addEventListener('click',function(){ tbody.removeChild(this.parentNode.parentNode); }) } </script> </body></html>

8、跟随鼠标移动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } div{ width: 200px; height: 200px; background-color: #FFC0CB; position: absolute; } </style> </head> <body> <div></div> <script> var div=document.querySelector('div'); document.addEventListener('mousemove',function(e){ var x =e.pageX; var y=e.pageY; div.style.left=x-100+'px'; div.style.top=y-100+'px'; }) </script> </body></html>

9、tab选项卡

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <style> *{ padding: 0; margin: 0; } .tab{ width: 500px; height: 200px; margin: 100px auto; } .tab_list{ width: 100%; height: 50px; } .tab_list ul{ display: flex; justify-content:space-between; } .tab_list li{ width: 20%; list-style: none; line-height: 50px; text-align: center; } .tab_list a{ height: 50px; width: 100px; text-decoration: none; font-size: 20px; color: black; font-weight: bold; padding-bottom: 5px; } .tab_con{ width: 100%; height: 150px; background-color: #EEEEEE; overflow: hidden; } .con_content{ width:80%; height: 50px; display:none; font-size: 15px; text-align: center; margin-left: 10%; margin-top: 20px; padding-top: 20px; /* background-color: #FFA500; */ } .on{ border-bottom: #FFA500 2px solid; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="on"><a href="script:;">公告</a></li> <li><a href="javascript:;">规则</a></li> <li><a href="javascript:;">论坛</a></li> <li><a href="javascript:;">安全</a></li> <li><a href="javascript:;">公益</a></li> </ul> </div> <div class="tab_con"> <div class="con_content" style="display: block;"> <p>阿里苏宁发布"新三体"战略打造未来十年格局</p> <p>高诚信会员无条件信任 200余万广告商品被处罚</p> </div> <div class="con_content"> <p>出售假冒商品规则变更商品发布数量限制变更</p> <p>中国质造市场管理规范变更淘宝网营销规则变更</p> </div> <div class="con_content"> <p>淘宝招募卖家志愿者阿里推出兼职神器</p> <p>700家热风淘宝路是赚钱还是骗子</p> </div> <div class="con_content"> <p>淘宝用户必备神器卖家账户安全9守则</p> <p>支付宝实名认证信息账户没钱也被骗？</p> </div> <div class="con_content"> <p>阿里联合公益计划启动一图看懂联合公益计划</p> <p>公益宝贝卖家发票索取公益机构淘宝开店攻略</p> </div> </div> </div> <script> // var tab_list=document.querySelector('.tab_list'); var lis=document.querySelectorAll('li'); var con=document.querySelectorAll('.con_content'); // var lis=document.getElementsByTagName('li'); for(let i=0;i<lis.length;i++){ // lis[i].setAttribute('index',i); lis[i].addEventListener('mouseenter',function(){ for(let j=0;j<lis.length;j++){ lis[j].className=''; } this.className='on'; // var index=this.getAttribute('index'); for(let j=0;j<con.length;j++){ con[j].style.display="none"; } con[i].style.display="block"; }) } // $(function(){ // $('ul li').mouseover(function(){ // $(this).addClass('on').siblings().removeClass('on'); // var index =$(this).index(); // $('.tab_con .con_content').eq(index).show().siblings().hide(); // }) // }) </script> </body></html>

蘇。。。。

关注

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。