1、时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript时钟</title>
<script type="text/javascript">
function currenttime(){
setInterval(function (){
var now = new Date();
var str =‘‘;
str += now.getYear()+1900+‘年‘;
str += now.getMonth()+1+‘月‘;
str += now.getDate()+‘日‘;
str += now.getHours()+‘时‘;
str += now.getMinutes()+‘分‘;
str += now.getSeconds()+‘秒‘;
document.getElementById(‘left‘).innerHTML=str;
},1000);
}
</script>
</head>
<body>
<p>
<input type="button" value="当前时间" onclick="currenttime();"/>
</p>
<h2 id="left"></h2>
</body>
</html>
此处出现Cannot set property ‘innerHTML‘ of null 错误，原因是设置的编号与实际的编号不符，少了单引号。
2、创建动态样式
使用DOM样式对象创建一个允许控制页面文本颜色的页面。
style.js
function changehead(){
i=document.form1.heading.selectedIndex;
headcolor = document.form1.heading.options[i].value;
document.getElementById("head1").style.color=headcolor;
}
function changebody(){
i=document.form1.body.selectedIndex;
doccolor = document.form1.body.options[i].value;
document.getElementById("p1").style.color=doccolor;
}
注意：在函数内声明创建一个外围变量名相同的变量时，必须使用var关键字
ControlStyle.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Controlling Styles with JavaScript</title>
<script type="text/javascript" src="styles.js"></script>
</head>
<body>
<h1 id="head1">Controlling Styles with JavaScript</h1>
<hr>
<p id="p1">
Select the color for paragrahs and heading using the form below.
The colors you specified will be dynamically changed in this document.
The change occurs as soon as you changge the value iof either of the drop-down lists in the form.
</p>
<form name="form1">
<b>Heading color:</b>
<select name="heading" onchange="changehead();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
<br>
<b>Body text color:</b>
<select name="body" onchange="changebody();">
<option value="black">Black</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>
</form>
</body>
</html>
3、动态导航系统
tree.js
function Toggle(e){
if(!document.getElementById) return;
if(!e) var e = window.event;
whichlink=(e.target)? e.target.id: e.srcElement.id;
obj=document.getElementById(whichlink+"menu");
visible=(obj.style.display=="block")
key=document.getElementById(whichlink);
keyname=key.firstChild.nodeValue.substring(3);
if(visible){
obj.style.display="none";
key.firstChild.nodeValue="[+]"+keyname;
}else{
obj.style.display="block";
key.firstChild.nodeValue="[-]"+keyname;
}
}
document.getElementById("products").onclick=Toggle;
document.getElementById("support").onclick=Toggle;
document.getElementById("contact").onclick=Toggle;
Navigation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Navigation Tree</title>
<style>
A{text-decoration: none;}
#productsmenu,#supportmenu,#contactmenu{
display: none;
margin-left: 2em;
}
</style>
</head>
<body>
<h1>Navigation Tree Example</h1>
<p>The Navigation tree below allows you to expand and collapse items.</p>
<ul>
<li>
<a href="#" id="products">[+]Products</a>
<ul ID="productsmenu">
<li><a href="">Product List</a></li>
<li><a href="">Order Form</a></li>
<li><a href="">Price List</a></li>
</ul>
</li>
<li>
<a href="#" id="support">[+]Support</a>
<ul ID="supportmenu">
<li><a href="">Product List</a></li>
<li><a href="">Order Form</a></li>
</ul>
</li>
<li>
<a href="#" id="contact">[+]Contact</a>
<ul ID="contactmenu">
<li><a href="">Product List</a></li>
<li><a href="">Order Form</a></li>
</ul>
</li>
</ul>
<script language="JavaScript" type="text/javascript" src="tree.js">
</script>
</body>
</html>
时间： 2024-10-02 08:01:41