<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onload=function(){
dispTime=document.getElementById("dispTime")
dispTime.value="hello";
interval=1000; //设定时间1秒
function change() {
var today = new Date(); //获取当前时间
dispTime.innerHTML = two(today.getHours()) + ":"
dispTime.innerHTML+= two(today.getMinutes()) + ":"
dispTime.innerHTML+= two(today.getSeconds());
timerID=window.setTimeout(change,interval);
}
function two(x){
return(x>=10?x:"0"+x);
}
change()
}
</script>
</head>
<body>
<label id="dispTime"></label>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval方法</title>
<script>
window.onload=function(){
imgCount=0; //当前图片计数器
myImg=document.getElementById("myImg");
myBox=document.getElementById("box");
myNumberBox=document.getElementById("number");
myNumberLi=myNumberBox.getElementsByTagName("li");
for(i=0;i<myNumberLi.length;i++){
myNumberLi[i].index=i;
myNumberLi[i].onclick=function(){
for(i=0;i<myNumberLi.length;i++){
myNumberLi[i].classList.remove("active");
}
this.classList.add("active");
imgCount=this.innerHTML-1;
myImg.src="images/"+imgCount+".jpg";
}
}
myBox.onmouseover=function(){
clearInterval(timeOUT);
}
myBox.onmouseout=function(){
timeOUT=setInterval(changeImg,1000);
}
function changeImg(){
imgCount++;
imgCount=imgCount%5;
myImg.src="images/"+imgCount+".jpg";
for(i=0;i<myNumberLi.length;i++){
myNumberLi[i].classList.remove("active");
}
myNumberLi[imgCount].classList.add("active");
}
timeOUT=setInterval(changeImg,1000);
}
</script>
<style>
*{ margin:0px; padding:0px;}
#box{ width:520px; height:280px; border:1px solid red; margin:100px auto;
position:relative;}
#box ul{ list-style:none; }
#number{ position:absolute; right:10px; bottom:10px; }
#number li{ width:20px; height:20px; border-radius:50%; text-align:center; line-height:20px; float:left; margin:5px; background:white}
#number li:hover{ color:white; background:red;}
#box ul li.active{ background:#F30; }
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/0.jpg" id="myImg"></li>
</ul>
<ul id="number">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onload=function(){
window.open("http://www.whpu.edu.cn", "", " toolbar=no,menubao=no")
}
</script>
</head>
<body>
Hello World!
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SetTimeout方法</title>
<script>
window.onunload=function(){
alert("欢迎下次光临，再见！");
}
</script>
</head>
<body>
Hello World!
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document对象属性</title>
<style>
body{ background-color:#CF9;}
</style>
<script>
window.onload=function(){
myDisp=document.getElementById("disp");
myDisp.innerHTML="当前文档的标题："+document.title+"<br>";
myDisp.innerHTML+="当前文档的最后修改日期："+document.lastModified+"<br>";
myDisp.innerHTML+="当前文档中包含"+document.links.length+"个超级链接"+"<br>"; //输出超级链接的个数
myDisp.innerHTML+="当前文档中包含"+document.images.length+"个图像"+"<br>";
//输出图像的个数
myDisp.innerHTML+="当前文档中包含"+document.forms.length+"个表单"+"<br>";
//输出表单的个数
}
</script>
</head>
<body>
<a href="http://www.whpu.edu.cn">超级链接1</A> <!--形成超级链接-->
<a href="http://www.baidu.com">超级链接2</A>
<img src="images/0.jpg" height="100" width="120" /> <!--链接图像-->
<img src="images/1.jpg" height="100" width="120" /> <!--链接图像-->
<img src="images/2.jpg" height="100" width="120" /> <!--链接图像-->
<form action ="login.php">
<input type="text" id="username" />
</form>
<div id="disp"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementById方法</title>
<script>
window.onload=function(){
var myId=document.getElementById("myId");
alert("获得的元素标记是"+myId.nodeName);
}
</script>
</head>
<body>
<input id="myId" name='myId' type="text"/>
<div id='myId'>
getElementById方法测试
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByName方法</title>
<script>
window.onload=function(){
var myName=document.getElementsByName("abc");
var myDisp=document.getElementById("disp");
myDisp.innerHTML="选中的复选个数是："+myName.length+"<br>";
myDisp.innerHTML+="第2个复选框的提交的值是:"+myName[1].value+"<br>";
myDisp.innerHTML+="第3个复选框的选中状态是:"+myName[2].checked+"<br>";
}
</script>
</head>
<body>
<form action="reg.php" method="post">
用户名：<input type="text" name="username"><br>
爱好：
<input type="checkbox" name="abc" value="music">音乐
<input type="checkbox" name="abc" value="football">足球
<input type="checkbox" name="abc" value="badminton" checked>羽毛球
<input type="checkbox" name="abc" value="basketball">篮球
</form>
<div id="disp"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>getElementsByTagName方法</title>
<script>
window.onload=function(){
// 获得所有tagName是body的元素（当然每个页面只有一个）
var myDocumentElements=document.getElementsByTagName("body");
var myBody=myDocumentElements.item(0);
// 获得body子元素种的所有P元素
var myBodyElements=myBody.getElementsByTagName("p");
// 获得第二个P元素
var myP=myBodyElements.item(1);
var myDisp=document.getElementById("disp");
//显示这个元素的文本
myDisp.innerHTML="显示第二个P元素的内容是："+myP.firstChild.nodeValue;
}
</script>
</head>
<body>
<p>hello</p>
<p>world</p>
<div id="disp"></div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>appendChild方法</title>
<script>
window.onload=function(){
var newNode=document.createElement("li")
var newText=document.createTextNode("羽毛球")
newNode.appendChild(newText)
document.getElementById("myNode").appendChild(newNode)
}
</script>
</head>
<body>
<ul id="myNode">
<li>音乐</li>
<li>足球</li>
<li>篮球</li>
</ul>
</body>
</html>
document.write("Javascript寮曠敤鏂瑰紡锛�");
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>removeChild方法</title>
<script>
window.onload=function(){
var myUlNode=document.getElementById("myNode"); //获取<ul>对象
var myLiNode=myUlNode.getElementsByTagName("li"); //获取<ul>对象下的所有<li>对象
var childNode=myLiNode[1]; //定义文字"足球"的<li>对象
var removedNode=myUlNode.removeChild(childNode) //删除<ul>下指定的<li>对象
}
</script>
</head>
<body>
<ul id="myNode">
<li>音乐</li>
<li>足球</li>
<li>篮球</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>cloneNode方法</title>
<script>
window.onload=function(){
var youUlNode=document.getElementById("youNode"); //获取<ul>对象
var myUlNode=document.getElementById("myNode"); //获取<ul>对象
var youLiNode=youUlNode.getElementsByTagName("li");//获取<ul>对象下的所有<li>对象
var lastNodeNumber=youLiNode.length-1;
var newNode=youLiNode[lastNodeNumber].cloneNode(true); //复制某一个<li>对象
myUlNode.appendChild(newNode); //添加<li>对象到指定<ul>对象中
}
</script>
</head>
<body>
<ul id="youNode">你的爱好：
<li>音乐</li>
<li>足球</li>
<li>羽毛球</li>
</ul>
<ul id="myNode">我的爱好：
<li>篮球</li>
<li>游泳</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>replaceChild方法</title>
<script>
window.onload=function(){
var myUlNode=document.getElementById("myNode"); //获取<ul>对象
var myLiNode=myUlNode.getElementsByTagName("li"); //获取<ul>对象下的所有<li>对象
var lastNodeNumber=myLiNode.length-1; //设定指向最后一个<li>元素下标值
var oldNode=myLiNode[lastNodeNumber]; //获取最后一个<li>元素
var newNode=document.createElement("li"); //创建一个新<li>元素
var text=document.createTextNode("羽毛球"); //创建元素文本
newNode.appendChild(text); //添加元素文本到新的<li>元素
myUlNode.replaceChild(newNode,oldNode); //用新<li>元素替换<ul>中指定的元素
}
</script>
</head>
<body>
<ul id="myNode">我的爱好：
<li>音乐</li>
<li>足球</li>
<li>游泳</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insertBefore方法</title>
<script>
window.onload=function(){
var myUlNode=document.getElementById("myNode"); //获取<ul>对象
var myLiNode=myUlNode.getElementsByTagName("li"); //获取<ul>对象下的所有<li>对象
var lastNodeNumber=myLiNode.length-1; //设定指向最后一个<li>元素下标值
var oldNode=myLiNode[lastNodeNumber]; //获取最后一个<li>元素
var newNode=document.createElement("li"); //创建一个新<li>元素
var text=document.createTextNode("羽毛球"); //创建元素文本
newNode.appendChild(text); //添加元素文本到新的<li>元素
myUlNode.insertBefore(newNode,oldNode); //用新<li>元素替换<ul>中指定的元素
}
</script>
</head>
<body>
<ul id="myNode">我的爱好：
<li>音乐</li>
<li>足球</li>
<li>游泳</li>
</ul>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>childNodes属性</title>
<script type="text/javascript">
window.onload=function(){
elementSum=0; //元素结点计数器
textSum=0; //文本结点计数器
var oUl=document.getElementById("ul");
var span1=document.getElementById("span1");
var span2=document.getElementById("span2");
var span3=document.getElementById("span3");
for(var i=0;i<oUl.childNodes.length;i++){
span2.innerHTML+=oUl.childNodes[i].nodeType+" - ";
switch(oUl.childNodes[i].nodeType){
case 1:elementSum++;
break;
case 3: textSum++
}
}
span1.innerHTML=oUl.childNodes.length;
span2.innerHTML=elementSum;
span3.innerHTML=textSum;
}
</script>
</head>
<body>
<ul id="ul">
<li>音乐</li>
<li>足球</li>
羽毛球
</ul>
chileNodes显示的节点数：<span id="span1"></span><br>
其中：<br>
元素类型的节点数是： <span id="span2"></span><br>
文本类型的节点数是： <span id="span3"></span>
<br/>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>结点访问属性</title>
<script type="text/javascript">
window.onload=function(){
var oUl=document.getElementById("action");
var display=document.getElementById("display");
display.innerHTML="UL的第一个子元素结点内容: "+oUl.firstChild.innerHTML;
display.innerHTML+="<br>UL的最后一个子元素结点内容: "+oUl.lastChild.innerHTML;
//display.innerHTML+="<br>父元素结点内容: "+oUl.parentChild.nodeName;
display.innerHTML+="<br>UL的第一个子元素的兄弟元素结点内容： "
+oUl.firstChild.nextSibling.innerHTML;
display.innerHTML+="<br>UL的最后一个子元素的前一个兄弟元素结点内容： "+oUl.lastChild.previousSibling.innerHTML;
display.innerHTML+="<br>UL的父元素标记是："+oUl.parentNode.nodeName;
}
</script>
</head>
<body>
<div id="main">
<ul id="action"><li>音乐</li><li>足球</li><li>羽毛球</li><li>游泳</li></ul>
<div id="display"></div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>nodeName属性</title>
<script type="text/javascript">
window.onload=function(){
var myDiv=document.getElementById("main");
var display=document.getElementById("display");
display.innerHTML="ID属性值是Box的标记名为："+myDiv.nodeName;
}
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素创建</title>
<script type="text/javascript">
window.onload=function(){
//获得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//创建一个<table></table>元素
mytable = document.createElement("TABLE");
//创建一个<TBODY></TBODY>元素
mytablebody = document.createElement("TBODY");
// 创建行列
for(j=0;j<3;j++) {
//创建一个<TR></TR>元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//创建一个<TD></TD>元素
mycurrent_cell=document.createElement("TD");
//创建一个文本元素
currenttext=document.createTextNode("本单元格行是： "+j+", 列是 "+i);
//把新的文本元素添加到单元TD上
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
mytable.setAttribute("border","2");
}
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>form对象属性、事件、方法</title>
<script type="text/javascript">
window.onload=function(){
var myBtn=document.getElementById("btn");
myBtn.onclick=function(){
newWin=window.open("","","title=hello,height=300,width=350")
//通过表单的length属性，输出表单form1内嵌的表单元素的个数
newWin.document.write("文档中共包含"+document.form1.length+"个元素,分别是：<P>"); //再通过length属性控制循环输出各个元素的名称
newWin.document.write("<UL>")
for(i=0;i<document.form1.length;i++){
newWin.document.write("<LI>"+document.form1.elements[i].name+"</LI>");
}
newWin.document.write("<UL>")
}
}
</script>
</head>
<body>
<form name="form1" action ="login.aspx">
文本框1:<input name ="lbCurrent" /><P>
文本框2:<input name ="lbNext" /><P>
<H3>单击按钮显示表单中的元素信息:</H3>
请单击按钮<input type="button" id="btn" name="lyd" value="显示表单中的元素名称" />
</form>
</body>
</html>
<!doctype html><html><head><meta charset="utf-8"><title>js1</title>
<script>
window.onload=function(){
var myColor=new Array("red","green","blue","pink","yellow","grey");
for(var i=1;i<6;i++)
{
document.write("<h"+i+">hello"+i+"</h"+i+">");
}
for(var i=0;i<6;i++){
document.write("<font size='"+(i+1)+"' color='"+myColor[i]+"'>hello world!</font><br>" );
}
}
</script>
</head><body></body><ml>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素创建</title>
<script type="text/javascript">
window.onload=function(){
//获得body的引用
var mybody=document.getElementsByTagName("body").item(0);
//创建一个<table></table>元素
mytable = document.createElement("TABLE");
//创建一个<TBODY></TBODY>元素
mytablebody = document.createElement("TBODY");
// 创建行列
for(j=0;j<3;j++) {
//创建一个<TR></TR>元素
mycurrent_row=document.createElement("TR");
for(i=0;i<3;i++) {
//创建一个<TD></TD>元素
mycurrent_cell=document.createElement("TD");
//创建一个文本元素
currenttext=document.createTextNode("<input type='text'>本单元格行是： "+j+", 列是 "+i);
//把新的文本元素添加到单元TD上
var input = document.createElement('input');
input.type = 'text';
input.value = '要设置的value';
mycurrent_cell.appendChild(input);
mycurrent_cell.appendChild(currenttext);
// appends the cell TD into the row TR
//把单元TD添加到行TR上
mycurrent_row.appendChild(mycurrent_cell);
}
//把行TR添加到TBODY上
mytablebody.appendChild(mycurrent_row);
}
// 把 TBODY 添加到 TABLE
mytable.appendChild(mytablebody);
// 把 TABLE 添加到 BODY
mybody.appendChild(mytable);
// 把mytable的border 属性设置为2
mytable.setAttribute("border","2");
}
</script>
</head>
<body>
<div id="main"></div>
<span id="display"></span>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>订单处理</title>
<script>
window.onload=function(){
var myTab=document.getElementById("myTable");
var mySelect=document.getElementsByName("select1");
var addBtn=document.getElementById("addBtn");
var delBtn=document.getElementById("delBtn");
addBtn.onclick=function(){
var row = document.createElement('tr'); //创建行
var idCell = document.createElement('td'); //创建第一列书名
idCell.innerHTML = "<input type='text' value='西游4记' name='book0'>"; //填充数据
row.appendChild(idCell); //加入行 ，下面类似
var nameCell = document.createElement('td'); //创建第二列单价
nameCell.innerHTML = "<input type='text' value='20.0' name='value0'>";
row.appendChild(nameCell);
var jobCell = document.createElement('td'); //创建第三列
jobCell.innerHTML ="<input type='checkbox' name='select1'>";
row.appendChild(jobCell);
myTab.appendChild(row);
}
delBtn.onclick=function(){
count=mySelect.length-1; //从后向前判断元素，删除元素
for(i=count;i>-1;i--){
if(mySelect.item(i).checked){
myTab.deleteRow(i+1);
}
}
}
}
</script>
</head>
<body>
<form action="#" method="post">
<table width="500" border="1" id="myTable">
<tr>
<td>书名</td>
<td>单价</td>
<td>选中</td>
</tr>
<tr>
<td><input type="text" value="西游1记" name="book0"></td>
<td><input type="text" value="38.0" name="value0"></td>
<td><input type="checkbox" name="select1" ></td>
</tr>
<tr>
<td><input type="text" value="西游2记" name="book0"></td>
<td><input type="text" value="38.0" name="value0"></td>
<td><input type="checkbox" name="select1" ></td>
</tr>
<tr>
<td><input type="text" value="西游3记" name="book0"></td>
<td><input type="text" value="38.0" name="value0"></td>
<td><input type="checkbox" name="select1" ></td>
</tr>
</table><br>
<input type="button" id="addBtn" value="增加一行">
<input type="button" id="delBtn" value="删除选中行">
</form>
</body>
</html>