本文深入解析JavaScript在实际应用中的多种场景，包括时间动态显示、图片的显示与隐藏、广告定时弹窗、轮播图实现、表格隔行变色、商品左右选择功能及省市二级联动等，每个案例都附带详细代码，帮助读者快速掌握JS编程技巧。
一： js：
ECMAScript： 语法语句
BOM：
DOM： 文档对象模型：
事件：
onclick： 鼠标点击事件：
ondblclick：鼠标双击事件：
onchange： 值改变事件：
onsubmit：必须要有返回值：
onfocus：获得焦点事件：
onblur： 失去焦点事件：
鼠标悬浮： onmouseover
鼠标移开： onmouseout：
onkeyup： 键盘弹起事件：
oninput：输入框值改变事件：
下面几个小例子：
动态显示时间：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<span id="span">
</span>
<input type="button" name="" id="" value="" onclick="getTimeFun();" />
<script type="text/javascript">
//获得当前的时间：
window.onload= function(){
window.setInterval("getTimeFun()",1000);
}
function getTimeFun(){
var date= new Date();
var strDate = date.toLocaleString();
// document.write(strDate);
var spanEle = document.getElementById("span");
spanEle.innerHTML= strDate;
}
</script>
<label id="ab"></label>
</body>
</html>
图片的隐藏和显示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="showFun" onclick="showFun()";/>
<input type="button" name="" id="" value="showFun" onclick="hiddenFun()";/>
<img id="img1" src="../img/10.jpg" style="display: none;" />
<script type="text/javascript">
var imgEle = document.getElementById("img1");
function showFun(){
imgEle.style.display = "block";
}
function hiddenFun(){
// var imgEle = document.getElementById("img1");
imgEle.style.display = "none";
}
</script>
</body>
</html>
广告的定时弹出和隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img id="img1" src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" style="display: none;" />
<script type="text/javascript">
var imgEle = document.getElementById("img1");
function showFun(){
imgEle.style.display = "block";
window.setTimeout("hiddenFun();",3000);
}
function hiddenFun(){
// var imgEle = document.getElementById("img1");
imgEle.style.display = "none";
}
window.onload= function (){
//定时器：
window.setTimeout("showFun()",4000);
}
</script>
</body>
</html>
轮播图:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" name="" id="" value="btn" onclick="changeImg();" />
<img id="img1" src="../img/1.jpg"/>
<script type="text/javascript">
window.onload= function(){
window.setInterval("changeImg()",3000);
}
var index= 0;
function changeImg(){
var imgEle = document.getElementById("img1");
var curIndex = index%3+1;
imgEle.src= "../img/"+curIndex+".jpg";
index++;
}
</script>
</body>
</html>
表格的隔行变色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" id="all" onclick="fun();"/>
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pro" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pro" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="pro"/>
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="pro" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="pro" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
<script>
window.onload= function(){
//获得表格：
var tableEle = document.getElementById("tab");
//获得所有的行：
// tableEle.getElementsByTagName("tr");//返回的是一个数组：
var rowsEle = tableEle.rows;
//循环遍历得到每一个行：
rowsEle[0].bgColor="pink";
for(var i=1; i<rowsEle.length;i++){
var rowEle = rowsEle[i];
if(i%2==0){
rowEle.bgColor= "yellow";
}else{
rowEle.bgColor= "lime";
}
}
}
/*
* 联动选择：
*/
function fun(){
//alert("xx");
var checkAllEle = document.getElementById("all");
if(checkAllEle.checked){//说明被选中
//获得所有的：
var checkedBoxesEle= document.getElementsByName("pro");
//循环遍历得到每一个：
for(var i=0; i<checkedBoxesEle.length;i++){
var checkEle = checkedBoxesEle[i];
checkEle.checked=true;
}
}else{
var checkedBoxesEle= document.getElementsByName("pro");
//循环遍历得到每一个：
for(var i=0; i<checkedBoxesEle.length;i++){
var checkEle = checkedBoxesEle[i];
checkEle.checked=false;
}
}
}
</script>
</body>
</html>
商品的左右选：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1px" width="480px">
<tr>
<td>分类名称</td>
<td><input type="text" value="手机数码"/></td>
</tr>
<tr>
<td>分类描述</td>
<td><input type="text" value="这里面都是手机数码"/></td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!--左边-->
<div style="float: left;">
已有商品<br />
<select style="width:80px" multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>小米</option>
<option>锤子</option>
<option>oppo</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >> </a> <br />
<a href="#" onclick="selectAll()"> >>> </a>
</div>
<!--右边-->
<div style="float: right;">
未有商品<br />
<select style="width:80px" multiple="multiple" id="rightSelect">
<option>苹果6</option>
<option>肾7</option>
<option>诺基亚</option>
<option>波导</option>
</select>
<br />
<a href="#"> << </a> <br />
<a href="#"> <<< </a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
<script type="text/javascript">
function selectOne(){
//alert("xxx");
var s1Ele = document.getElementById("leftSelect");
var s2Ele = document.getElementById("rightSelect");
//获得左边的所有的options：
// s1Ele.getElementsByTagName("option");
var optionsEle = s1Ele.options;
//遍历得到每一个：
for(var i=0; i<optionsEle.length;i++){
/*
* 0 4
* 1 3
* 2 2
*/
var optionEle = optionsEle[i];
//判断是否被选中：
if(optionEle.selected){//说明被选中：
s2Ele.appendChild(optionEle);
i--; //保证了变量的唯一
}
}
}
function selectAll(){
//alert("xxx");
var s1Ele = document.getElementById("leftSelect");
var s2Ele = document.getElementById("rightSelect");
//获得左边的所有的options：
// s1Ele.getElementsByTagName("option");
var optionsEle = s1Ele.options;
//遍历得到每一个：
for(var i=0; i<optionsEle.length;i++){
var optionEle = optionsEle[i];
//判断是否被选中：
s2Ele.appendChild(optionEle);
i--; //保证了变量的唯一
}
}
</script>
</body>
</html>
二级联动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="province" name="province" style="width:80px;" onchange="selectProvince(this);">
<option value="-1">请选择</option>
<option value="0">山东</option>
<option value="1">北京</option>
<option value="2">河北</option>
</select>
<select id="city" name="city" style="width:80px;">
</select>
<script type="text/javascript">
var arr = [
["济南市", "青岛市","潍坊市","烟台市","威海市","淄博","东营","日照","聊城","德州","菏泽" ],
["东城区", "西城区","海淀区","朝阳区","丰台区","实景山","通州区","昌平区","大兴区","密云" ],
["石家庄", "邯郸市","承德市","廊坊市","沧州市","秦皇岛","唐山","保定","张家口" ]
];
var s2Ele= document.getElementById("city");
function selectProvince(obj){
//alert(obj.value);
var cities = arr[obj.value];
//alert(cities);
//遍历一维数组，获得其中的每一个值：
/*
* 清空s2
*
*/
var optionsEle = s2Ele.options;
/* for(var i=0; i<optionsEle.length; i++){
s2Ele.removeChild(optionsEle[i]);
i--;
}*/
optionsEle.length=0;
for(var i=0; i<cities.length;i++){
var city= cities[i];
//封装到option， 追加在s2当中：
var optionEle = document.createElement("option");
//文本节点：
var textNode = document.createTextNode(city);
//建立关系：
optionEle.appendChild(textNode);
//放在s2下：
s2Ele.appendChild(optionEle);
//s2Ele.innerHTML= "<option>"+city+"</option>"
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
