目录
-----前言
上一篇我们对JavaScript 中的DHTML 应用：DHTML对象_window_document 的知识点做了一些简单介绍，可参考博文链接：web快速入门之基础篇-js：3_1、DHTML 应用：DHTML对象_window_document 这篇我们将进行一系列的案例效果演示
-----js代码实例演示
1、js显示当前时间_启动、停止时钟
（1）实例代码
我们先来看看一个例子，如下代码：js01_(js设置时间).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!-- 编码类型,：纯文本html,字符类型utf-8 -->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="text" id="txtTime" />
<input type="button" value="显示当前时间" οnclick="showTime();" />
<input type="button" value="启动时钟" οnclick="startTime();" />
<input type="button" value="停止时钟" οnclick="stopTime();" />
</form>
</body>
</html>接下来我们来看看 js 代码：jsCode1.js
//1、显示当前时间
function showTime(){
var r = new Date();
document.getElementById("txtTime").value = r.toLocaleTimeString();
}
//2、启动时钟
var timer;
function startTime(){
timer = window.setInterval(showTime,1000);
}
//3、停止时钟
function stopTime(){
window.clearInterval(timer);
}（2）效果演示
用谷歌浏览器打开运行，效果如下：
2、js实现定时跳转_中途取消的操作
（1）实例代码
我们先来看看一个例子，如下代码：js02_(5秒定时跳转_取消).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="button" value="点击此按钮，5s后将弹出 hello 提示窗口" οnclick="waitAlert();" />
如果想中途取消, 请点击<a href="javascript:cancleAlert();">这里</a>
</form>
</body>
</html>接下来我们来看看 js 代码：jsCode1.js
//4、实现5秒后跳转
var timer1;
function waitAlert(){
var f = function(){
alert("hello");
};
timer1 = window.setTimeout(f,5000);
}
//5、实现定时取消操作
function cancleAlert(){
window.clearTimeout(timer1);
}（2）效果演示
用谷歌浏览器打开运行，效果如下：
至于取消的操作，大家可以点击按钮，然后取消，它将不会弹出hello的提示。本来可以录屏的，这里就不演示了！
3、js修改 html 元素中的文字、图片
（1）实例代码
我们先来看看一个例子，如下代码：s03_(修改html中元素的文字和图片).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
<input type="button" value="点击，修改下面的文字和图片" οnclick="testDom();" />
<p id="p1">我是计算工资图片</p>
<img id="img1" src="xxx.png" />
</form>
</body>
</html>接下来我们来看看 js 代码：jsCode1.js
//6、文字与图片
function testDom(){
var pObj = document.getElementById("p1");
pObj.innerHTML ="我是美女图片";
var imgObj = document.getElementById("img1");
imgObj.src = "yyy.png";
}（2）效果演示
用谷歌浏览器打开运行，效果如下：
点击按钮以后的效果如下：
4、js给html元素添加样式
（1）实例代码
我们先来看看一个例子，如下代码：js04_(给html元素添加样式).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
<style type="text/css">
div.s1 {
border-top: 30px solid red; width: 35%;
/* border-left: 30px solid green; */
color: red;
font-size: 25pt;
}
</style>
</head>
<body>
<form>
<input type="button" value="点击，给html元素添加样式" οnclick="testDom02();" />
<p id="p1">我是计算工资图片</p>
<img id="img1" src="xxx.png" />
<div id="div1">div text</div>
<!-- <div id="div1" class="s1" >div text</div> -->
</form>
</body>
</html>接下来我们来看看 js 代码：jsCode1.js
//7、添加样式
function testDom02(){
var pObj = document.getElementById("p1");
//给元素id为p1，添加字体颜色、背景色、字体大小、样式宽度
pObj.style.color = "red";//字体颜色
//错误： pObj.style.background-color = "gray";
pObj.style.backgroundColor = "gray";//背景色
pObj.style.fontSize = "25pt";//字体大小
pObj.style.width = 300;//样式宽度
//把css样式div.s1添加给id为div1，的div标签元素
var divObj = document.getElementById("div1");
divObj.className = "s1";
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
点击按钮以后的效果如下:
5、js验证以及提交
（1）实例代码
我们先来看看一个例子，如下代码：js05_(验证及提交).html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="jsCode1.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<form>
用户名：<input type="text" id="txtName" οnblur="validName();" />
<span id="nameInfo">3-5个小写字母</span>
<br />
年龄：<input type="text" id="txtAge" οnblur="validAge();" />
<span id="ageInfo">2位数字</span>
<br />
<!-- <input type="submit" value="提交" οnclick="return validData();" /> -->
<!-- 因为没有提交到服务器，上面写法会报404错误，所以暂时如下弹出提示 -->
<input type="button" value="提交" οnclick="alert(validData());" />
</form>
</body>
</html>接下来我们来看看 js 代码：jsCode1.js
//8、验证及提交
// 验证用户名
function validName(){
var name = document.getElementById("txtName").value;
var reg =/^[a-z]{3,5}$/;
var o = document.getElementById("nameInfo");
//错误: if(reg.text(name)){
if(reg.test(name)){
o.innerHTML ="录入正确";
o.style.color="green";
}else{
o.innerHTML ="录入错误";
o.style.color="red";
}
return reg.test(name);
}
// 验证年龄
function validAge(){
var age = document.getElementById("txtAge").value;
//var reg =/^d{2}$/;
var reg =/^\d{2}$/;
var o = document.getElementById("ageInfo");
if(reg.test(age)){
o.innerHTML ="录入正确";
o.style.color="green";
}else{
o.innerHTML ="录入错误";
o.style.color="red";
}
return reg.test(age);
}
// 最终的验证结果
function validData(){
var nameStatus = validName();
var ageStatus = validAge();
//弹窗口看信息：
//alert(nameStatus);
//alert(ageStatus);
return nameStatus&&ageStatus;
}
（2）效果演示
用谷歌浏览器打开运行，效果如下：
