1.JavaScript light switch case
var In Flag = to false ; // representatives of the lamp is off. off picture // 2. Binding click event light.onclick = function () { IF (In Flag) { // determines if the lamp is ON, the exterminate light.src = "IMG / off.gif" ; In Flag = to false ; } the else { // If the lamp is off, then open light.src = "IMG / on.gif" ; in Flag = to true ; } } </ Script> </ body> </ HTML>
2.JavaScript Carousel Figure Case
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> carousel FIG. </ Title>
</ head>
<body>
<IMG ID = "IMG" = src "img / banner_1.jpg" width = "100%">
<Script> / *
analysis:
1. on page show image img tag
2. define a method for modifying object image src attribute
3. define timing , a method invoked once every 3 seconds. * / // Modify image src attribute var Number =. 1 ;
function Fun () {
Number ++ ;
= 1 ;
}
// Get the object img
var img = document.getElementById ( "img" );
img.src = "img / Banner _" + + Number "JPG." ;
}
// 2. timer defined
setInterval (fun, 3000 );
</ Script>
</ body>
</ HTML>
3.JavaScript automatically jump to Home Case
<! DOCTYPE HTML>
<HTML lang = "EN">
<head>
<Meta charset = "UTF-. 8">
<title> automatically jump </ title>
<style>
P {
text - align = left: Center;
}
span {
Color: Red;
}
</ style>
</ head>
<body>
<P>
<span ID = "Time">. 5 </ span> second after automatically goto ...
</ P>
<Script> / *
analysis:
1. display the results page <P>
2. countdown countdown effect achieved
2.1 defines a method for obtaining a span is modified span tag body content, time -
2.2 defines a timer, the method is performed once one second
3. If the process determines the time <= 0 then goto
* /
//2. countdown countdown effect achieved
var SECOND =. 5 ;
var Time = document.getElementById ( "Time" );
// define a method of obtaining a span is modified span tag body content, time -
function the showTime () {
SECOND - ;
// determination time if <= 0 then goto
IF (SECOND <= 0 ) {
// goto
the location.href = "https://www.baidu.com" ;
}
time.innerHTML = + SECOND "" ;
}
// set the timer, one second which is performed once
the setInterval (the showTime, 1000 );
</ Script>
</body>
</html>
4.JavaScript dynamic table Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text"id = "id" placeholder = "Please enter the number">
<input type="text"id = "name" placeholder = "Please enter the name">
<the INPUT of the type = "text" the above mentioned id = "Gender" placeholder = "Please enter the sex">
<the INPUT of the type = "the Button" value = " Add "the above mentioned id =" btn_add ">
</ div>
<the table>
<Caption> student information table </ Caption>
<TR>
<TH> ID </ TH>
<TH> name </ TH>
<TH> gender </ TH>
<TH> operation </ TH>
</ TR>
<TR>
<TD>. 1 </ TD>
<TD> Linghu </ TD>
<TD> M </ TD>
<TD> <A the href = "JavaScript : void (0); "onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
</tr>
<tr>
<TD>. 3 </ TD>
<TD> Yue Buqun </ TD>
<TD> </ TD>?
<TD> <A the href = "JavaScript: void (0);" the onclick = "delTr (the this); "> delete </a> </ td>
</ TR>
</ the Table>
<Script> / *
analysis:
1. Add:
1. Add the button binding to the click event
2. obtain the contents of the text box
3. create td, td set the text contents of the text box.
4. Create tr
5. The td be added to the tr
6. Get table, tr added to the table
2. Delete:
<a href="javascript:void(0);" onclick="delTr(this);"> delete </a>
2. How to delete?
removeChild (): Removes the child node via the parent node * / //
1. acquisition button
/ * document.getElementById ( "btn_add") the onclick = function () {.
// 2 acquires the contents of the text box.
Var ID = document.getElementById ( "ID") value;.
Var name = document.getElementById ( "name") value;.
var Gender = document.getElementById ( "Gender") value;.
.. 3 // Create td, td assignment of tag body
// id of td
var td_id = document.createElement ( "td") ;
var = text_id document.createTextNode (ID);
td_id.appendChild (text_id);
td_name.appendChild (TEXT_NAME);
// Gender the td
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
var td_gender = document.createElement("td");
var text_gender = document.createTextNode(gender);
td_gender.appendChild(text_gender);
//a标签的td
var td_a = document.createElement("td");
var ele_a = document.createElement("a");
ele_a.setAttribute("href","javascript:void(0);");
ele_a.setAttribute("onclick","delTr(this);");
var text_a = document.createTextNode("删除");
ele_a.appendChild(text_a);
td_a.appendChild(ele_a);
// 4. Create tr
var tr = document.createElement("tr");
//5.添加td到tr中
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_a);
//6.获取table
var table = document.getElementsByTagName("table")[0];
table.appendChild(tr);
}*/
//使用innerHTML添加
document.getElementById("btn_add").onclick = function() {
//2.获取文本框的内容
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var gender = document.getElementById("gender").value;
//获取table
var table = document.getElementsByTagName("table")[0];
//追加一行
table.innerHTML += "<tr>\n" +
" <td>"+id+"</td>\n" +
" <td>"+name+"</td>\n" +
" <td>"+gender+"</td>\n" +
" <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
" </tr>";
}
//删除方法
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
5.JavaScript form Select Case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border: 1px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.Over {
background - Color: Pink;
}
</ style>
<Script> / *
Analysis:
1. Select:
* Get all CheckBox
* traversal cb, cb is provided for each state to select the checked * / // . 1 in the page load event after binding
the window.onload = function () {
// 2. Select All button to bind the click event
document.getElementById ( "selectAll"). onclick = function () {
// Select / / 1. obtain all CheckBox var CBS = document.getElementsByName ( "CB" );
// 2. traversal
for ( var I = 0; I <cbs.length; I ++ ) {
// 3. cb a setting state is selected by each of the checked
CBS [I] = .checked to true ;
}
}
document.getElementById ( " unSelectAll. ") the onclick = function () {
// Select None
@ 1. obtain all CheckBox
var CBS = document.getElementsByName (" CB " );
// 2. traversal
for ( var I = 0; I <CBS .length; I ++ ) {
// 3. set each unselected state cb checked
CBS [I] = .checked to false ;
}
}
document.getElementById ( "selectRev") the onclick =. function () {
// unselected
// 1. Obtain all CheckBox
var CBS = document.getElementsByName ( "CB" );
/ / 2. traversal
for ( var I = 0; I <cbs.length; I ++ ) {
// 3. each disposed opposite a state cb
CBS [I] = .checked! CBS [I] .checked;
}
}
Document .getElementById ( "firstCb"). onclick = function () {
// first click cb
@ 1. Obtain all CheckBox
var CBS = document.getElementsByName ( "cb" );
// get the first cb
// 2. traversal
for ( var I = 0; I <cbs.length; I ++ ) {
// 3. a setting state of each state and cb cb like a
CBS [I] = .checked the this .checked;
}
}
// Tell All tr binding on mouse over and out of the elements element event
var trs = document.getElementsByTagName ( "tr" );
// 2. traversal
for ( var i = 0; i < trs.length; i++) {
//移到元素之上
trs[i].onmouseover = function(){
this.className = "over";
}
//移出元素
trs[i].onmouseout = function(){
this.className = "out";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id="firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb" ></td>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id="selectAll" value="全选">
<input type="button" id="unSelectAll" value="全不选">
<input type="button" id="selectRev" value="反选">
</div>
</body>
</html>