Ajax学习-JavaScript实例3
2010-09-14 22:33
169 查看
37，创建一个欢迎cookie。
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
38，按钮动画。
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="../../index.html" >
<img border="0" alt="Visit W3School!" src="/www.w3school.com.cn/i/eg_mouse2.jpg" name="b1" /></a>
</body>
</html>
39，简单的html图像地图。
<html>
<body>
<img src ="/www.w3school.com.cn/i/eg_planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="../../example/html/sun.html" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="../../example/html/mercur.html" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="../../example/html/venus.html" alt="Venus" />
</map>
</body>
</html>
40，添加了JavaScript的图像地图。
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src ="/www.w3school.com.cn/i/eg_planets.gif" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')"
href ="../../example/html/sun.html" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"
href ="../../example/html/mercur.html" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"
href ="../../example/html/venus.html" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
41，简单的计时。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>
42，另一个简单的计时。
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will tell you when two, four, and six seconds have passed.</p>
</body>
</html>
43，在一个无穷循环中的计时事件。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count for ever, starting at 0.</p>
</body>
</html>
44，带有停止按钮的无穷循环中的计时事件。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.
</p>
</body>
</html>
45，使用计时事件制表的钟表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
46，创建某个对象的一个实例。
<html>
<body>
<script type="text/javascript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
document.write(personObj.firstname + " is " + personObj.age + " years old.")
</script>
</body>
</html>
47，创建用于对象的模板。
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person("John","Doe",50,"blue")
document.write(myFather.firstname + " is " + myFather.age + " years old.")
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : "; expires="+exdate.toGMTString())
}
function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
{alert('Welcome again '+username+'!')}
else
{
username=prompt('Please enter your name:',"")
if (username!=null && username!="")
{
setCookie('username',username,365)
}
}
}
</script>
</head>
<body onLoad="checkCookie()">
</body>
</html>
38，按钮动画。
<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.b1.src ="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src ="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="../../index.html" >
<img border="0" alt="Visit W3School!" src="/www.w3school.com.cn/i/eg_mouse2.jpg" name="b1" /></a>
</body>
</html>
39，简单的html图像地图。
<html>
<body>
<img src ="/www.w3school.com.cn/i/eg_planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="../../example/html/sun.html" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="../../example/html/mercur.html" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="../../example/html/venus.html" alt="Venus" />
</map>
</body>
</html>
40，添加了JavaScript的图像地图。
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src ="/www.w3school.com.cn/i/eg_planets.gif" usemap="#planetmap" />
<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant planets like Jupiter are by far the largest objects in our Solar System.')"
href ="../../example/html/sun.html" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very difficult to study from the Earth because it is always so close to the Sun.')"
href ="../../example/html/mercur.html" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was often considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')"
href ="../../example/html/venus.html" alt="Venus" />
</map>
<p id="desc"></p>
</body>
</html>
41，简单的计时。
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick = "timedMsg()">
</form>
<p>Click on the button above. An alert box will be displayed after 5 seconds.</p>
</body>
</html>
42，另一个简单的计时。
<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000)
var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000)
var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed text!" onClick="timedText()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will tell you when two, four, and six seconds have passed.</p>
</body>
</html>
43，在一个无穷循环中的计时事件。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
</form>
<p>Click on the button above. The input field will count for ever, starting at 0.</p>
</body>
</html>
44，带有停止按钮的无穷循环中的计时事件。
<html>
<head>
<script type="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopCount()
{
clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="Start count!" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="Stop count!" onClick="stopCount()">
</form>
<p>
Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.
</p>
</body>
</html>
45，使用计时事件制表的钟表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>
46，创建某个对象的一个实例。
<html>
<body>
<script type="text/javascript">
personObj=new Object()
personObj.firstname="John"
personObj.lastname="Doe"
personObj.age=50
personObj.eyecolor="blue"
document.write(personObj.firstname + " is " + personObj.age + " years old.")
</script>
</body>
</html>
47，创建用于对象的模板。
<html>
<body>
<script type="text/javascript">
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}
myFather=new person("John","Doe",50,"blue")
document.write(myFather.firstname + " is " + myFather.age + " years old.")
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax学习-JavaScript实例2
- javascript学习--10个非常棒的Ajax及Javascript实例资源网站
- Ajax学习-Javascript实例1
- 【学习笔记】JavaScript中，构造函数、原型对象和实例的关系
- 10个非常棒的Ajax及Javascript实例资源网站
- javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo
- javascript实例学习二
- Selenium2学习-036-WebUI自动化实战实例-034-JavaScript 在 Selenium 自动化中的应用实例之六（获取 JS 执行结果返回值）
- 10个国外Ajax及Javascript实例资源网站
- [四天学会ajax] 学习Ajax教程第二天，JavaScript 和 Ajax 发出异步请求（下）
- JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
- Ajax学习(一),获得XMLHttpRequest对象,进行初步异步交互(jquery.javascript)
- Jquery Ajax学习实例7-Ajax所有过程事件分析示例
- javascript 学习笔记（二）：作用域实例
- javascript 学习笔记（三）：匿名函数与闭包实例
- javascript实例学习之三——类新浪微博的登录框
- 一步步学习ASP.NET MVC3 (9)——JsonReslt,JavaScript,@Ajax
- JavaScript学习笔记-函数实例
- 一步步学习ASP.NET MVC3 (10)——@Ajax,JavaScriptResult(1)
- ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)