1.JavaScript电灯开关案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>电灯开关</title>
</head>
<body>
<imgid="light"src="img/off.gif">
<script>
/*
分析：
1.获取图片对象
2.绑定单击事件
3.每次点击切换图片
*规则：
*如果灯是开的on,切换图片为off
*如果灯是关的off,切换图片为on
*使用标记flag来完成
*/
//1.获取图片对象
varlight=document.getElementById("light");
varflag=false;//代表灯是灭的。off图片
//2.绑定单击事件
light.onclick=function(){
if(flag){//判断如果灯是开的，则灭掉
light.src="img/off.gif";
flag=false;
}else{
//如果灯是灭的，则打开
light.src="img/on.gif";
flag=true;
}
}
</script>
</body>
</html>
2.JavaScript轮播图案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>轮播图</title>
</head>
<body>
<imgid="img"src="img/banner_1.jpg"width="100%">
<script>
/*
分析：
1.在页面上使用img标签展示图片
2.定义一个方法，修改图片对象的src属性
3.定义一个定时器，每隔3秒调用方法一次。
*/
//修改图片src属性
varnumber=1;
functionfun(){
number++;
//判断number是否大于3
if(number>3){
number=1;
}
//获取img对象
varimg=document.getElementById("img");
img.src="img/banner_"+number+".jpg";
}
//2.定义定时器
setInterval(fun,3000);
</script>
</body>
</html>
3.JavaScript自动跳转到首页案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>自动跳转</title>
<style>
p{
text-align:center;
}
span{
color:red;
}
</style>
</head>
<body>
<p>
<spanid="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
/*
分析：
1.显示页面效果<p>
2.倒计时读秒效果实现
2.1定义一个方法，获取span标签，修改span标签体内容，时间--
2.2定义一个定时器，1秒执行一次该方法
3.在方法中判断时间如果<=0，则跳转到首页
*/
//2.倒计时读秒效果实现
varsecond=5;
vartime=document.getElementById("time");
//定义一个方法，获取span标签，修改span标签体内容，时间--
functionshowTime(){
second--;
//判断时间如果<=0，则跳转到首页
if(second<=0){
//跳转到首页
location.href="https://www.baidu.com";
}
time.innerHTML=second+"";
}
//设置定时器，1秒执行一次该方法
setInterval(showTime,1000);
</script>
</body>
</html>
4.JavaScript动态表格案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>动态表格</title>
<style>
table{
border:1pxsolid;
margin:auto;
width:500px;
}
td,th{
text-align:center;
border:1pxsolid;
}
div{
text-align:center;
margin:50px;
}
</style>
</head>
<body>
<div>
<inputtype="text"id="id"placeholder="请输入编号">
<inputtype="text"id="name"placeholder="请输入姓名">
<inputtype="text"id="gender"placeholder="请输入性别">
<inputtype="button"value="添加"id="btn_add">
</div>
<table>
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><ahref="javascript:void(0);"onclick="delTr(this);">删除</a></td>
</tr>
</table>
<script>
/*
分析：
1.添加：
1.给添加按钮绑定单击事件
2.获取文本框的内容
3.创建td，设置td的文本为文本框的内容。
4.创建tr
5.将td添加到tr中
6.获取table，将tr添加到table中
2.删除：
1.确定点击的是哪一个超链接
<ahref="javascript:void(0);"onclick="delTr(this);">删除</a>
2.怎么删除？
removeChild():通过父节点删除子节点
*/
//1.获取按钮
/*document.getElementById("btn_add").onclick=function(){
//2.获取文本框的内容
varid=document.getElementById("id").value;
varname=document.getElementById("name").value;
vargender=document.getElementById("gender").value;
//3.创建td，赋值td的标签体
//id的td
vartd_id=document.createElement("td");
vartext_id=document.createTextNode(id);
td_id.appendChild(text_id);
//name的td
vartd_name=document.createElement("td");
vartext_name=document.createTextNode(name);
td_name.appendChild(text_name);
//gender的td
vartd_gender=document.createElement("td");
vartext_gender=document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
vartd_a=document.createElement("td");
varele_a=document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
vartext_a=document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
//4.创建tr
vartr=document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
vartable=document.getElementsByTagName("table")[0];
table.appendChild(tr);
}*/
//使用innerHTML添加
document.getElementById("btn_add").onclick=function(){
//2.获取文本框的内容
varid=document.getElementById("id").value;
varname=document.getElementById("name").value;
vargender=document.getElementById("gender").value;
//获取table
vartable=document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML+="<tr>\n"+
"<td>"+id+"</td>\n"+
"<td>"+name+"</td>\n"+
"<td>"+gender+"</td>\n"+
"<td><ahref=\"javascript:void(0);\"onclick=\"delTr(this);\">删除</a></td>\n"+
"</tr>";
}
//删除方法
functiondelTr(obj){
vartable=obj.parentNode.parentNode.parentNode;
vartr=obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
5.JavaScript表单全选案例
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>表格全选</title>
<style>
table{
border:1pxsolid;
width:500px;
margin-left:30%;
}
td,th{
text-align:center;
border:1pxsolid;
}
div{
margin-top:10px;
margin-left:30%;
}
.out{
background-color:white;
}
.over{
background-color:pink;
}
</style>
<script>
/*
分析：
1.全选：
*获取所有的checkbox
*遍历cb，设置每一个cb的状态为选中checked
*/
//1.在页面加载完后绑定事件
window.onload=function(){
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick=function(){
//全选
//1.获取所有的checkbox
varcbs=document.getElementsByName("cb");
//2.遍历
for(vari=0;i<cbs.length;i++){
//3.设置每一个cb的状态为选中checked
cbs[i].checked=true;
}
}
document.getElementById("unSelectAll").onclick=function(){
//全不选
//1.获取所有的checkbox
varcbs=document.getElementsByName("cb");
//2.遍历
for(vari=0;i<cbs.length;i++){
//3.设置每一个cb的状态为未选中checked
cbs[i].checked=false;
}
}
document.getElementById("selectRev").onclick=function(){
//反选
//1.获取所有的checkbox
varcbs=document.getElementsByName("cb");
//2.遍历
for(vari=0;i<cbs.length;i++){
//3.设置每一个cb的状态为相反
cbs[i].checked=!cbs[i].checked;
}
}
document.getElementById("firstCb").onclick=function(){
//第一个cb点击
//1.获取所有的checkbox
varcbs=document.getElementsByName("cb");
//获取第一个cb
//2.遍历
for(vari=0;i<cbs.length;i++){
//3.设置每一个cb的状态和第一个cb的状态一样
cbs[i].checked=this.checked;
}
}
//给所有tr绑定鼠标移到元素之上和移出元素事件
vartrs=document.getElementsByTagName("tr");
//2.遍历
for(vari=0;i<trs.length;i++){
//移到元素之上
trs[i].onmouseover=function(){
this.className="over";
}
//移出元素
trs[i].onmouseout=function(){
this.className="out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><inputtype="checkbox"name="cb"id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><inputtype="checkbox"name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><ahref="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><inputtype="checkbox"name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><ahref="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><inputtype="checkbox"name="cb"></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><ahref="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<inputtype="button"id="selectAll"value="全选">
<inputtype="button"id="unSelectAll"value="全不选">
<inputtype="button"id="selectRev"value="反选">
</div>
</body>
</html>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
html