模态框(JavaScript)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义模态框</title> <style> .cover { /* 灰色的哪个背景 */ position: fixed; top: 0; right: 0; bottom: 0; left:0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; background-color: white; height: 400px; 600px; z-index: 1000; margin-left: -300px; margin-top: -200px; } .hide { display: none; } </style> <script> function showModal() { // 把.cover和.modal这两个div标签显示出来 // 具体来说就是去掉这个两个标签的.hide 样式类 // 1.找标签 // var coverEles = document.getElementsByClassName("hide"); // var coverEle = coverEles[0]; // coverEle.classList.remove("hide"); var coverEle = document.getElementsByClassName("cover")[0]; coverEle.classList.remove("hide"); // 显示白色筐 var modalEle = document.getElementsByClassName("modal")[0]; modalEle.classList.remove("hide"); } function cancel() { var coverEle = document.getElementsByClassName("cover")[0]; coverEle.classList.add("hide"); // 隐藏白色筐 var modalEle = document.getElementsByClassName("modal")[0]; modalEle.classList.add("hide"); } </script> </head> <body> <input type="button" id="btn" onclick="showModal();" value="显示模态框"> <div class="cover hide"></div> <div class="modal hide"> <input type="text" placeholder="姓名"> <input type="text" placeholder="年龄"> <input type="button" value="提交"> <input type="button" value="取消" onclick="cancel();"> </div> </body> </html>
(jQuery)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义模态框jQuery弹出</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.3); z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; 400px; height: 300px; margin-top: -150px; margin-left: -200px; z-index: 1000; background-color: white; } .hide { display: none; } </style> </head> <body> <input type="button" id="btn" value="点我弹出模态框"> <div class="cover hide"></div> <div class="modal hide"></div> <script src="jquery-3.2.1.min.js"></script> <script> var btnEle = document.getElementById("btn"); btnEle.onclick=function () { // $(".cover").removeClass("hide"); // $(".modal").removeClass("hide"); $(".cover, .modal").removeClass("hide"); // 支持批量操作(必须是统一的操作) } </script> </body> </html>
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .hide { display: none; } .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 999; } .modal { position: fixed; top: 50%; left: 50%; 500px; height: 300px; margin-top: -200px; margin-left: -300px; z-index: 1000; background-color: white; } </style> </head> <body> <input type="button" id="b1" value="添加"> <table border="1" id="t1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>jassin</td> <td>21</td> <td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td> </tr> <tr> <td>2</td> <td>lishi</td> <td>21</td> <td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"> </td> </tr> </tbody> </table> <!--弹框内容start--> <div class="cover hide c1"></div> <div class="modal hide c1"> <p>姓名<input type="text" id="modal-name"></p> <p>年龄<input type="text" id="modal-hobby"></p> <input type="button" value="确定" id="modal-submit"> <input type="button" value="取消" id="modal-cancel"> </div> <!--弹框内容end--> <script> // 显示模态框 function showModal() { // 找到那2个div var c1Eles = document.getElementsByClassName("c1"); for (var i = 0; i < c1Eles.length; i++) { c1Eles[i].classList.remove("hide"); } } // 隐藏模态框 function hideModal() { // 找到那2个div var c1Eles = document.getElementsByClassName("c1"); for (var i = 0; i < c1Eles.length; i++) { c1Eles[i].classList.add("hide"); } } // 找到添加按钮加事件 var b1Ele = document.getElementById("b1"); b1Ele.onclick = function () { showModal(); }; // 取消按钮 var cancelEle = document.getElementById("modal-cancel"); cancelEle.onclick = function () { hideModal(); }; // 找modal中的确定按钮,绑定事件 var submitEle = document.getElementById("modal-submit"); submitEle.onclick = function () { // 确定按钮要做的事 //1、取到input的内容 var nameInput = document.getElementById("modal-name"); var hobbyInput = document.getElementById("modal-hobby"); var name = nameInput.value; var hobby = hobbyInput.value; //2、创建tr标签 var trEle = document.createElement("tr"); //序号 var tableEle = document.getElementById("t1"); var number = tableEle.getElementsByTagName("tr").length; // 拼接tr trEle.innerHTML = "<td>" + number + "</td>" + "<td>" + name + "</td>" + "<td>" + hobby + "</td>" + '<td><input type="button" value="编辑"> <input class="delete" type="button" value="删除"></td>' //3、添加到tboby var tbodyEle = tableEle.getElementsByTagName("tbody")[0]; tbodyEle.appendChild(trEle); // 4、隐藏model hideModal(); }; // 删除按钮绑定事件(一般加class = “delete”) var tableEle = document.getElementById("t1"); tableEle.onclick = function () { // 点击事件 var currentEle = event.target; // 当前点击的标签 if (currentEle.classList.contains("delete")){ // 判断点击的标签有没有某个样式类 // 执行删除 var currentTr = currentEle.parentElement.parentElement; var tbodyEle = tableEle.getElementsByTagName("tbody")[0]; tbodyEle.removeChild(currentTr) } } </script> </body> </html>
跑马灯(定时器)
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>跑马灯</title> </head> <body> <h1 id="i1">---如果全世界都对你恶语相加,我就对你说上一世情话----- </h1> <script> function run() { // 找到id值为i1的标签 var ele = document.getElementById("i1"); // 获取标签的文本内容,存到str变量 var str = ele.innerText; // 把字符串第一位拿出来 var firstStr = str.charAt(0); // 拼到最后组成新的字符串 var newText = str.slice(1) + firstStr; // 赋值给标签的文本内容 ele.innerText = newText; } var timmer = setInterval(run, 500); // clearInterval(timmer);// 清除定时器 </script> </body> </html>
左侧菜单
<!--toggle() 方法切换元素的可见状态。--> <!--如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。--> <!--数组类似于Python中的列表。--> <!--var a = [123, "ABC"];--> <!--console.log(a[1]); // 输出"ABC"--> <!--var d1 = document.getElementsByClassName("content");--> <!--undefined--> <!--d1--> <!--d1是一个数组--> <!--[div.content, div.content.hide, div.content.hide]--> <!--div.content--> <!--div.content.hide--> <!--div.content.hide--> <!--length:3-->
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .left { position: fixed; left: 0; top: 0; width: 30%; height: 1000px; background-color: darkslategrey; } .title { color: white; text-align: center; border-bottom: 1px solid rgb(28, 34, 41); font-size: 20px; } .right { width: 70%; } .content { color: white; } .content > div{ border-bottom: 1px solid rgb(28, 34, 41); padding: 5px; } .hide { /*隐藏菜单*/ display: none } </style> <script> function show(self) { // content的内容所有的隐藏 var d1 = document.getElementsByClassName("content"); // 得到数组 // 找到content for (var i = 0; i < d1.length; i++) { d1[i].classList.add("hide") // 函数体 功能:将content内容隐藏 } //知道点哪个菜单 var d2 = self.nextElementSibling; // 找到这个标签下面的content标签 // 显示该内容 d2.classList.toggle("hide"); console.log(d2) } </script> </head> <body> <div class="left"> <div class="item"> <div class="title" onclick="show(this);">菜单一</div> <!--this为实参--> <div class="content hide"> <div>肠粉</div> <div>牛肉粿</div> <div>粉粿</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单二</div> <div class="content hide"> <div>水晶粿</div> <div>控窑</div> <div>窑番薯</div> </div> </div> <div class="item"> <div class="title" onclick="show(this);">菜单三</div> <div class="content hide"> <div>煎蚝烙</div> <div>牛肉丸</div> <div>粉粿</div> </div> </div> </div> <div class="right"></div> </body> </html>
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>左侧菜单</title> <style> .left { position: fixed; left: 0; top: 0; width: 30%; height: 1000px; background-color: darkslategrey; } .title { color: white; text-align: center; border-bottom: 1px solid rgb(28, 34, 41); font-size: 20px; } .right { width: 70%; } .content { color: white; } .content > div{ border-bottom: 1px solid rgb(28, 34, 41); padding: 5px; } .hide { /*隐藏菜单*/ display: none } </style> </head> <body> <div class="left"> <div class="item"> <div class="title">菜单一</div> <!--this为实参--> <div class="content hide"> <div>肠粉</div> <div>牛肉粿</div> <div>粉粿</div> </div> </div> <div class="item"> <div class="title">菜单二</div> <div class="content hide"> <div>水晶粿</div> <div>控窑</div> <div>窑番薯</div> </div> </div> <div class="item"> <div class="title" >菜单三</div> <div class="content hide"> <div>煎蚝烙</div> <div>牛肉丸</div> <div>粉粿</div> </div> </div> </div> <div class="right"></div> <script src="jquery-3.2.1.min.js"></script> <script> var $titleEles = $(".title"); $titleEles.on("click",function () { $(this).next().toggleClass("hide").siblings(".content").addClass("hide") }) </script> </body> </html>
全选反选
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>作业</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th>dddd </tr> <tr> <td><input class="c1" type="checkbox"></td> <td>jassin</td> <td>21</td> </tr> <tr> <td><input class="c1" type="checkbox"></td> <td>lishi</td> <td>21</td> </tr> </thead> </table> <input type="button" value="全选" onclick="checkAll()"> <input type="button" value="反选" onclick="reverse()"> <input type="button" value="取消" onclick="cancleAll()"> </body> <script> function checkAll() { var checkboxEles = document.getElementsByClassName("c1"); for (var i = 0; i<checkboxEles.length;i++){ checkboxEles[i].checked = true } } // 反选 function reverse(){ var checkboxEles = document.getElementsByClassName("c1"); for (var i = 0; i<checkboxEles.length; i++){ checkboxEles[i].checked =! checkboxEles[i].checked; } } //取消 function cancleAll() { var checkboxEles = document.getElementsByClassName("c1"); for (var i=0;i<checkboxEles.length; i++){ checkboxEles[i].checked=false; } } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px" cellspacing="10" cellpadding="5"> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> <th>爱好</th> </tr> <tr> <td><input type="checkbox" class="input" value="c1"></td> <td>jassin</td> <td>22</td> <td>吃鸡</td> </tr> <tr> <td><input type="checkbox" class="input" value="c2"></td> <td>lishi</td> <td>21</td> <td>睡觉</td> </tr> <tr> <td><input type="checkbox" class="input" value="c3"></td> <td>lili</td> <td>21</td> <td>job</td> </tr> </table> <button class="selectall">全选</button> <button class="cancel">取消</button> <button class="reverse">反选</button> <script src="jquery-3.2.1.min.js"></script> <script> $(".selectall").on("click",function () { $(":checkbox").prop("checked",true) }); $(".cancel").on("click",function () { $(":checkbox").prop("checked",false) }); $(".reverse").on("click",function () { $(":checkbox").each(function (){ if($(this).prop("checked")){ $(this).prop("checked",false) } else{ $(this).prop("checked",true) } }) }) </script> </body> </html>
<!DOCTYPE html> <html lang="zh—CN"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input id="t1" type="button" value="添加"> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>jassin</td> <td>22</td> </tr> <tr> <td><input type="checkbox"></td> <td>lishi</td> <td>21</td> </tr> </tbody> </table> <input id="b1" type="button" value="全选"> <input id="b2" type="button" value="反选"> <input id="b3" type="button" value="取消"> <script src="jquery-3.2.1.min.js"></script> <script> // 找到按钮绑定事件 $("#b1").on("click", function () { $(":checkbox").prop("checked", true) // 找到所有checkbox,全选中 }); $("#b3").on("click", function () { $(":checkbox").prop("checked", false) }); // each 循环 // $("#b2").on("click",function () { // $(":checkbox").each(function () { // if ($(this).prop("checked")){ // $(this).prop("checked",false); // }else { // $(this).prop("checked",true); // } // }) // }) $("#b2").on("click", function () { $(":checkbox").each(function () { var flag = $(this).prop("checked"); // 找到选中的,然后进行取反 $(this).prop("checked", !flag); }) }) </script> </body> </html>