javaScript 案例
2021/7/19 11:06:00
本文主要是介绍javaScript 案例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
一：全选、全不选
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table id="myTable" border="2px" cellpadding="0" cellspacing="0">
<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>小熊饼干</td>
<td>125</td>
<td>1</td>
<td>125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>2</td>
<td>小熊饼干</td>
<td>125</td>
<td>1</td>
<td>125</td>
</tr>
<tr>
<td><input name="one" type="checkbox" onclick="myOne()"/></td>
<td>3</td>
<td>小熊饼干</td>
<td>125</td>
<td>1</td>
<td>125</td>
</tr>
</table>
</body>
</html>
<script>
function myAll(){
var all = document.getElementById("all");
var one = document.getElementsByName("one");
for(var i = 0;i<one.length;i++){
one[i].checked=all.checked;
}
}
function myOne(){
var all = document.getElementById("all");
var one = document.getElementsByName("one");
for(var i = 0;i<one.length;i++){
if(one[i].checked==false){
all.checked=false;
return false;
}
}
all.checked=true;
}
</script>
二：动态时间
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="today01">
div----显示时间1
</div>
<br />
<a href="javascript:window.clearInterval(flag01)">停止定时器clearInterval</a>
<div id="today02">
div----显示时间2
</div>
<a href="javascript:window.clearTimeout(flag02)">停止定时器clearTimeout</a>
</body>
</html>
<script>
function showTime01(){
var time = new Date();
var year = time.getFullYear();
var month = time .getMonth();
var day = time.getDate();
var hour = time.getHours();
var minte = time.getMinutes()
var minlls = time.getSeconds();
document.getElementById("today01").innerHTML=year+"年"+month+"月"+day+"日"+hour+"时"+minte+"分"+minlls+"秒";
}
//调用定时器
var flag01 = window.setInterval("showTime01()",1000);
</script>
<script>
function showTime02(){
var time = new Date();
var Y = time.getFullYear();
var M = time.getMonth();
var D = time.getDate();
var H = time.getHours();
var M = time.getMinutes();
var S = time.getSeconds();
document.getElementById("today02").innerHTML=Y+"年"+M+"月"+D+"日"+H+"时"+M+"分"+S+"秒";
}
var flag02 = window.setInterval("showTime02()",2000);
</script>
三：动态表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button type="button" onclick="bianli()">遍历表格</button>
<button type="button" onclick="addRow()">添加</button>
<table id="myTable" border="2px" 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>小熊饼干</td>
<td>125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button></td>
</tr>
<tr>
<td>2</td>
<td>小熊饼干</td>
<td>125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button></td>
</tr>
<tr>
<td>3</td>
<td>小熊饼干</td>
<td>125</td>
<td>1</td>
<td><button type="button" onclick="delRow(this)">删除</button></td>
</tr>
</table>
</body>
</html>
<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>
四：省市级联特效
<!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>
这篇关于javaScript 案例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-26大厂数据结构与算法教程：入门级详解
- 2024-12-26大厂算法与数据结构教程：新手入门指南
- 2024-12-26Python编程入门指南
- 2024-12-26数据结构高级教程：新手入门及初级提升指南
- 2024-12-26并查集入门教程：从零开始学会并查集
- 2024-12-26大厂数据结构与算法入门指南
- 2024-12-26大厂算法与数据结构入门教程
- 2024-12-26二叉树入门教程：轻松掌握基础概念与操作
- 2024-12-26初学者指南：轻松掌握链表
- 2024-12-26平衡树入门教程：轻松理解与应用
