title: JS基础小案例
date: 2015-12-19 10:28:40
categories: 前端基础总结
tags: 前端
xl_echo编辑整理，欢迎转载，转载请声明文章来源。更多案例、资料请联系QQ：1280023003
图片轮播小案例：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function rollback(){
setInterval("rollImg()",2000);
}
var i = 1;
function rollImg(){
i++;
if(i == 10){
i = 1;
}
var img_id = document.getElementById("img_id");
img_id.src = "img/img/鉴赏"+i+".jpg"
}
</script>
</head>
<body onload="rollback()">
<center>
<div style="width: 1200px; height: 800px; border: 5px solid purple; overflow: hidden;">
<img src="img/img/鉴赏3.jpg" id="img_id"/>
</div>
</center>
</body>
</html>
JS实现定时弹出、隐藏广告
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var time;
window.onload = function(){
var time = window.setInterval("imgblock()",2000);
}
function imgblock(){
var img_idDIV = document.getElementById("img_idDIV");
img_idDIV.style.display = "block";
window.clearInterval(time);
window.setInterval("imgNone()",2000);
}
function imgNone(){
var img_idDIV = document.getElementById("img_idDIV");
img_idDIV.style.display = "none";
}
</script>
</head>
<body>
<center>
<div id="img_idDIV" style="width: 1200px; height: 800px; border: 5px solid purple; overflow: hidden; display: none;">
<img src="img/img/鉴赏3.jpg" id="img_id"/>
</div>
</center>
</body>
</html>表格隔行换色
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function ColorTab(){
var tab = document.getElementById("tab");
var len = tab.rows.length;
for(var i=0; i<len; i++){
if(i%2 == 0){
tab.rows[i].style.backgroundColor = "purple";
}else{
tab.rows[i].style.backgroundColor = "green";
}
}
}
</script>
</head>
<body onload="ColorTab()">
<center>
<table id="tab" border="1px" width="500px" height="200px">
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</table>
</center>
</body>
</html>
表格隔行换色-实现方式二
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function ColorTab(){
var tab = document.getElementById("tab");
var len = tab.tBodies[0].rows.length;
for(var i = 0; i < len; i++){
if(i%2 == 0){
tab.tBodies[0].rows[i].style.backgroundColor = "purple";
}else{
tab.tBodies[0].rows[i].style.backgroundColor = "green";
}
}
}
</script>
</head>
<body onload="ColorTab()">
<center>
<table id="tab" border="1px" width="500px" height="200px">
<thead>
<tr>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
</tr>
</thead>
<tbody>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
实现单选，全选
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//全选按钮选中，单选按钮全部选中，反之
function TabOlick(){
var flag = document.getElementById("checkboxID").checked;
if(flag == true){
var tds = document.getElementsByName("checkboxIDD");
for(var i = 0; i < tds.length; i++){
tds[i].checked = true;
}
}else{
var tds = document.getElementsByName("checkboxIDD");
for(var i = 0; i < tds.length; i++){
tds[i].checked = false;
}
}
}
//如果单选按钮全部选中，则全选按钮选中，如果有一个没有选中，则全选按钮不选中
function onclickFlag(){
var tds = document.getElementsByName("checkboxIDD");
for(var i = 0; i < tds.length; i++){
if(tds[i].checked == false){
document.getElementById("checkboxID").checked = false;
break;
}else{
document.getElementById("checkboxID").checked = true;
}
}
}
</script>
</head>
<body>
<center>
<table id="tab" border="1px" width="500px" height="200px">
<thead>
<tr>
<th><input id="checkboxID" type="checkbox" onclick="TabOlick()"/>全选</th>
<th>12</th>
<th>13</th>
<th>14</th>
</tr>
</thead>
<tbody>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选</td>
<td>32</td>
<td>33</td>
<td>34</td>
</tr>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选</td>
<td>42</td>
<td>43</td>
<td>44</td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
省市联动
<html>
<head>
<meta charset="utf-8">
<title>省市联动</title>
<script>
var arr = [['长沙','株洲','湘潭'],['广州','深圳','东莞']];
function clickOption(){
var SelectSF = document.getElementById("SF");
var val = SelectSF.value;
val = val - 1;
//清空城市，便于第二次点击，不然会一直添加
var SelectCS = document.getElementById("CS");
SelectCS.options.length = 1;
//遍历数组，将数组中的元素添加到城市节点
for(var i = 0; i<arr[val].length; i++){
//创建节点
var opt = document.createElement("option");
//创建文本内容
var Text = document.createTextNode(arr[val][i]);
opt.appendChild(Text);
SelectCS.appendChild(opt);
}
}
</script>
</head>
<body>
<center>
<div style="width: 800px; height: 200px; border: 5px solid purple;">
<select id="SF" onchange="clickOption()">
<option value="0">
--请选择--
</option>
<option value="1">
湖南
</option>
<option value="2">
广东
</option>
</select>
<select id="CS">
<option>
--请选择--
</option>
</select>
</div>
</center>
</body>
</html>
