JavaScripty案例_开课吧 javascript 课件-优快云博客

本文链接：https://blog.youkuaiyun.com/githubbbb/article/details/118661469

JavaScript案例

记录下开课吧课程的小案例
转自开课吧课件有兴趣的可以联系我

1、全选/全不选

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选</title>
<script>
function myAll(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
oneList[i].checked=all.checked;
}
}
function myOne(){
var all=document.getElementById("all");
var oneList=document.getElementsByName("one");
for(var i=0;i<oneList.length;i++){
if(oneList[i].checked==false){
all.checked=false;
return;
}
}
all.checked=true;
}
</script>
</head>
<body>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%" height="180px">
<tr>
<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox"/></td>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
<tr>
<td><input name="one" type="checkbox"/></td>
<td>3</td>
<td>小熊饼干3</td>
<td>￥125</td>
<td>1</td>
<td>￥125</td>
</tr>
</table>
</body>
</html>

2 、动态时间

<div id="today1">
div--显示时间1
</div>
<a href="javascript:window.clearInterval(flag1)">停止定时器clearInterval</a>
<div id="today2">
div--显示时间2
</div>
<a href="javascript:window.clearTimeout(flag2)">停止定时器clearTimeout</a>
<script>
function showTime1(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日 
"+h+":"+m+":"+s;
}
//定时器setInterval(定时调用的函数,时间间隔毫秒)
var flag1=window.setInterval("showTime1()",1000);
</script>
<script>
function showTime2(){
var time=new Date();
var y=time.getFullYear();
var mon=time.getMonth();
var d=time.getDate();
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日 
"+h+":"+m+":"+s;
flag2=window.setTimeout("showTime2()",1000);
}
//在指定的毫秒数后调用函数或计算表达式。
var flag2=window.setTimeout("showTime2()",1000);
</script>

3 、动态表格

在这里插入图片描述
遍历表格中的内容，动态添加行、删除行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
td,th{
padding: 10px;
}
</style>
<script>
function bianli(){
var tab=document.getElementById("myTable");//获取到了表格的js对象
//获取表格的所有行
var trArr=tab.rows;
//遍历行
for(var i=0;i<trArr.length;i++){
var trObj=trArr[i];
//alert("行的下标索引："+trObj.rowIndex);
//获取每行的单元格的集合
var tdArr=trObj.cells;
//遍历每个单元格
var str="";
for(var j=0;j<tdArr.length;j++){
var tdObj=tdArr[j];
var html=tdObj.innerHTML;//获取每个单元格中的内容
var index=tdObj.cellIndex;//获取每个单元格的下标索引
str+=index+"-"+html+"=====";
}
console.log("行的下标索引："+trObj.rowIndex+":"+str);
}
}
function addRow(){
//获取到表格的对象
var tab=document.getElementById("myTable");
//给表格添加一行
var newTr=tab.insertRow();//创建了一个空行，在页面上看不出来
//给新创建的行添加列
var newTd1=newTr.insertCell();//给新的行创建了一个新的单元格
var newTd2=newTr.insertCell();
var newTd3=newTr.insertCell();
var newTd4=newTr.insertCell();
var newTd5=newTr.insertCell();
//给每一个单元格中添加内容
var num=parseInt(Math.random()*10)+1;
newTd1.innerHTML=num;
newTd2.innerHTML="小熊饼干"+num;
newTd3.innerHTML="$125";
newTd4.innerHTML="1";
newTd5.innerHTML='<button type="button" onclick="delRow(this)">
删除</button>';
}
function delRow(btn){
var tab=document.getElementById("myTable");
//btn:表示点击的当前的删除按钮，
//btn.parentNode获取的按钮的父元素td,btn.parentNode.parentNode获取的
按钮的父元素td的父元素tr
var trIndex=btn.parentNode.parentNode.rowIndex;
//根据行的下标索引删除行
tab.deleteRow(trIndex);
}
</script>
</head>
<body>
<button type="button" onclick="bianli()">遍历表格</button>
<button type="button" onclick="addRow()">添加</button>
<table id="myTable" border="1" cellpadding="0" cellspacing="0"
width="90%"  style="text-align: center;">
<tr>
<th>序号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总计</th>
</tr>
<tr>
<td>1</td>
<td>小熊饼干1</td>
<td>￥125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干2</td>
<td>￥125</td>
<td>1</td>
<td><button  type="button" onclick="delRow(this)">删除</button>
</td>
</tr>
</table>
</body>
</html>

4、省市级联特效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级联</title>
</head>
<body>
<select onchange="changeCity(this.value)">
<option>--请选择省份--</option>
<option value="0">北京</option>
<option value="1">浙江省</option>
<option value="2">河北省</option>
<option value="3">广东省</option>
</select>
<select id="city">
</select>
</body>
</html>
<script>
//创建二维数组存储省份和对应的城市
var cityList=new Array();
cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区");
cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市");
cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
function changeCity(val){
//获取到城市的下拉列表框
var city=document.getElementById("city");
//先去清空原有的城市下拉列表内容
city.options.length=0;
var arr=cityList[val];
for(var i=0;i<arr.length;i++){
//创建option元素节点
var option=document.createElement("option");
//设置option元素节点的内容和value
option.innerHTML=arr[i];
option.value=arr[i];
//将新创建的option节点添加到城市下拉框中
city.appendChild(option);
}
}
</script>