一、点击有惊喜案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击有惊喜呦</title> <style type="text/css"> *{ padding:0; margin: 0; } #surprised{ width:400px; height: 200px; font-size: 30px; text-align: center; line-height: 200px; cursor: pointer; margin: 20px auto; color: white; background-color: blue; } </style> </head> <body> <div id="surprised"> 点击有惊喜呦！！！ </div> </body> <script type="text/javascript"> var oDiv = document.getElementById('surprised'); var clickTimer = 0; oDiv.onclick = function () { switch(clickTimer % 4){ case 1: this.style.backgroundColor = 'green'; //this在这里就是指当点击事件的对象oDiv this.innerText = '再次点击试试'; break; case 2: this.style.backgroundColor = 'orange'; this.innerText = '哈哈，骗你的'; break; case 3: this.style.backgroundColor = 'red'; this.innerText = '真的没了！！！'; break; default: this.style.backgroundColor = 'blue'; this.innerText = '点击有惊喜呦！！！'; } clickTimer++; } </script> </html>
二、模拟框案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模态框案例</title> <style type="text/css"> *{ padding: 0; margin:0; } html,body{ height: 100%; } #wrapper{ width:100%; height: 100%; background-color: rgba(0,0,0,.3); } #p1{ position: relative; top:150px; width:400px; height: 200px; text-align: center; line-height: 200px; margin:auto; background-color: white; } #span1{ position: absolute; right: 0; top:0; width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; color: #ffffff; background-color: red; } </style> </head> <body> <button id="btn">点我一下</button> <div id="wrapper"> <div id="p1"></div> <div id="span"></div> </div> </body> <script type="text/javascript"> /*思路： * 1.创建一个div盒子，设置好属性 * 2.添加p标签和span标签，分别设置好位置，分别插入到div标签里 * 3.定义button单击事件 * */ var oDiv = document.createElement('div'); //创建一个盒子 var oP = document.createElement('p'); var oSpan = document.createElement('span'); var btn = document.getElementById('btn'); var body = document.getElementsByTagName('body'); // btn.onclick = function () { // oP.innerText = 'This is True music'; // oSpan.innerText = 'X'; // oDiv.appendChild(oP); // oP.appendChild(oSpan); // oDiv.id = 'wrapper'; // oP.id = 'p1'; // oSpan.id = 'span1'; // body[0].insertBefore(oDiv,btn); // } // oSpan.onclick = function(){ // body[0].removeChild(oDiv); // } </script> </html>
三、模拟框实战
<!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; } body { background-color: aliceblue; position: relative; } #div { width: 100%; height: 800px; } #div h1{ text-align: center; font-size: 100px; font-weight: 100; color: #000; display: block; } #divs { width: 700px; height: 500px; background-color: beige; border-radius: 5px ; box-shadow: 20px 30px 50px rgb(53, 53, 53); position: absolute; top: 20%; left: 30%; display: none; } #divs .divs1 { width: 300px; height: 400px; border: 1px solid black; margin: 30px auto; position: relative; } h3 { text-align: center; } .divs1 div { margin-top: 20px; margin-left: 7px; } input { outline: none; } a { display: inline-block; width: 80px; height: 50px; line-height: 50px; background-color: thistle; border-radius: 25px; text-align: center; text-decoration: none; margin-left: 110px; margin-top: 50px; color: white; } a:hover { background-color: steelblue; } p { text-align: center; cursor: pointer; width: 30px; height: 30px; line-height: 30px; position: absolute; right: -200px; top: -30px; background-color: tomato; font-size: 20px; color: #fff; display: none; } </style> </head> <body> <button>点击我弹出对话框</button> <div id="div"> <h1>欢迎来到注册页面</h1></div> <div id="divs"> <div class="divs1"> <h3>用户注册界面</h3> <div> 请输入姓名：<input type="text" style="width: 100px;" placeholder="请输入你的名字"> </div> <p>X</p> <div> 请输入账号：<input type="text" name="" id="" maxlength="11" placeholder="请输入十一位的账号"> </div> <div> 请输入密码：<input type="password" name="" id="" maxlength="11" placeholder="请输入密码"> </div> <div> 请确认密码：<input type="password" name="" id="" maxlength="11" placeholder="请确认密码"> </div> <a href="###">提交注册</a> </div> </div> <script> var p = document.querySelector('p'); var h1 = document.querySelector('h1'); var btn = document.querySelector('button'); var div1 = document.querySelector('#div'); var div2 = document.querySelector('#divs'); btn.addEventListener('click', function () { div1.style.backgroundColor = 'gray'; // btn.disabled = 'false'; btn.innerHTML = '不可选中'; btn.disabled = 'true'; div2.style.display = 'block'; p.style.display = 'block'; h1.style.display='block'; h1.innerHTML = '请注册'; h1.style.color = '#fff'; }) p.addEventListener('click', function () { div2.style.display = 'none'; p.style.display = 'none'; div1.style.backgroundColor = 'aliceblue'; btn.innerHTML = '点击我弹出注册页面'; btn.disabled = ''; h1.style.display = 'none'; // h1.style.color = '#000'; }) </script> </body> </html>
四、制作建议留言板案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>留言板</title> <style type="text/css"> </style> </head> <body> <h1>简易留言板</h1> <div class="wrapper"> <ul id="words"></ul> </div> <textarea id="msg"></textarea> <button id="btn1">留言</button> <button id="btn2" onclick="sum()">统计</button> </body> <script type="text/javascript"> //ul 是用来存储留言记录 var ul = document.getElementById('words'); var msg = document.getElementById('msg'); var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var liCount = 0; //用来记录留言数目的 btn1.onclick = function () { if (!msg.value) { alert('留言板里没有内容') } else { /*将留言插入顶部的具体方法 *1.判断ul中有无元素，没有则使用append，有则使用insertbefore * 2.插入信息同时插入一个span标签，用来设置关闭按钮 * */ var li = document.createElement('li'); li.innerHTML = msg.value + ' <span>X</span>'; if (liCount == 0) { ul.appendChild(li); liCount++; } else { ul.insertBefore(li, ul.childNodes[0]); liCount++; } msg.value = ''; } oSpans = document.getElementsByTagName('span'); for (var i = 0; i < oSpans.length; i++) { oSpans[i].onclick = function () { ul.removeChild(this.parentNode); liCount--; } } }; function sum() { alert('一共有' + liCount + '条信息'); } </script> </html>
五、选项卡案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ height: 100%; } .wrapper{ width: 600px; border: 1px solid red; margin: 30px auto; } ul{ list-style: none; overflow: hidden; /*注意要清除浮动*/ } ul a{ display: block; text-decoration: none; width:200px; height: 50px; text-align: center; line-height: 50px; color: black; } ul li{ float: left; background-color: rgba(0,0,0,.3); } p{ width: 600px; height: 150px; line-height: 150px; text-align: center; display: none; } ul li.active{ background-color: #ffffff; } p.active{ display: block; } </style> </head> <body> <div class="wrapper"> <ul> <li class="active"><a href="#" >首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">热卖</a></li> </ul> <p id="home" class="active">首页内容</p> <p id="news">新闻内容</p> <p id="hotPurchase">热卖内容</p> </div> </body> <script type="text/javascript"> var lis = document.getElementsByTagName('li'); var ps = document.getElementsByTagName('p'); for(var i = 0;i < lis.length;i++){ lis[i].index = i; //这个用来记录每个标签的遍历位置，不用this，这里this指代的应该是window lis[i].onclick = function () { /*思路 * 1.清除所有标签上的active * 2.将单击的li和p标签都添加active属性 * */ //清空class for(var j = 0;j < lis.length;j++){ lis[j].className = ''; ps[j].className = ''; } //注意：这有个坑，不能跳！！！不能用遍历的i，要用this下的属性index this.className = 'active'; ps[this.index].className = 'active'; } } </script> </html>
