JavaScript例子
模态框（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;
width: 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%;
width: 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%;
width: 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>
浙公网安备 33010602011771号