JS典型网页特效

合集下载

如何在JavaScript中实现网页的动画和特效

如何在JavaScript中实现网页的动画和特效JavaScript是一种强大的编程语言，它可以用来为网页添加动画和特效。

在本文中，我们将学习如何使用JavaScript实现网页动画和特效。

1.使用CSS动画：JavaScript可以与CSS动画配合使用，通过控制CSS属性的变化来实现动画效果。

可以通过添加或移除类来触发CSS 动画，也可以使用JavaScript直接修改CSS属性的值。

以下是一些常见的CSS属性，可以用来实现动画效果：- transform：可以利用translate、scale、rotate等函数来改变元素的位置、尺寸和旋转角度。

- opacity：可以通过改变元素的不透明度来实现淡入淡出效果。

- transition：可以使用过渡效果来平滑地改变元素的属性值。

通过在JavaScript中创建类或直接操作元素的样式，可以通过移动、旋转和改变元素的透明度来实现各种动画效果。

2.使用setTimeout和setInterval函数：JavaScript中的setTimeout和setInterval函数可以用来设置定时器，通过定时器来触发函数的执行。

在动画和特效中，可以使用setTimeout函数来延迟执行某个函数，来实现延迟效果。

setInterval函数可以用来循环执行一个函数，从而实现连续播放的效果。

3.使用requestAnimationFrame函数：requestAnimationFrame是一个优化的浏览器API，它可以在每次浏览器重绘之前调用一个回调函数，通常用于执行动画。

与setTimeout和setInterval不同，requestAnimationFrame会根据浏览器的绘制能力来调整动画的帧率，保证动画的流畅性并减少浏览器的负载。

使用requestAnimationFrame函数来调用动画函数，可以使用递归的方式来循环播放动画，通过不断更新元素的位置、尺寸和样式来实现动画效果。

网页常用11种特效

