JS基础小案例
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; iif (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>11td>
<td>12td>
<td>13td>
<td>14td>
tr>
<tr>
<td>21td>
<td>22td>
<td>23td>
<td>24td>
tr>
<tr>
<td>31td>
<td>32td>
<td>33td>
<td>34td>
tr>
<tr>
<td>41td>
<td>42td>
<td>43td>
<td>44td>
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>11th>
<th>12th>
<th>13th>
<th>14th>
tr>
thead>
<tbody>
<tr>
<td>21td>
<td>22td>
<td>23td>
<td>24td>
tr>
<tr>
<td>31td>
<td>32td>
<td>33td>
<td>34td>
tr>
<tr>
<td>41td>
<td>42td>
<td>43td>
<td>44td>
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>12th>
<th>13th>
<th>14th>
tr>
thead>
<tbody>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选td>
<td>22td>
<td>23td>
<td>24td>
tr>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选td>
<td>32td>
<td>33td>
<td>34td>
tr>
<tr>
<td><input name="checkboxIDD" type="checkbox" onclick="onclickFlag()"/>单选td>
<td>42td>
<td>43td>
<td>44td>
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//创建节点
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>