实战案例一：
“灯泡发光”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javaScript案例之点亮灯泡</title> <style type="text/css"> img{ width:100px; height:180px; margin:50px 50%; } </style> </head> <body> <img id="myLight" onclick="changeImage()" src="images/pic_bulboff.gif" title="点击灯泡发光或关闭" > <script> function changeImage(){ element = document.getElementById("myLight"); if(element.src.match('bulbon')){ element.src="images/pic_bulboff.gif"; } else{ element.src="images/pic_bulbon.gif"; } } </script> </body> </html>
实战案例二：
模态框 -- 点击页面按钮，弹出模态框，弹出后可取消显示，恢复开始界面。
<!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <title>模态框</title> <style type="text/css"> *{ padding:0; margin:0; } html,body{ height:100%; } #box{ width:100%; height:100%; background:rgba(0,0,0,.2);// 依次是红，绿，蓝，透明度（0到1） } #content{ position:relative; top:150px; width:400px; height:200px; line-height:200px; text-align:center; color:greenyellow; background-color: #3e8f3e; margin:0 auto; } #span1{ position:absolute; background-color: #66afe9; top:0; right:0; width:25px; height:25px; line-height:25px; text-align:center; color:white; } </style> <body> <button id="btn" style="margin:10px 45%;width:60px;height:25px;">弹出</button> <div class="container" > <p style="color:rebeccapurple;margin-left:40%;">点击上方按钮，弹出模态框</p> </div> </body> <script type="text/javascript"> var btn = document.getElementById("btn"); // 获取按钮元素 var dom_div = document.createElement("div"); // 创建div节点 var dom_p = document.createElement("p"); // 创建p节点 var dom_span = document.createElement("span"); // 创建span节点 // 设置id和设置文本 dom_div.id = "box"; dom_p.id = "content"; dom_p.innerHTML = "模态框成功弹出"; dom_span.id = "span1"; dom_span.innerHTML ="X"; dom_div.appendChild(dom_p);// 将新建的p节点添加到新建的div上 dom_p.appendChild(dom_span);// 将span节点添加到p节点上 btn.onclick = function(){ // 向body动态添加一个div btn.parentNode.insertBefore(dom_div,btn); } dom_span.onclick = function(){ // 点击模态框中的“X”取消显示 dom_div.parentNode.removeChild(dom_div); } </script> </html>
实战案例三：
“点击有惊喜” -- 点击桌面的方框，每点击一次会切换不同的显示，最后切换回初始界面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>点击有惊喜</title> <style type="text/css"> *{ margin:0; padding:0; } .box{ width:300px; height:200px; margin:200px auto; background: red; border:1px solid greenyellow; text-align: center; line-height:200px; font-size:18px; color:royalblue; cursor: pointer; } </style> </head> <body> <div class="box"> 点击有惊喜！ </div> </body> <script type="text/javascript"> var dom_box = document.getElementsByClassName("box")[0]; var n = 0; dom_box.onclick = function(){ n++; if(n%3==1){ dom_box.style.background="yellow"; dom_box.innerText = "上当了吧！Too young too simple"; } else if(n%3==2){ dom_box.style.background="blue"; dom_box.innerText = "上当了吧！Too young too simple"; } else{ dom_box.style.background="red"; dom_box.innerText = "点击继续！"; } } </script> </html>
实战案例四：
通过HTML、CSS和javascript制作一个简单的留言板。
可写留言，将留言加入列表，逐条删除留言，统计留言数目。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>留言板</title> <style type="text/css"> *{ margin:0; padding:0; } body{ background: #d4ffc0; } h1{ margin-left:350px; margin-top:50px; color: #99c2ff; font-family: "Adobe 楷体 Std R"; } textarea{ margin-left:350px; margin-top:20px; border: 1px solid palegreen; position:relative; } input{ width:60px; height:20px; text-align: center; } button{ width:60px; height:20px; } ul{ margin-left:350px; margin-top:20px; list-style:none; } ul li span{ margin-left: 100px; cursor: pointer; } ul li span:hover{ color:red; } </style> </head> <body> <h1>欢迎来到留言板</h1> <div id="box"> </div> <textarea id="msg" placeholder="此处写留言"></textarea> <input type="button" id="btn" value="留言" > <button onclick="sum()">统计</button> </body> <script type="text/javascript"> var dom_ul = document.createElement("ul"); // 创建节点 var dom_box = document.getElementById("box");// 获取节点 dom_box.appendChild(dom_ul);//添加子节点 var dom_btn = document.getElementById("btn");// 获取节点 var dom_msg = document.getElementById("msg");// 获取节点 var count = 0; // 统计留言条数 dom_btn.onclick = function(){ var dom_li = document.createElement("li");// 创建节点 var li_msg = document.getElementsByTagName("li");// 通过节点获取内容 console.log(li_msg); // 设置内容 dom_li.innerHTML = dom_msg.value + "<span alt='删除'>x</span>"; if(li_msg.length == 0){ dom_ul.appendChild(dom_li); // 将留言添加到无序列表中 count++; // 留言数目加1 } else{ dom_ul.insertBefore(dom_li,li_msg[0]);//将留言添加到无序列表已有的留言最前面 count++;// 留言数目加1 } dom_msg.value = ""; // 清空输入框内的留言 var dom_span = document.getElementsByTagName("span");// 获取节点元素 for(var i=0;i<dom_span.length;i++){ dom_span[i].onclick = function(){ dom_ul.removeChild(this.parentNode);// 删除li节点，this表示span节点 count--; } } } function sum(){ alert("你一共发布了"+count+"条留言！"); } </script> </html>
实战案例五：
选项卡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> *{ margin:0; padding:0; } ul{ list-style: none; } a{ text-decoration: none; } #box{ width:600px; margin:100px auto; border:1px solid palegreen; } ul li{ width:150px; height:40px; background-color: #cbf0ff; text-align: center; line-height: 40px; font-size:15px; float:left; } li.active{ background-color: #8f83ff; font-size:18px; } p{ width:600px; height:300px; background-color: #96ff27; line-height: 300px; text-align: center; font-size:30px; font-family: Arial; display: none; } p.active{ background-color: #8f83ff; display:block; color: #86ff9c; } </style> </head> <body> <div id="box"> <ul> <li class="active"><a href="#">首页</a></li> <li><a href="#">人物</a></li> <li><a href="#">风景</a></li> <li><a href="#">建筑</a></li> </ul> <p class="active">显示首页</p> <p>显示人物</p> <p>显示风景</p> <p>显示建筑</p> </div> </body> <script type="text/javascript"> var box_li = document.getElementsByTagName("li"); var p_content = document.getElementsByTagName("p"); for(var i=0;i<box_li.length;i++){ box_li[i].index = i; box_li[i].onclick = function(){ for(var j=0;j<p_content.length;j++){ box_li[j].className = ""; p_content[j].className = ""; } this.className = "active"; // this表示当前点击的li节点 p_content[this.index].className = "active"; } } </script> </html>
实战案例六：
仿淘宝搜索栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>仿淘宝搜索框</title> <style type="text/css"> *{ padding:0; margin:0; } .search{ position:relative; } input{ width:300px; height:30px; border:1px solid deepskyblue; border-radius:5px; margin-top:30px; margin-left:300px; display:block; outline: none; } label{ /*margin-left:310px;*/ top:4px; left:310px; font-size:16px; color: #8489ff; position:absolute; } </style> </head> <body> <div class="search"> <input type="search" id="text" /> <label for="txt" id="msg">你好，天猫</label> </div> </body> <script type="text/javascript"> var dom_text = document.getElementById("text"); var dom_msg = document.getElementById("msg"); // 检测到用户输入时 dom_text.oninput = function(){ if(this.value==""){ dom_msg.style = "block"; } else{ dom_msg.style.display = "none"; } } </script> </html>
实战案例七：
匀速运动的”小广告“ --- 点击按钮 ，使”广告“运动起来，并设置为运动一定时间后消失（提示：使用定时器）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>匀速运动</title> <style type="text/css"> *{ padding:0; margin:0; } button{ width:80px; height:30px; border:1px solid cornflowerblue; border-radius:10px; background-color: transparent; } button:hover{ background-color: #99a3ff; } #box{ width:150px; height:100px; background-color: #acffe5; top:50px; left:0; position:absolute; text-align: center; line-height: 100px; color: #d693ff; } </style> </head> <body> <button id="btn_run">点击运动</button> <div id="box"> 我会匀速运动额！ </div> </body> <script type="text/javascript"> var dom_btn = document.getElementById("btn_run"); var dom_box = document.getElementById("box"); var count = 0; var time = null; dom_btn.onclick = function(){ time = setInterval(function(){ count += 1; if(count>1000){ clearInterval(time); dom_box.style.display = "none"; } dom_box.style.left = count+"px"; },20) } </script> </html>
实战案例八：
10秒后关闭广告！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style type="text/css"> *{ padding:0; margin:0; } body{ width:100%; height:100%; } img{ position:fixed; } #left{ left:0; } #right{ right:0; } p{ text-align:center; font-size:20px; } span{ color:firebrick; } </style> </head> <body> <img src="./images/beautiful.gif" id="left"> <img src="./images/adver2.jpg" id="right"> <p id="p1">广告倒计时<span>10s</span></p> </body> <script type="text/javascript"> window.onload = function(){ var dom_adver1 = document.getElementById("left"); var dom_adver2 = document.getElementById("right"); var dom_p = document.getElementById("p1"); var count = 10; var time = null; time = setInterval(function() { if (count <= 1) { clearInterval(time); dom_adver1.style.display = "none"; dom_adver2.style.display = "none"; } count--; dom_p.innerHTML = "广告倒计时" +"<span>"+ count + "s"+"</span>"; },1000) } </script> </html>
实战案例九：
页面滚动示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>滚动条</title> <style type="text/css"> *{ padding:0; margin:0; } #wrap{ margin:100px auto; width:512px; height:300px; border:1px solid yellowgreen; overflow: hidden; position:relative; } #wrap span{ height:150px; width:100%; position:absolute; } .m_up{ top:0; } .m_down{ bottom:0; } #box{ top:0; bottom:0; height:1200px; width:100%; position:absolute; background-color: #fecfff; } .p1{ height:400px; background-color: #ffdabc; text-align: center; line-height: 400px; font-size:30px; } .p2{ height:400px; background-color: #abff8a; text-align: center; line-height: 400px; font-size:30px; } .p3{ height:400px; background-color: #78dbff; text-align: center; line-height: 400px; font-size:30px; } </style> </head> <body> <div id="wrap"> <div id="box"> <p class="p1" >我是第一页</p> <p class="p2" >我是第二页</p> <p class="p3" >我是第三页</p> </div> <span class="m_up" id="up"></span> <span class="m_down" id="down"></span> </div> </body> <script type="text/javascript"> var dom_up = document.getElementById("up"); var dom_down = document.getElementById("down"); var dom_box = document.getElementById("box"); var count = 0; var time = null; dom_up.onmouseover = function(){ clearInterval(time); time = setInterval(function(){ count -= 3; count > -900 ? dom_box.style.top = count+"px":clearInterval(time); },30) } dom_down.onmouseover = function(){ clearInterval(time); time = setInterval(function(){ count += 3; count < 0 ? dom_box.style.top = count+"px":clearInterval(time); },30) }
实战案例十：
轮播图动画（图片大小为1920*1080，可以换成自己喜欢的，如大小与我的不同，修改一下图片复位时时的数值，还有记得位置也要修改额！）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>轮播图</title> <style type="text/css"> *{ padding:0; margin:0; } ul{ list-style: none; } .box{ width:1920px; height:1080px; margin:100px auto; overflow: hidden; position:relative; } .box ul{ width:300%; position:absolute; top:0; left:0; } ul li{ float:left; } </style> </head> <body> <div class="box"> <ul> <li><img src="images/pic1.png"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.png"></li> </ul> </div> </body> <script type="text/javascript"> // 设置自动播放 var dom_box = document.getElementsByClassName("box")[0]; var dom_ul = dom_box.children[0]; var num = 0;// 图片左侧运动的位置 var timer = null; timer = setInterval(autoPlay,30); // 函数具体声明 function autoPlay(){ num -= 10; // 每30ms向左移动10px num < -3840 ? num=0:num; // 总共3张图片，每张图片宽度为1920，所以当第三张左侧贴到边框左侧时，图片位置复位 dom_ul.style.left = num+"px"; // 不断无序列表修改位置 } // 鼠标移到图片上，停止移动 dom_box.onmouseover = function(){ clearInterval(timer); // 清理定时器 } dom_box.onmouseout = function(){ timer = setInterval(autoPlay,40);// 重新设置定时器 } </script> </html>
未完，待续...
3930
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