＜/head＞
11．表格的半透明显示效果
在＜head＞＜/head＞之间加上如下代码：
＜style＞
.alpha{filter: Alpha(Opacity=50)} //50表示50%的透明度
＜/style＞
在＜body＞＜/body＞之间加上如下代码：
image [1] = ''tu1.gif''
image [2] = ''tu2.gif''
image [3] = ''tu3.gif''
image [4] = ''tu4.gif''
number = Math.floor(Math.random() * image.length);
function move(x) {
if(self.moveBy){
self.moveBy (0,-800);
for(i = x; i ＞ 0; i--)
{
self.moveBy(0,3);
}
for(j = 200; j ＞ 0; j--){ //如果你认为窗口抖动厉害，就200换成个位数
if (document.all)
document.body.onmousedown=new Function("if (event.button==2||event.button==3)
window.external.addFavorite(''您的网址'',''您的网站名称)")
if (( time ＞=14) && (time ＜ 18))

23个Javascript弹出窗口特效整理

23个Javascript弹出窗口特效整理1. LightviewLightview是一个基于Prototype与开发，用于创建可以覆盖整个页面的模式对话框。

展示的内容不仅可以是图片、文字、网页、通过Ajax 调用的内容，还可以是Quicktime/Flash影片都能够以非常酷的效果展示。

2. ThickBox (演示地址)ThickBox是一个模式对话框UI控件。

基于jQuery开发，可以用来展示单张或多张图片，内嵌的内容，iframed的内容，或通过Ajax 获取的内容。

3. Fonshen JS Window (演示地址)风声JS窗口为模拟WEB弹出窗口和对话框提供一种方案。

程序基于JavaScript/X HTML/CSS标准实现。

支持自由度极高的窗口样式定制；交互方面提供模拟的按钮编程模型，可以很好的模拟对话框；另外，接口参考Javascript内置对象window的一些方法（比如：window.open, window.alert, window.confirm），简洁方便。

4. ymPrompt在web开发中，对于浏览器默认的消息提示框（如alert,confirm 等）外观无法控制，为了实现更好的界面效果，于是模拟系统的消息提示框实现了该组件。

在外观上可以通过css进行完全的控制。

调用方式简单，直接使用ymPrompt.alert()的方式调用，传入相应的参数即可。

提供四种消息类型。

分别为消息提示、成功信息、错误信息、询问信息。

5. ModalboxModalBox用于生成Web2.0风格的模式对话框。

基于Prototype 框架开发，效果类似Mac OSX的模式对话框。

内容可以通过Ajax加载或普通的HTML页面。

6. SliderWindowSliderWindow是一个基于YUI开发消息提醒滑动窗体。

7. MOOdalBox (演示地址)MOOdalBox是一个基于Mootools框架开发的Web2.0模式对话。

JS基本特效--常见40个常用的js页面效果图（转载）

JS基本特效--常见40个常⽤的js页⾯效果图（转载）1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽⿏标右键 <table border oncontextmenu=return(false)><td>no</table> 可⽤于Table2. <body onselectstart="return false"> 取消选取、防⽌复制3. onpaste="return false" 不准粘贴4. oncopy="return false;" oncut="return false;" 防⽌复制5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成⾃⼰的图标6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显⽰出你的图标7. <input style="ime-mode:disabled"> 关闭输⼊法8. 永远都会带着框架<script language="JavaScript"></script>9. 防⽌被⼈frame<script LANGUAGE=JAVASCRIPT></script>10. ⽹页将不能被另存为 <noscript><iframe src="/blog/*.html>";</iframe></noscript>12.删除时确认 <a href="javascript：if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>13. 取得控件的绝对位置//Javascript <script language="Javascript"> function getIE(e){ var t=e.offsetTop; var l=e.offsetLeft; while(e=e.offsetParent) alert("top="+t+"/nleft="+l); } </script> //VBScript <script language="VBScript"></script>14. 光标是停在⽂本框⽂字的最后<script language="javascript"> function cc() { var e = event.srcElement; var r =e.createTextRange(); r.moveStart("character",e.value.length); r.collapse(true); r.select(); } </script> <input type=text name=text1 value="123" onfocus="cc()">15. 判断上⼀页的来源 javascript： document.referrer16. 最⼩化、最⼤化、关闭窗⼝ <object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Minimize"></object> <object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11"> <param name="Command" value="Maximize"></object> <OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"> <PARAM NAME="Command" VALUE="Close"></OBJECT> <input type=button value=最⼩化 onclick=hh1.Click()> <input type=button value=最⼤化 onclick=hh2.Click()> <input type=button value=关闭 onclick=hh3.Click()> 本例适⽤于IE17.屏蔽功能键Shift,Alt,Ctrl<script> function look(){ if(event.shiftKey) alert("禁⽌按Shift键!"); //可以换成ALT　CTRL } document.onkeydown=look;</script>18. ⽹页不会被缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 或者<META HTTP-EQUIV="expires" CONTENT="0">19.怎样让表单没有凹凸感？ <input type=text style="border:1 solid #000000"> 或 <input type=text style="border-left:none; border-right:none; border-top:none; border-bottom: 1 solid #000000"></textarea>20.<div><span>&<layer>的区别？ <div>(division)⽤来定义⼤段的页⾯元素，会产⽣转⾏ <span>⽤来定义同⼀⾏内的元素，跟<div>的唯⼀区别是不产⽣转⾏ <layer>是ns的标记，ie不⽀持，相当于<div>21.让弹出窗⼝总是在最上⾯: <body onblur="this.focus();">22.不要滚动条? 让竖条没有: <body style="overflow:scroll;overflow-y:hidden"> </body> 让横条没有: <body style="overflow:scroll;overflow-x:hidden"> </body> 两个都去掉？更简单了 <body scroll="no"> </body>23.怎样去掉图⽚链接点击后，图⽚周围的虚线？ <a href="#" onFocus="this.blur()"><img src="/blog/logo.jpg" border=0></a>24.电⼦邮件处理提交表单 <form name="form1" method="post" action="" enctype="text/plain"> <input type=submit> </form>25.在打开的⼦窗⼝刷新⽗窗⼝的代码⾥如何写？ window.opener.location.reload()26.如何设定打开页⾯的⼤⼩ <body onload="top.resizeTo(300,200);"> 打开页⾯的位置<body onload="top.moveBy(300,200);">27.在页⾯中如何加⼊不是满铺的背景图⽚,拉动页⾯时背景图不动<STYLE>body{background-image:url(/blog/logo.gif); background-repeat:no-repeat;background-position:center;background-attachment: fixed}</STYLE>28. 检查⼀段字符串是否全由数字组成<script language="Javascript"></script>29. 获得⼀个窗⼝的⼤⼩ document.body.clientWidth; document.body.clientHeight30. 怎么判断是否是字符 if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"); else alert("全是字符");31.TEXTAREA⾃适应⽂字⾏数的多少 <textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight"> </textarea>32. ⽇期减去天数等于第⼆个⽇期<script language=Javascript>function cc(dd,dadd){//可以加上错误处理var a = new Date(dd)a = a.valueOf()a = a - dadd * 24 * 60 * 60 * 1000a = new Date(a)alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "⽉" + a.getDate() + "⽇")}cc("12/23/2002",2)</script>33. 选择了哪⼀个Radio<HTML><script language="vbscript">function checkme()for each ob in radio1if ob.checked then window.alert ob.valuenextend function</script><BODY><INPUT name="radio1" type="radio" value="style" checked>Style<INPUT name="radio1" type="radio" value="barcode">Barcode<INPUT type="button" value="check" onclick="checkme()"></BODY></HTML>34.脚本永不出错<SCRIPT LANGUAGE="JavaScript"></SCRIPT>35.ENTER键可以让光标移到下⼀个输⼊框 <input onkeydown="if(event.keyCode==13)event.keyCode=9">36. 检测某个⽹站的链接速度：把如下代码加⼊<body>区域中:<script language=Javascript>tim=1setInterval("tim++",100)b=1var autourl=new Array()autourl[1]=""autourl[2]=""autourl[3]=""autourl[4]=""autourl[5]=""function butt(){document.write("<form name=autof>")for(var i=1;i<autourl.length;i++)document.write("<input type=text name=txt"+i+" size=10 value="/blog/测试中......>" =》<input type=textname=url"+i+" size=40> =》<input type=button value=GOonclick=window.open(this.form.url"+i+".value)><br>")document.write("<input type=submit value=刷新></form>")}butt()function auto(url)elseb++}function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1 onerror=auto("http://"+autourl+"")>")}run()</script>37. 各种样式的光标 auto ：标准光标 default：标准箭头 hand ：⼿形光标 wait ：等待光标 text ：I形光标 vertical-text ：⽔平I形光标 no-drop ：不可拖动光标 not-allowed ：⽆效光标 help ：?帮助光标 all-scroll ：三⾓⽅向标 move ：移动标 crosshair ：⼗字标 e-resize n-resize nw-resize w-resize s-resize se-resize sw-resize38.页⾯进⼊和退出的特效进⼊页⾯<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)"> 推出页⾯<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 这个是页⾯被载⼊和调出时的⼀些特效。

JavaScript实现动态网页特效

JavaScript实现动态网页特效JavaScript是一种常用的编程语言，可以用于实现动态网页特效。

通过JavaScript，开发者可以为网页添加各种交互效果，使用户体验更加丰富和吸引人。

以下是一些常见的JavaScript动态网页特效的实现方法：1. 鼠标悬停效果：通过JavaScript可以实现当鼠标悬停在某个区域上时，改变该区域的样式或显示隐藏的内容。

例如，当用户将鼠标悬停在一个按钮上时，可以让按钮的颜色变化或显示按钮下方的一段描述文字。

2. 幻灯片效果：通过JavaScript可以实现网页上的幻灯片效果，使多张图片自动轮播展示。

可以通过设置定时器和改变图片的显示状态来实现。

这种效果常用于图片展示、轮播广告等地方。

3. 下拉菜单效果：通过JavaScript可以实现网页上的下拉菜单效果，让用户点击或悬停在一个导航栏上时，下方显示出更多的选项。

可以通过设置事件监听和改变菜单的可见性来实现。

4. 表单验证效果：通过JavaScript可以实现网页上的表单验证效果，检查用户输入的内容是否符合要求。

可以通过设置事件监听和编写验证函数来实现。

例如，当用户提交表单时，可以检查是否所有的必填项都已填写，并给出相应的提示。

5. 动态加载内容效果：通过JavaScript可以实现动态加载内容的效果，当用户滚动网页到一定位置时，自动加载更多的内容。

可以通过监听滚动事件和设置ajax 请求来实现。

这种效果常用于博客、社交媒体等网站上。

6. 特效动画效果：通过JavaScript可以实现各种特效动画，如淡入淡出效果、滑动效果、旋转效果等。

可以通过改变元素的显示状态、设置定时器和改变元素的样式来实现。

这种效果常用于网页中的广告、特效展示等地方。

7. 音频视频播放效果：通过JavaScript可以实现网页上的音频和视频播放效果。

可以通过设置事件监听、控制播放状态和改变样式来实现。

例如，当用户点击一个按钮时，可以播放音频或视频，并显示相应的控制按钮。

JavaScript实现三种常用网页特效（offset、client、scroll系列）

JavaScript实现三种常⽤⽹页特效（offset、client、scroll系列）⽬录⼀、元素偏移量 offset 系列⼆、元素可视区 client 系列三、元素滚动 scroll 系列⼀、元素偏移量 offset 系列offset 翻译过来就是偏移量，我们使⽤ offset 系列相关属性可以动态的得到该元素的位置（偏移）、⼤⼩等。

获得元素距离带有定位⽗元素的位置获得元素⾃⾝的⼤⼩（宽度⾼度）注意：返回的数值都不带单位offset常⽤的属性有：例如：给定⼀个⼦盒⼦和⼀个⽗盒⼦，并给他们⼀定的⼤⼩，来看看这些属性是怎样获得的：<style>*{margin: 0px;padding: 0px;}.father{position: relative;margin-left: 50px;margin-top: 10px;width: 200px;height: 200px;background-color: brown;}.son{width: 100px;height: 100px;background-color: cornflowerblue;}</style></head><body><div class="father"><div class="son"></div></div><script>var father = document.querySelector('.father');var son = document.querySelector('.son')console.log('father.offsetLeft',father.offsetLeft);console.log('father.offsetTop',father.offsetTop);console.log('son.offsetWidth',son.offsetWidth);console.log('son.offsetHeight',son.offsetHeight);</script></body>打印结果为：我们知道，offset可以帮助我们得到元素的⼤⼩和⽗元素，但是style属性也可以获取到相关属性，那么，他们的区别⼜是什么呢？offsetoffset 可以得到任意样式表中的样式值offset 系列获得的数值是没有单位的offsetWidth 包含padding+border+widthoffsetWidth 等属性是只读属性，只能获取不能赋值stylestyle.width 获得的是带有单位的字符串style.width 获得不包含padding和border 的值style.width 是可读写属性，可以获取也可以赋值⼆、元素可视区 client 系列client 翻译过来就是客户端，我们使⽤ client 系列的相关属性来获取元素可视区的相关信息。

网页飘雪js特效

⽹页飘雪js特效⽹页飘雪js特效⾮常棒的⼀个特效，让⽹页看起更加漂亮，美化⽹页必备1. 在页⾯中加⼊css，为了测试有效果，设置了body的css样式body {width: 100%;height: 100%;background-color: #5569ae;overflow: hidden;}.snow-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 100001;}2. ⽹页加上如下class的div<div class="snow-container"></div>3. 加⼊js<script src="js/jquery-2.1.1.min.js"></script><script type="text/javascript" src="js/three.js"></script><script type="text/javascript">function randomRange(t, i) {return Math.random() * (i - t) + t}Particle3D = function (t) {THREE.Particle.call(this, t), this.velocity = new THREE.Vector3(0, -2, 0), this.velocity.rotateX(randomRange(-45, 45)), this.velocity.rotateY(randomRange(0, 360)), this.gravity = new THREE.Vector3(0, 0, 0), this.drag = 1 }, Particle3D.prototype = new THREE.Particle, Particle3D.prototype.constructor = Particle3D, Particle3D.prototype.updatePhysics = function () {this.velocity.multiplyScalar(this.drag), this.velocity.addSelf(this.gravity), this.position.addSelf(this.velocity)};var TO_RADIANS = Math.PI / 180;THREE.Vector3.prototype.rotateY = function (t) {cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);var i = this.z, o = this.x;this.x = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY}, THREE.Vector3.prototype.rotateX = function (t) {cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);var i = this.z, o = this.y;this.y = o * cosRY + i * sinRY, this.z = o * -sinRY + i * cosRY}, THREE.Vector3.prototype.rotateZ = function (t) {cosRY = Math.cos(t * TO_RADIANS), sinRY = Math.sin(t * TO_RADIANS);var i = this.x, o = this.y;this.y = o * cosRY + i * sinRY, this.x = o * -sinRY + i * cosRY};$(function () {var container = document.querySelector(".snow-container");if (/MSIE 6|MSIE 7|MSIE 8/.test(erAgent)) {return} else {if (/MSIE 9|MSIE 10/.test(erAgent)) {$(container).css("height", $(window).height()).bind("click", function () {$(this).fadeOut(1000, function () {$(this).remove()})})}}var containerWidth = $(container).width();var containerHeight = $(container).height();var particle;var camera;var scene;var renderer;var mouseX = 0;var mouseY = 0;var windowHalfX = window.innerWidth / 2;var windowHalfY = window.innerHeight / 2;var particles = [];var particleImage = new Image();particleImage.src = "img/snow.png";var snowNum = 500;function init() {camera = new THREE.PerspectiveCamera(75, containerWidth / containerHeight, 1, 10000);camera.position.z = 1000;scene = new THREE.Scene();scene.add(camera);renderer = new THREE.CanvasRenderer();renderer.setSize(containerWidth, containerHeight);var material = new THREE.ParticleBasicMaterial({map: new THREE.Texture(particleImage)});for (var i = 0; i < snowNum; i++) {particle = new Particle3D(material);particle.position.x = Math.random() * 2000 - 1000;particle.position.y = Math.random() * 2000 - 1000;particle.position.z = Math.random() * 2000 - 1000;particle.scale.x = particle.scale.y = 1;scene.add(particle);particles.push(particle)}container.appendChild(renderer.domElement);document.addEventListener("mousemove", onDocumentMouseMove, false);document.addEventListener("touchstart", onDocumentTouchStart, false);document.addEventListener("touchmove", onDocumentTouchMove, false);setInterval(loop, 1000 / 40)}function onDocumentMouseMove(event) {mouseX = event.clientX - windowHalfX;mouseY = event.clientY - windowHalfY}function onDocumentTouchStart(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;mouseY = event.touches[0].pageY - windowHalfY}}function onDocumentTouchMove(event) {if (event.touches.length == 1) {event.preventDefault();mouseX = event.touches[0].pageX - windowHalfX;mouseY = event.touches[0].pageY - windowHalfY}}function loop() {for (var i = 0; i < particles.length; i++) {var particle = particles[i];particle.updatePhysics();with (particle.position) {if (y < -1000) {y += 2000}if (x > 1000) {x -= 2000} else {if (x < -1000) {x += 2000}}if (z > 1000) {z -= 2000} else {if (z < -1000) {z += 2000}}}}camera.position.x += (mouseX - camera.position.x) * 0.005; camera.position.y += (-mouseY - camera.position.y) * 0.005; camera.lookAt(scene.position);renderer.render(scene, camera)}init()});</script>注意：以上的js 51⾏需要加⼊⼀张雪花的图⽚的路径4. 提取码：iprm。

JavaScript网页特效经典300例

JavaScript网页特效经典300例
第1篇 JavaScript基础篇
第1章网页特效
第2章DOM操作
第3章控制表单控件
第4章窗口的控制和框架的互操作
第5章鼠标特效
第6章按钮特效
第7章链接特效
第8章文本输入框和下拉菜单特效
第9章层的应用
第10章表格的控制
第1章网页特效
在万维网刚被发明的初期，网页只是一个静态的、可以呈现文字的页面而已。

但是，随着互联网的发展，人们对网页的美观和动态性要求越来越高，因此，网页就需要变得更有互动性，能更好地满足人们的视觉需要。

所以，现在大多数的网站都采用了各式各样的网页特效来提高网页的可读性和用户体验感。

本章介绍了用JavaScript实现的多种网页特效，读者可以从中学到网页特效的一些技巧。

实例001 自动刷新页面
【实例描述】
有一些具有实效特点的网页，譬如股票价格、外汇牌价等，有这样的用户需求：定时地自动刷新网页，把最新数据展示给用户。

那么这样的效果如何实现呢？JavaScript里有一个reload()函数可以实现这样的效果。

【实现代码】
<script< p="">
type="text/javascript">
//刷新网页的函数
fresh(){
function
window.location.reload();
//调用location的reload函数
}
setTimeout('fresh()',10000); //设置timeout，10秒钟刷新一次</script<>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JS典型网页特效学习情境1 电子时钟1.1任务目标许多网站都在页面上有一个浮动的电子时钟以显示当前时间，提醒上网者注意上网时间。

本次任务的目标是要在web页面上打造一个电子时钟。

下面这张图片就是我们要实现的一个最基本的电子时钟的效果图：1.2设计思路1.2.1结构规划（div＋css结构）本次任务的时钟显示部分使用一个DIV（层）实现，而时钟的显示样式则使用CSS 样式表加以修饰。

而电子时钟的效果是通过每隔一秒获取一次系统时间并刷新DIV内容的方式来实现。

1.2.2任务分析要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：1window.setTimeout()方法的使用；2时间对象的使用；3获取web页面元素和在web页面元素中添加内容的方法；1.3任务实施1.3.1创建一个html文档作为本次任务的开发载体1)打开DreamWeaver，点击文件->新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档2)点击文件->保存，或直接按快捷键Ctrl+S将文档保存为“电子时钟.html”1.3.2制作电子时钟的显示面板；1)在body标签中间添加显示时间的容器——div标签，并将其id属性设为：“showtime”<div id="showtime"></div>➢div标签简介：<div> 是一个块级元素。

这意味着它的内容自动地开始一个新行。

实际上，换行是 <div> 固有的唯一格式表现。

可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容<div id="showtime">时间:<span id="localtime"></span>3)在body标签之前加入style标签，书写div和span的样式表<style type="text/css">#showtime{background:#333;color:#FFF;height:30px;line-height:30px;font-size:12px;text-indent:30px;width:250px;border:2px #999 solid;}#localtime{margin-left:10px;color:#CCC;}</style>4)书写实现电子时钟效果的JavaScript代码➢在body标签中添加脚本标签<script language="javascript"> </script>说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。

➢定义生成时间字符串的函数<script language="javascript">function showLocale(objD){var str;var hh = objD.getHours();var mm = objD.getMinutes();var ss = objD.getSeconds();var getweek=objD.getDay();if(getweek==1) week="星期一";else if(getweek==2) week="星期二";else if(getweek==3) week="星期三";else if(getweek==4) week="星期四";else if(getweek==5) week="星期五";else if(getweek==6) week="星期六";else week="星期日";str =(objD.getYear()) +"年";//如果不显示年份,只需把这行注释掉str+=(objD.getMonth() + 1) + "月" + objD.getDate() +"日";str+=week;//如果不显示星期,只需把这行注释掉if(hh<10) hh = '0' + hh;if(mm<10) mm = '0' + mm;if(ss<10) ss = '0' + ss;str += " " + hh + ":" + mm + ":" + ss;return(str);}</script>函数说明：功能——将传入的时间对象转换为特定格式的字符串参数——（objD）时间对象返回值——由时间对象转换来的字符串函数体的具体意义：var str;——定义变量，将来该变量的值就是由时间对象转换来的字符串var hh = objD.getHours();var mm = objD.getMinutes();var ss = objD.getSeconds();var getweek=objD.getDay();——获取时、分、秒和所传入日期是一个星期中的第几天if(getweek==1) week="星期一";else if(getweek==2) week="星期二";else if(getweek==3) week="星期三";else if(getweek==4) week="星期四";else if(getweek==5) week="星期五";else if(getweek==6) week="星期六";else week="星期日";——根据之前得到的日期计算应显示为星期几str =(objD.getYear()) +"年";str+=(objD.getMonth() + 1) + "月" + objD.getDate() +"日";——生成日期字符串str+=week;——加入星期字符串if(hh<10) hh = '0' + hh;if(mm<10) mm = '0' + mm;if(ss<10) ss = '0' + ss;——将时间字符串进行格式化，保证时、分、秒都由两位字符显示str += " " + hh + ":" + mm + ":" + ss;——加入完成格式化的时、分、秒return(str);——返回生成的字符串➢书写定时启动，获取当前时间的JavaScript脚本代码<script language="javascript">……function tick(){var today;today = new Date();document.getElementById("localtime").innerText = showLocale(today);window.setTimeout("tick()", 1000);}tick();</script>脚本说明：函数tick()的作用——定时启动，获取当前时间tick();——调用、激活tick()函数的脚本语句；tick()函数的函数体说明：var today;——定义变量，将来它的值便是当前系统时间today = new Date();——获取当前系统时间document.getElementById("localtime").innerText = showLocale(today);——调用showLocale()函数生成时间字符串，并将其作为内容加入span标签1.3.3运行电子时钟.html文档1.4能力拓展1.4.1JavaScript函数简介函数为程序设计人员提供了一个丰常方便的能力。

通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。

从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。

JavaScript函数可以封装那些在程序中可能要多次用到的模块。

并可作为事件驱动的结果而调用的程序。

从而实现一个函数把它与事件驱动相关联。

这是与其它语言不样的地方。

1.4.1.1JavaScript函数的意义➢将脚本编写为函数，就可以避免页面载入时执行该脚本。

➢函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

➢你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js 文件，那么甚至可以从其他的页面中调用）。

1.4.1.2创建函数的语法Function 函数名（参数,变元）{函数体;Return 表达式;}➢说明⏹当调用函数时,所用变量或字面量均可作为变元传递。

⏹函数由关键字Function定义。

⏹函数名：定义自己函数的名字。

⏹参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

⏹通过指定函数名（实参）来调用一个函数。

⏹必须使用Return将值返回。

⏹函数名对大小写是敏感的。

1.4.1.3函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。

那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。

1.4.2JavaScript的date对象简介Date中文为"日期"的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数➢Date对象构造函数Date对象具有多种构造函数。