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 ...
随机推荐
- CodeForces - 919D Substring (拓扑排序+dp)
题意:将一个字符串上的n个字符视作点,给出m条有向边,求图中路径上最长出现的相同字母数. 分析:首先如果这张图中有环,则可以取无限大的字符数,在求拓扑排序的同时可以确定是否存在环. 之后在拓扑排序的结 ...
- $微信小程序开发实践点滴——Bmob基本REST API的python封装
Refer:Bmob后端云REST API接口文档:http://docs.bmob.cn/data/Restful/a_faststart/doc/index.html 本文使用python对Bmo ...
- Javascript 小数保留2位
1.字符串截取法 function get(){ var s = 22.127456 + ""; var str = s.substring(0,s.indexOf(& ...
- CAS单点登出的原理
单点登出功能跟单点登录功能是相对应的,旨在通过Cas Server的登出使所有的Cas Client都登出. Cas Server的登出是通过请求“/logout”发生的,即如果你的Cas Serve ...
- 面试：做过sql优化吗？
近来面试找工作经常会遇见这种问题: 做过数据库优化吗?大数据量基础过吗?系统反应慢怎么查询? 这咱也没背过啊,面试还老问,现在的网站主要的压力都来自于数据库,频繁的数据库访问经常会使系统瘫痪,这样就需 ...
- Sublime : python环境
1.安装python.注意区分32位和64位版本,勾选下图红框实现自动将python安装位置添加到环境变量 2.键盘win+r,输入cmd调出命令行,输入python回车,根据结果查看时候安装成功 3 ...
- React Native混合开发中必须要学会点FlexBox布局
在前面的案例中,界面的搭建都是采用CSS的布局,基于盒子模型,依赖 display属性 , position属性, float属性.但对于那些特殊布局非常不方便,比如,垂直居中. 一种全新的针对web ...
- [Android]AndFix使用说明
AndFix使用说明 AndFix,全称是Android hot-fix.是阿里开源的一个热补丁框架,允许APP在不重新发布版本的情况下修复线上的bug.支持Android 2.3 到 6.0,并且支 ...
- Spring AOP（2）
- spring配置mq入门案例
第一步:添加maven配置 <!-- mq --> <dependency> <groupId>org.springframework</groupId> ...