码迷,mamicode.com
首页 > 编程语言 > 详细

javascript 学习随笔2

时间:2015-02-06 18:18:46      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>

<body>
<img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14"
onMouseOver="writeText(‘直到 20 世纪 60 年代,金星一直被认为是地球的孪生姐妹,因为金星是离我们最近的行星,同时还由于两者拥有很多共同的特征。‘)"
href ="/example/html/venus.html" target ="_blank" alt="Venus" />

<area shape="circle" coords="129,161,10"
onMouseOver="writeText(‘从地球上是很难研究水星的,这是由于它和太阳的距离总是很近。‘)"
href ="/example/html/mercur.html" target ="_blank" alt="Mercury" />

<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText(‘太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。‘)"
href ="/example/html/sun.html" target ="_blank" alt="Sun" />

</map>

<p id="desc"></p>

</body>
</html>

 使用map, area , coords实现对图片上不同区域添加事件

 

<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert(‘5 秒!‘)",5000)
}
</script>

 5秒后执行弹出框显示5秒

 

<html>
<head>
<script type="text/javascript">
function timedText()
{
var t1=setTimeout("document.getElementById(‘txt‘).value=‘5 秒‘",0)
var t2=setTimeout("document.getElementById(‘txt‘).value=‘4 秒‘",1000)
var t3=setTimeout("document.getElementById(‘txt‘).value=‘3 秒‘",2000)
var t2=setTimeout("document.getElementById(‘txt‘).value=‘2 秒‘",3000)
var t3=setTimeout("document.getElementById(‘txt‘).value=‘1 秒‘",4000)
var t3=setTimeout("document.getElementById(‘txt‘).value=‘开始‘",5000)
}
</script>
</head>

<body>

<form>
<input type="button" value="显示倒计时" onClick="timedText()">
<input type="text" id="txt">
</form>

<p>点击上面的按钮。括号最后的数字代表逝去的时间。</p>
</body>

</html>

 使用setTimeout实现倒计时效果

javascript 学习随笔2

标签:

原文地址:http://www.cnblogs.com/tianhao/p/4277509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!