<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的更多相关文章

  1. javascript学习随笔(二)原型prototype

    JavaScript三类方法: 1.类方法:2.对象方法:3.原型方法;注意三者异同 例: function People(name){ this.name=name; //对象方法 this.Int ...

  2. javascript 学习随笔7

    <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="JavaScript& ...

  3. javascript 学习随笔

    var carname="Volvo"; var carname; 重新声明变量后变量的值不变,在这里还是volvo var carname="Volvo"; ...

  4. javascript 学习随笔3

    <html> <head> <script type="text/javascript"> function startTime() { var ...

  5. javascript 学习随笔1

    html部分 <body onload="message()"><!--主题部分加载就调用-->document.getElementById(" ...

  6. javascript 学习随笔6

    改变html内容 document.getElementById("p1").innerHTML="New text!"; var element=docume ...

  7. JavaScript ES6 数组新方法 学习随笔

    JavaScript ES6 数组新方法 学习随笔 新建数组 var arr = [1, 2, 2, 3, 4] includes 方法 includes 查找数组有无该参数 有返回true var ...

  8. typeScript学习随笔（一）

    TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript  TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...

  9. jquery学习随笔

    转)jquery学习随笔(jquery选择器)   jQuery的选择器是CSS 1-3,XPath的结合物.jQuery提取这二种查询语言最好的部分,融合后创造出了最终的jQuery表达式查询语言. ...

随机推荐

  1. jbpmAPI-4

    Chapter 4. Examples 4.1.介绍基于web的工作台在默认情况下将安装两个样本库,包含各种示例项目,帮助你开始.本节显示了不同的例子可以发现在jbpm-playground库(也可用 ...

  2. LintCode-三数之和 II

    题目描述: 给一个包含n个整数的数组S, 找到和与给定整数target最接近的三元组,返回这三个数的和. 注意事项 只需要返回三元组之和,无需返回三元组本身 样例 例如S = .  和最接近1的三元组 ...

  3. CodeIgniter中的session处理

    在CI中你可以这样很简单地装载library:     $this->load->library('newclass');    注意系统中会有两个library目录,一个是system/ ...

  4. 由世纪互联运营的 Windows Azure 现已在中国正式发布

     我们非常高兴地公开发布由世纪互联运营的 Windows Azure,这标志着我们成为第一家在中国国内正式提供公共云平台技术的跨国公司.这一伟大成就的实现,得益于 Microsoft 与世纪互联的 ...

  5. JAVA GUI学习 - 总结

    一:项目 二:重要组件补充 三:组件高级操作

  6. hdoj 1824 Let's go home(2-SAT)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1824 思路分析:该问题为2-SAT问题:需要注意逻辑推理的等价性: (1)题目第一个条件:每一个队或者 ...

  7. ++i和i++哪个效率高？

    这个问题需要分两种情况来解说: 1.当变量i的数据类型是c++语言默认提供的类型的话,他们的效率是一样的. int a,i=0;     a=++i;汇编代码如下: int a,i=0; 01221A ...

  8. golang（2）：beego 环境搭建

    本文的原文连接是: http://blog.csdn.net/freewebsys/article/details/46695513 转载请一定注明出处. 1,关于beego beego是一个用Go开 ...

  9. 把Orchard部署到Windows Azure Web Sites

    很久前就想做个人站点,主要用来记录自己的生活,我喜欢摄影,烘焙…然后又刚刚入皮坑,这些都可以放在网站上展示一下,或许还能为自己带来收入. 然后手上刚好有Azure的试用,于是乎动力就上来了. 以下是部 ...

  10. ZOJ 1093 Monkey and Banana （LIS）解题报告

    ZOJ  1093   Monkey and Banana  (LIS)解题报告 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid= ...