前端案例实战（【前端】实际开发案例）
导读：1. 侧边栏 鼠标经过时，变色...
1. 侧边栏
鼠标经过时 ，变色
<!DOCTYPE html> <html lang="Cn_zh"> <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> div { display: inline-block; width: 200px; height: 300px; background-color: rgb(224, 118, 118); } a { display: inline-block; text-decoration: none; width: 200px; height: 50px; font-size: 20px; text-indent: 2em; line-height: 50px; color: rgb(248, 241, 241); background-color: rgb(83, 87, 88); } a:hover { background-color: rgb(225, 111, 0); } </style> </head> <div> <a href="#">手机</a> <a href="#">电视</a> <a href="#">笔记本</a> <a href="#">出行</a> <a href="#">智能</a> <a href="#">健康</a> <a href="#">耳机</a> </div> </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> input:focus { /* color: pink; */ background-color: rgb(100, 223, 18); } </style> </head> <body > <table cellspacing="10" width="600" > <tr><td colspan="2"><h4>青春不常在 ，抓紧谈恋爱</h4></td></tr> <!-- 第一行 --> <tr> <td>性别</td> <td><input type="radio" required="required " name="xingbie" id="男"/> <label for="男"><img src="图片/桌面GIF图标/性别男.jpg" width="25"/>男</label> <input type="radio" name="xingbie" id="女"/> <label for="女"><img src="图片/桌面GIF图标/性别女.jpg" width="25"/>女</label></td> </tr> <!-- 第二行 --> <tr> <td class="red">生日</td> <td> <select> <option>---请选择年---</option> <option>1991年</option> <option>1992年</option> <option>1993年</option> <option>1994年</option> <option>1995年</option> <option>1996年</option> <option>1997年</option> <option>1998年</option> <option>1999年</option> <option>2000年</option> <option>2001年</option> <option>2002年</option> <option>2003年</option> <option>2004年</option> <option>2005年</option> <option>2006年</option> <option>2007年</option> <option>2008年</option> <option>2009年</option> <option>2010年</option> <option>2011年</option> <option>2012年</option> <option>2013年</option> <option>2014年</option> <option>2015年</option> <option>2016年</option> <option>2017年</option> <option>2018年</option> <option>2019年</option> <option>2020年</option> <option>2021年</option> <option>2022年</option> </select> <select> <option>---请选择月---</option> <option>1月</option> <option>2月</option> <option>3月</option> <option>4月</option> <option>5月</option> <option>6月</option> <option>7月</option> <option>8月</option> <option>9月</option> <option>10月</option> <option>11月</option> <option>12月</option> </select> <select> <option>---请选择日---</option> <option>1日</option> <option>2日</option> <option>3日</option> <option>4日</option> <option>5日</option> <option>6日</option> <option>7日</option> <option>8日</option> <option>9日</option> <option>10日</option> <option>11日</option> <option>12日</option> <option>13日</option> <option>14日</option> <option>15日</option> <option>16日</option> <option>17日</option> <option>18日</option> <option>19日</option> <option>20日</option> <option>21日</option> <option>22日</option> <option>23日</option> <option>24日</option> <option>25日</option> <option>26日</option> <option>27日</option> <option>28日</option> <option>29日</option> <option>30日</option> <option>31日</option> </select> </td> </tr> <!-- 第三行 --> <tr><td>所在地区</td><td><input type="text" /></td></tr> <!-- 第四行 --> <tr> <td>婚姻情况</td> <td> <input type="radio" name="hunyin" id="未婚"/> <label for="未婚">未婚</label> <input type="radio" name="hunyin" id="已婚"/> <label for="已婚">已婚</label> <input type="radio" name="hunyin" id="离婚"/> <label for="离婚">离婚</label> </td> </tr> <!-- 第五行 --> <tr><td>学历</td><td><input type="text" /></td></tr> <!-- 第六行 --> <tr> <td>喜欢的水果</td> <td> <input type="checkbox" name="hunyin" id="1"/> <label for="1">苹果</label> <input type="checkbox" name="hunyin" id="2"/> <label for="2">橘子</label> <input type="checkbox" name="hunyin" id="3"/> <label for="3">葡萄</label> <input type="checkbox" name="hunyin" id="4"/> <label for="4">梨子</label> <input type="checkbox" name="hunyin" id="5"/> <label for="5">芒果</label> </td> </tr> <tr> <tb> <input type="file" multiple:"multiple" name="hunyin" id="1" /> <label for="1">上传资源</label> </tb> </tr> <!-- 第七行 --> <tr> <td>自我介绍</td> <td> <textarea rows="3" cols="20"></textarea> </td> </tr> <!-- 第八行 --> <tr> <td></td><td> <input type="submit" value="免费注册"/> <br> <input type="checkbox" checked="checked" id="同意"/> <label for="同意">我同意注册条款和会员加入标准</label> <br> <a href="#">我是会员 ，立即登录</a> </td> </tr> <!-- 第九行 --> <tr> <td></td><td> <h3>我承诺</h3> <ul> <li>年满18岁 ，单身</li> <li>把着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </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>仿土豆网显示隐藏遮罩案列</title>> <style> * { margin: 0; padding: 0; } .tudou { position: relative; width:444px; height: 320px; background-color: pink; margin: 30px auto; } .tudou img { width: 100%; height: 100%; } .mask { /* 隐藏 */ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .4) url(图片/播放图标.png) no-repeat center; } .tudou:hover .mask { /* 显示 */ display: block; } </style> </head> <body> <div class="tudou"> <div class="mask"></div> <img src="http://t15.baidu.com/it/u=1810572718,3307870279&fm=224&app=112&f=JPEG?w=350&h=350" alt=""> </div> </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"> <title>2D动画之图片放大</title> <style> .doxss { overflow: hidden; margin: 10px; float: left; } .doxss img { transition: all 1s; } .doxss img:hover { transform: scale(1.5); } </style> </head> <body> <div class="doxss"> <img src="/Picture/动图合集/2.gif" alt=""> </div> </body> </html>5. 奔跑的熊
<!DOCTYPE html> <html lang="Cn_zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=divdiv, initial-scale=1.0"> <title>Document</title> <style> .ss { width: 100%; height: 450px; background-image: url(/Picture/静态合集/山峰.jpg); } .ss .ss1 { position: absolute; width: 185px; height: 100px; top: 64%; background: url(/Picture/静态合集/熊.png) no-repeat; animation: xiong 1s steps(8) infinite, zhongxin 3s forwards; } @keyframes xiong { 0% { background-position: 0 0; } 100% { background-position: -1500px 0; } } @keyframes zhongxin { 0% { left:0; } 100% { left:45%; transform: translateX(-50%); } } </style> </head> <body> <div class="ss"> <div class="ss1"></div> </div> </body> </html>6. 旋转木马
<!DOCTYPE html> <html lang="Cn_zh"> <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> body { perspective: 1000px; background-color: pink; } section { position: relative; transform-style: preserve-3d; width: 300px; height: 200px; margin: 300px auto; animation: xzmm 10s linear infinite; } section:hover { animation-play-state: paused; } @keyframes xzmm { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } } section div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(/Picture/动图合集/雨滴.gif) no-repeat; } section div:nth-child(1) { transform: translateZ(300px); } section div:nth-child(2) { transform: rotateY(60deg) translateZ(300px); } section div:nth-child(3) { transform: rotateY(120deg) translateZ(300px); } section div:nth-child(4) { transform: rotateY(180deg) translateZ(300px); } section div:nth-child(5) { transform: rotateY(240deg) translateZ(300px); } section div:nth-child(6) { transform: rotateY(300deg) translateZ(300px); } </style> </head> <body> <section> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </section> </body> </html>7. 百度换肤
点击图片 ，更换背景
<!DOCTYPE html> <html lang="Cn_zh"> <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="my.js"></script> --> <title>Document</title> </head> <body> <style> img { position: relative; width: 100px; height: 100px; margin: auto; left: 20%; margin-top: 50px; } </style> <img src="/Picture/静态合集/大背景.gif" alt=""> <img src="/Picture/静态合集/黑背景.gif" alt=""> <img src="/Picture/动图合集/雨滴.gif" alt=""> <img src="/Picture/动图合集/1.gif" alt=""> <script> // 1. 获取元素 var imgs = document.getElementsByTagName(img); var body = document.body; // 2. 循环注册事件 for(var i = 0; i < imgs.length; i++) { imgs[i].onclick = function() { // 1) 先把所有的背景去掉 干掉所有人 for(var i = 0; i < imgs.length; i++) { body.style.backgroundImage = ; } // 2) 然后让当前点击元素的url为body的url 留下我自己 body.style.background = url(+this.src+); } } </script> </body> </html>8. tab栏切换
跟着tab栏切换 ，内容也跟着变
<!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>tab栏切换</title> <style> * { margin: 0; padding: 0; } .tab { padding: 10px 20px; } .tab .tab_list { background-color: #eef1ee; height: 39px; border: 1.5px solid #d8dad8; } .tab_list li { float: left; line-height: 38px; padding: 0 20px; list-style: none; text-align: center; cursor: pointer; } .tab_list .current { position: relative; top: -1px; background-color: #c81623; color: #fff; border: 1.5px solid #b95c53; } .tab_con .item { display: none; } </style> </head> <body> <div class="tab"> <div class="tab_list"> <ul> <li class="current">商品介绍</li> <li>规格与包装</li> <li>销后保障</li> <li>商品评价</li> <li>手机社区</li> </ul> </div> <div class="tab_con"> <div class="item" style="display: block;"> 商品介绍模块内容 </div> <div class="item" > 规格与包装模块内容 </div> <div class="item"> 销后保障模块内容 </div> <div class="item"> 商品评价模块内容 </div> <div class="item"> 手机社区模块内容 </div> </div> </div> <script> var lis = document.getElementsByTagName(li); var item = document.getElementsByClassName(item); console.log(lis); for(var i = 0; i < lis.length; i++) { lis[i].setAttribute(index, i); lis[i].onclick = function() { for(var i = 0; i < lis.length; i++ ) { lis[i].className = ; item[i].style = display: none;; } this.className = current; var index = this.getAttribute(index); item[index].style = display: block;; } } </script> </body> </html>9. 下拉菜单
鼠标经过 ，显示下拉菜单
<!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> li { list-style: none; } a {text-decoration: none;} .nav>li { float: left; margin: 0 10px; } .nav li a { /* background-color: pink; */ padding-left: 10px; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; padding: 0px; margin: 0; /* width: 100%; */ border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a { padding: 0 10px; } .nav ul li a:hover { background-color: #FFF5DA; } </style> </head> <body> <ul class="nav"> <li> <!-- ∧∨ --> <a href="#">微博<span id="l">∨</span></a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> <li> <a href="#">微信<span id="l">∨</span></a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> <li> <a href="#"> QQ <span id="l">∨</span></a> <ul> <li><a href="">私信</a></li> <li><a href="">评论</a></li> <li><a href="">@我</a></li> </ul> </li> </ul> <script> // 1. 获取元素 var nav = document.querySelector(.nav); var span = document.querySelectorAll(#l); var lis = nav.children; console.log(span); // 2. 循环注册事件 for(var i = 0; i < lis.length; i++) { lis[i].onmouseover = function() { this.children[1].style.display = block; } lis[i].onmouseout = function() { this.children[1].style.display = none; } } </script> </body> </html>10. 发布留言
进行留言 ，删除等操作
<!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; } textarea { resize: none;} .box { background-color: rgb(255, 234, 234); width: 300px; padding: 20px 10px; } li { margin-top: 10px; list-style: none; background-color: pink; } li a { text-decoration: none; float: right; } </style> </head> <body> <div class="box"> <textarea rows="4" id="wenbenyu"> </textarea> <input type="button" value="发布" name="" id="anniu"> <ul ></ul> </div> <script> var textarea = document.getElementById(wenbenyu); var input = document.getElementById(anniu); var ul = document.querySelector(ul); // 获取父节点 input.onclick = function() { if(textarea.value == ) { alert(你没有输入内容); return false; } else { // 1. 创建节点元素节点 var li = document.createElement(li); li.innerHTML = textarea.value + <a href="#">删除</a>; // 添加元素 ul.insertBefore(li, ul.children[0]); // 删除元素 var as = document.querySelectorAll(a); for(var i = 0; i < as.length; i++) { as[i].onclick = function() { ul.removeChild(this.parentNode); } } } } </script> </body> </html>11. 动态生成表格
动态生成表格 ，可以对其进行删除
<!DOCTYPE html> <html lang="Cn_zh"> <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> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </style> </head> <body> <table cellspacing="0"> <thead> <tr style="background-color: #cacdca;"> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> <script> // 1. 准备数据 var dates = [ { name: 买买提, subject: Javascript, score: 100 }, { name: 古丽, subject: Javascript, score: 100 }, { name: 艾莉, subject: Javascript, score: 100 }, { name: 卖力, subject: Javascript, score: 100 }, ]; // 2. tbody创建行 var tbody = document.querySelector(tbody); for(var i = 0; i < dates.length; i++) { // 1) 创建 tr var tr = document.createElement(tr); tbody.appendChild(tr); // 2) 行里面创建单元格 for (var k in dates[i]) { // 创建单元格 var td = document.createElement(td); // 把对象里面的属性值 dates[i][k] 给td td.innerHTML = dates[i][k]; tr.appendChild(td); } // 3) 操作单元格创建 var td = document.createElement(td); td.innerHTML = <a href="javascript:;">删除</a>; tr.appendChild(td); } // 3. 删除操作设置 var a = document.querySelectorAll(a); for(var i = 0; i < a.length; i++) { a[i].onclick = function() { tbody.removeChild(this.parentNode.parentNode); } } </script> </body> </html>12. 图片跟随鼠标移动
图片随着鼠标一起移动
<!DOCTYPE html> <html lang="Cn_zh"> <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> img { position: absolute; } </style> </head> <body> <img src="/Picture/桌面GIF图标/播放图标.png" alt=""> <script> var img = document.querySelector(img); document.addEventListener(mousemove, function(e) { console.log(e.clientX); console.log(e.clientY); img.style.left = e.pageX - 15 + px; img.style.top = e.pageY - 15 + px ; }); </script> </body> </html>13. 按键输入内容
按 s 键 ，输入框获取焦点
<!DOCTYPE html> <html lang="Cn_zh"> <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></style> </head> <body> <input type="text" name="" placeholder="请输入" id=""> <script> var input = document.querySelector(input); document.onkeyup = function(e) { console.log(e.keyCode); if(e.keyCode == 83){ input.focus(); input.onkeypress = function(e) { input.value = e.key; } } } </script> </body> </html>14. 定时器实现
实现计时功能
<!DOCTYPE html> <html lang="Cn_zh"> <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> span{ float: left; width: 20px; height: 20px; background-color: #000; color: #fff; padding-left: 10px; padding-right: 10px; margin: 2px; } </style> </head> <body> <span class="hour">1</span> <span class="minute">1</span> <span class="second">1</span> <script> // 获取元素 var hour = document.querySelector(.hour); // 小时 var minute = document.querySelector(.minute); // 分钟 var second = document.querySelector(.second); // 秒 var inputTime = +new Date(2022-12-26 14:41:00); // 返回的是用户输入时间总的毫秒数 conutDown(); // 先调用一次 // 开启定时器 var timer = setInterval(conutDown, 1000); function conutDown() { var nowTIme = +new Date(); // 返回的时当前时间总的毫秒数 var times = (inputTime - nowTIme) / 1000;创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！