<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. Android 开发笔记“Application 理解”

    Android 中Application类用法 1.             Application和Activity,Service一样是Android框架的一个系统组件,当Android程序启动时 ...

  2. Android UiAutomator 自动化测试环境搭建---新手1

    1.首先需要准备的工具有 1.java jdk 2. android开发工具 adt 3.ant 安装包(如果下载adt里面有) 2.首先安装java环境,jdk这个百度就可以了. 3.android ...

  3. android screenOrientation

    Activity: android:screenOrientation 横(landscape)竖(portrait)屏显示. 如果想让它一直是横屏显示的话,xml:android:screenOri ...

  4. 城通网盘，千军万马，千脑网盘，119g网盘哪个适合做网赚？

    转载请注明文章来自 [ofiicexie] 网盘网赚已经流行了有一段时间了,国内流行的几个网盘有城通,千军万马,千脑,119g,今天小编写以此文来比较分析一下这几个网盘的优缺点. 这里,我特意做了个这 ...

  5. 在VC6中基于dll开发插件用于各种图片显示(BMP/TGA/JPG/GIF/PNG/TIF/ICO/WMF/EMF/...)

    一.图片显示 图片显示的方法: 1．  直接写程序 2．  第3方库 3．  调用COM组件的IPicture接口 4．  使用MFC的CPictureHolder类 5．  使用GDI+的CImag ...

  6. Apache 错误代码配置

    ErrorDocument 400 /error_pages/400.htmlErrorDocument 401 /error_pages/401.htmlErrorDocument 403 /err ...

  7. windows下C语言调用系统文件选择对话框

    代码片段,在windows下用C语言调用文件选择对话框,以备忘 #define DEFAULT_DIR "" char extraction_path[MAX_PATH] = DE ...

  8. CSS样式属性

    一.背景与前景 1.背景: 2.前景字体: (二)边界和边框 border(表格边框.样式等).margin(表外间距).padding(内容与单元格间距). margin(外边距)对自身不会有变化, ...

  9. Enze Third day(c#中选择结构【if...else】)

    哈喽,又到了我总结课堂知识的时间了.今天在云和学院学的是C#中的“选择结构”下的If语句.下面就来总结一下今天所学的吧. 理论:If语句是最常用的选择结构语句.它主要根据所给定的条件(常由关系表达式和 ...

  10. WPF qq界面(转)

    原文:http://blog.csdn.net/u013981858/article/details/49130885 刚开始学WPF,自己写了个小东西,说实话写的并不好,好多东西不懂只是用现在懂的东 ...