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>
JavaScript版本
（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>
跑马灯·1
左侧菜单
<!--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>
左侧菜单 JavaScript
<!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>
jQuery
全选反选
<!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>
JavaScript
<!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>
jQuery
<!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>
JavaScript例子的更多相关文章
- WebSocket实战之——JavaScript例子
一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...
- 简单的javascript例子
<html> <head> <title>hongmaju</title> <link rel="shortcut icon" ...
- WebSocket实战之JavaScript例子
一.详细代码案例 详细解读一个简单html5 WebSocket的Js实例教程,附带完整的javascript websocket实例源码,以及实例代码效果演示页面,并对本实例的核心代码进行了深入解读 ...
- JavaScript例子3-对多选框进行操作，输出选中的多选框的个数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript例子2-使一个特定的表格隔行变色
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- JavaScript例子1-给网页中所有<p>元素添加onclick事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- javaScript 例子
1.a标签调用js的几种方法 a href="javascript:void(0);" onclick="js_method()" a href="# ...
- 在博文中嵌入Javascript代码
今天吃饭时无聊,突然想到Markdown除了兼容HTML会不会也兼容Javascript,于是博文里除了码文插音乐还可以干点更好玩的事儿了,可以自动修改markdown文件本身,比如说自动修改从Git ...
- javascript对象引用与赋值
avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...
随机推荐
- Java学习之垃圾回收
垃圾回收(GC) GC需要完成的三件事情: 哪些内存需要回收? 什么时候回收? 如何回收? 为什么"GC自动化"之后还要研究GC?当需要排查各种内存溢出.内存泄漏问题时,当GC成为 ...
- xshell 常用命令
一.grep 命令 (1)命令格式 grep [选项] pattern [file] (2)常用参数 参数 描述 -c 计算找到 '搜寻字符串'(即 pattern) 的次数 -i 忽略大小写的不同, ...
- 配置内核 Makefile:1449: *** mixed implicit and normal rules. Stop.【转】
本文转载自:https://blog.csdn.net/bitowang/article/details/8446494 在编译内核的时候提示Makefile:1449: *** mixed impl ...
- Convolutional Neural Network
Why CNN for Image 图片是由像素点组成的,可以这样来解释深度神经网络对图片的处理. 第一层的layer是最基本的分类器,区分一些基本的特征,比如颜色.是否有斜线. 第二层的layer会 ...
- ngnix进阶
ngnix进阶 nginx: [warn] duplicate MIME type "text/html" in /usr/local/nginx/conf/nginx.conf: ...
- sql报字段过大的错误解决方法
set global max_allowed_packet = 2*1024*1024*10
- spring与quartz整合
这周学习了quartz定时任务,现在进行总结一下.首先要认识定时任务中几个关键接口,以及各个接口之间是如何联系起来的. 1.关键接口 (1)Scheduler,任务调度的API,它可以用来启动或者终 ...
- CodeChef CHEFSOC2 Chef and Big Soccer 水dp
Chef and Big Soccer Problem code: CHEFSOC2 Tweet ALL SUBMISSIONS All submissions for this prob ...
- scala学习手记12 - 字段、方法和构造函数
在上一节创建了一个scala类,如果没有更多的方法,scala类的定义还可以更简单一些,看一下下面这个CreditCard类的定义: class CreditCard(val number: Int, ...
- bootstrap框架:常用内容一
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...