数组对象使用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Array数组应用示例title>
<script type="text/javascript">
var fruit=new Array("苹果","梨子","橙子");
var fruit1=new Array("pear1","apple","orange");
with(document){
//push()在数组尾部添加数组元素，splice(m,n)删除在m位置的n个元素
write("
");
write("",fruit);
write("",fruit.join());
write("",fruit.join("、"));//将数组内各个元素以分隔符连接成一个字符串，默认按逗号连接
write("",fruit.reverse());//reverse倒序数组对象
write("",fruit.concat(fruit1));//concat()方法用于连接两个或多个数组
write("",fruit1.sort());//sort按字典顺序对数组元素重新排版
write("");
}
script>
head>
<body>
body>
html>
运行结果：
String对象使用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>String对象应用示例title>
<script type="text/javascript">
var str=new String("This is a test String");
var firstIndex=str.indexOf("s");
var lastIndex=str.lastIndexOf("s");
var arr=new Array();
arr=str.split(" ");
len=str.length;
result="第一个's'的位置是："+firstIndex+"
最后一个's'的位置是："+lastIndex+"
字符串对象的长度是："+len+"
数组arr中的各个元素为："+"
"+arr[0]+"
"+arr[1]+"
"+arr[2]+"
"+arr[3]+"
"+arr[4];
document.write(result);
document.write("
字符串对象的字符颜色显示为'红色':"+str.fontcolor("red"));
script>
head>
<body>
body>
html>
运行结果：
Math对象使用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Math对象应用示例-随机排版图片title>
<style type="text/css">
/*以下是自适应屏幕宽度*/
div{float: left;height: 160px;width: 160px;margin: 5px;padding: 0}
div img{border: 0;}
div a{display: block;padding: 35px 12px}
div.vbg a{display: block;padding: 10px 35px 15px;}
div.dispcenter{position: relative;margin: 0 auto;width: 700px;padding: 0 50px 0 70px;background: none;float: none}
style>
<script type="text/javascript" language="javascript">
document.write("");
var picArr=new Array();
var m=0;
for(i=1;i<=20;i++){
if(i<10)
i="0"+i;
picArr.push(i);
}
while(picArr.length>0){
i=Math.floor(Math.random()*(picArr.length-1));
if(picArr[i]=="03"||picArr[i]=="04"||picArr[i]=="06"||picArr[i]==11||picArr[i]==14||picArr[i]==17||picArr[i]==19||picArr[i]==20){
document.write(""+picArr[i]+".jpg'>![]()
");
}
picArr.splice(i,1);
}
document.write("");
script>
head>
<body>
body>
html>
运行结果：未插入图片，请看主要代码
Date对象使用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Date对象应用示例title>
<script type="text/javascript">
var today=new Date();
var year=today.getFullYear();
var month=today.getMonth()+1;
var date=today.getDate();
var day=today.getDay();
var dayName=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
var hour=today.getHours();
var minute=today.getMinutes();
var second=today.getSeconds();
hour=(hour<10)?"0"+hour:hour;
minute=(minute<10)?"0"+minute:minute;
second=(second<10)?"0"+second:second;
var time=hour+":"+minute+":"+second;
document.write("现在的时间是"+year+"年"+month+"月"+date+"日"+time+" "+dayName[day]);
script>
head>
<body>
body>
html>
运行结果：
-------------------------------------------------------------------------
以下为浏览器对象:
创建警告对话框
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>警告对话框创建示例title>
<script type="text/javascript">
document.title="警告对话框创建示例";
function fun(testObject){
if(testObject.value.length<6)
alert("密码长度不得小于6位！");
}
script>
head>
<body>
<form>
请输入密码：
<input type="password" name="pwd" onBlur="fun(this);">
form>
body>
html>
运行结果：
创建确认对话框
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建确认对话框示例title>
<script type="text/javascript">
function isConfirm(){
if(confirm("你确认删除此信息吗？"))
alert("信息已成功删除！");
else
alert("你取消了删除！");
}
script>
head>
<body>
<form method="post" name="form1">
<input type="button" value="删除" onClick="isConfirm()">
form>
body>
html>
运行结果：
创建信息提示对话框
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>创建信息提示对话框示例title>
<script type="text/javascript">
var name=prompt("请输入你的姓名","刘先生");
document.write("你的名字是："+name);
script>
head>
<body>
body>
html>
运行结果：
使用open()打开窗口
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打开指定窗口（使用open()打开窗口示例）title>
<script language="javascript">
var newWin=window.opener("Date对象应用示例.html","temp","left=50,top=120,"+"width=360,heigth=100,resizable=1");
script>
head>
<body>
body>
html>
运行结果：请看主要代码
setInterval定时器应用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setInterval定时器应用示例title>
<script language="javascript">
var sec=0;
timerID=setInterval("count()",1000);
function count(){
num.innerHTML=sec++;
}
script>
head>
<body>
停留时间：<font ID="num" face="impact" color="red" size="7">0font>
秒钟：<input type="button" value="停止" onClick="clearInterval(timerID)">
body>
html>
运行结果：
setTimeout定时器使用
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>setTimeout定时器应用示例title>
<style type="text/css">
div{font-size: 20px;font-weight: bold;font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";}
style>
<script type="text/javascript">
msg=new Array();//存放显示文字数组
msg.push("______");
msg.push("你知道吗?");
msg.push("______");
msg.push("金庸写的14本书可以连成一个对联：");
msg.push("______");
msg.push("“飞雪连天射白鹿，笑书神侠倚碧鸳”");
msg.push("______");
msg.push("J.K.罗琳写的7本书也可以连成一句话：");
msg.push("______");
msg.push("“哈哈哈哈哈哈哈”");
for(i=0;i<msg.length/2;i++){
document.write("");
}
interval=100;//定时器运行时间
seq=0;//显示文字的位置
i=0;//文字数组下标
j=0;//div数组下标
function Scroll(){
if(i%2==0)
document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(seq,seq+1)
else
document.getElementsByTagName("div").item(j).innerHTML=msg[i].substring(0,seq+1);
seq++;
if(seq>=msg[i].length){
seq=0;
i++;
if(i%2==0)
j++;//要显示文字才换行
interval=900;
}
if(i>=msg.length){
i=0;
j=0;
setTimeout("clearText()",2000);//文字全部显示后停2s再清空
return;//退出Scroll()函数
}
timerScroll=setTimeout("Scroll()",interval);
interval=100;
}
//清空文本
function clearText(){
for(k=0;k<(document.getElementsByTagName("div").length);k++){
document.getElementsByTagName("div").item(k).innerHTML="";
}
interval=100;
Scroll();
}
script>
head>
<body onLoad="Scroll()" style="margin: 0 80px">
body>
html>
运行结果：
location对象应用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>location对象应用实例title>
<script type="text/javascript">
function currLocation(){
alert(window.location);
}
function newLocation(){
window.location="setInterval定时器应用示例.html";
}
script>
head>
<body>
<input type="button" onClick="currLocation()" value="显示当前的URL">
<input type="button" onClick="newLocation()" value="改变URL">
body>
html>
运行结果：
document对象应用实例
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>document对象应用实例title>
<script>
document.title="document对象应用示例";
var update_date=document.lastModified;
document.write("本网页最后更新的时间是："+update_date);
script>
head>
<body>
body>
html>
运行结果：
使用image对象实现鼠标移入时更换显示图片
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用image对象实现鼠标移入移出时更换显示图片title>
head>
<body>
<img name="myimage" src="350724200004263015.jpg";
onMouseOver="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';"
onMouseOut="document.myimage.src='file:///F:/DW/%E7%AB%99%E7%82%B9/350724200004263015.jpg';">
body>
html>
运行结果：请看主要代码
form对象（使用表单对象创建注册页面）
doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用表单对象创建注册页面title>
<style type="text/css">
.inSize{height: 120px;width: 600px;font-size: 36px;font-weight: bold}
style>
<script type="text/javascript">
function check(){
obj=document.form1;
name=obj.uName.value;
if(name=="")
return;
if(obj.uSex.checked==true){
sex="男";
document.getElementById("textInfo").style.cssText="background-color:#000;color:#FFF;";
}
else{
sex="女";
document.getElementById("textInfo").style.cssText="background-color:#FF9900;color:#000;";
}
index=obj.city.selectedIndex;
selCity=obj.city.options[index].text;
ah=new Array();
for(i=4;i<=8;i++){
if(obj.elements[i].checked==true)
ah.push(obj.elements[i].value);
}
if(ah==""){
alert("请选择一项爱好!");
return;
}
str="您所填写的信息：\n";
str+="您的姓名是："+name;
str+=", "+sex;
str+=",居住在"+selCity;
str+="。您喜欢"+ah+"。";
document.getElementById("textInfo").value=str;
}
function getElements(){
num=document.forms[0].length;
num="一共用了 "+num+" 个表单元素";
alert(num);
}
function setFocus(){
document.getElementById("uName").focus();
}
script>
head>
<body onLoad="setFocus()">
请填写个人信息：<br /><br />
<div style="border-style: solid;border-color: #f00;border-width: 1px;width: 600px">
<form id="form1" name="form1" method="post" action="javascript:check()">
<label>姓名：
<input type="text" name="uName" id="uName" />
<br /><br />
label>
性别：
<label>
<input name="radio" type="radio" id="uSex" value="uSex" checked="checked" />
男
label>
<label>
<input type="radio" name="radio" id="uSex2" value="uSex" />
女
label>
<br /><br />
<label>居住城市：
<select name="city" id="city">
<option>北京option>
<option>上海option>
<option selected="selected">广州option>
<option>沈阳option>
<option>长春option>
<option>哈尔滨option>
select>
label>
<br /><br />
爱好：
<label>
<input type="checkbox" name="zq" id="zq" value="足球" />
足球
label>
<label>
<input type="checkbox" name="yy" id="yy" value="音乐" />
音乐
label>
<label>
<input type="checkbox" name="ly" id="ly" value="旅游" />
旅游
label>
<label>
<input type="checkbox" name="yx" id="yx" value="游戏" />
游戏
<input type="checkbox" name="qt" id="qt" value="其他" />
其他<br /><br />
label>
<input type="submit" name="button" id="button" value="提交" />
<input type="reset" name="button2" id="button2" value="重置" />
form>div><br />
<textarea name="textInfo" cols="50" rows="4" readonly="readonly" class="inSize" id="textInfo">textarea>
<br /><br />
<input type="button" name="button3" id="button3" value="表单所用的元素个数" onClick="getElements()"/>
body>
html>
运行结果：