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

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可以实现网页上的音频和视频播放效果。

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

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

常用的网页特效代码

常用的网页特效代码1．文本向上循环滚动说明:文本自动向上循环滚动，鼠标放到上面还会暂时停下来。

果:代码:2．页面自动滚屏效果<body onLoad="scrollit()"><SCRIPT language="JavaScript"></SCRIPT>3．滚动的文字说明说明鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明效果把鼠标放上来试试代码4．飘动的字符跟随鼠标说明在鼠标后面跟着一串飘动的字符效果看看就知道啦！Array代码5．一群小点跟随鼠标说明跟随鼠标的一群小点，就象星星一样效果看看就知道啦！代码6．接触链接自动打开窗口说明鼠标放到链接上，就立刻弹出警告框效果试试Array代码7．数字时钟说明数字化的时钟效果现在时刻：12:07:54代码8．显示停留的时间说明显示他人在页面停留的时间，而且可以作出提醒效果代码 9．有影子的数字时钟说明这个时钟是有影子的，而且还在不停地走着呢效果12:09:3612:09:36代码10．打字效果说明:文字在状态栏上从左往右一个一个地显示，就象你打出的字一样效果:看看状态栏！Array代码:11．文字不停闪烁说明:一段文字在状态栏上不停跳动显示，可以作为提示信息效果:看看状态栏！代码:12．图象大小自动变化说明:把一张图片变形扭曲成各种不同的长宽，非常好玩效果:代码:13．漫天飞雪说明:漫天飞雪效果:看到了吗？代码:14．自由移动的图片(一)说明:自由移动的图片效果:看到了吗？Array代码:再把<body>改为：说明:图片在页面内随意飘动，遇到边界还会反弹。

效果: 看到了吗？代码:16．状态栏里的动态欢迎语说明浏览器的状态栏里出现一个字接一个字往左跑的欢迎语！效果看看状态栏：）代码17．背景色变换按钮:18．去掉超链接的下划线说明有时候看着那超链接的下划线挺讨厌的，把下面这段代码放到网页源代码<head>与</head>之间，下划线就无影无踪啦！注意，网页的<body>标签里不能再有link之类的属性，否则本效果会失效！效果试试就知道啦！代码19．给页面加保护说明如果你不想让辛辛苦苦做出来的东西被人轻易地Copy&Paste走的话，不妨在HTML里加入下面这段代码。

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 系列的相关属性来获取元素可视区的相关信息。

如何使用JavaScript创建动态网页效果

如何使用JavaScript创建动态网页效果JavaScript是一种广泛应用于网页开发中的脚本语言，通过与HTML和CSS相结合，可以为网页添加各种动态效果，从而提升用户体验。

本文将介绍一些常见的JavaScript技巧和方法，帮助读者学习如何使用JavaScript创建各种动态网页效果。

一、实现图片轮播效果图片轮播是一种常见的网页效果，可以显示多张图片，并自动切换或通过按钮手动切换。

使用JavaScript可以很容易地实现这个效果。

首先，需要在HTML中设置一个包含图片的容器，如下所示：```html<div id="slider"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"><img src="image3.jpg" alt="Image 3"></div>```然后，在JavaScript中编写代码来实现轮播效果：```javascriptvar slider = document.getElementById("slider");var images = slider.getElementsByTagName("img");var currentImage = 0;function changeImage() {images[currentImage].style.display = "none";currentImage = (currentImage + 1) % images.length;images[currentImage].style.display = "block";}setInterval(changeImage, 3000);```上述代码首先获取了图片容器和所有的图片元素，然后定义了一个用于切换图片的函数changeImage。

用JavaScript制作页面特效

⽤JavaScript制作页⾯特效1.Window对象名称history：有关客户访问过的URL的信息location：有关当前URL的信息screen：有关客户端的屏幕和显⽰性能的信息常⽤⽅法prompt()：弹出输⼊框alert()：弹出警告框confirm()：弹出确认对话框close()：关闭浏览器窗⼝open()：window.open("弹出窗⼝的url","窗⼝名称","窗⼝特征",)setTimeout()：计时setInterval()：计时setTimeout和setInterval两者区别：setTimeout是定时程序，在什么时间做什么事情，setInterval是表⽰间隔⼀定时间反复执⾏某操作。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript">function open_adv() {window.open("adv.html");}function open_fix_adv() {window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resize=0");}function fullscreen() {window.open("adv.html", "", "fullscreen=yes");}function close_plan() {window.close();}</script></head><body><input type="button" value="弹出窗⼝" onclick="open_adv();" /><br /><input type="button" value="弹出固定⼤⼩的窗⼝，并且没有菜单栏等" onclick="open_fix_adv();" /><br /><input type="button" value="全屏显⽰" onclick="fullscreen();" /><br /><input type="button" value="关闭窗⼝" onclick="close_plan();" /></body></html> 运⾏结果点击“弹出窗⼝"后点击“弹出固定⼤⼩的窗⼝，并没有菜单栏等”后点击“全屏显⽰”后点击“关闭窗⼝”后，就可以关闭这个窗⼝了2.history对象的常⽤⽅法back()：返回上⼀页forward()：前进⼀页go()：跳到指定页history.back();后退⼀页history.go(-1);后退1页，相当于“后退”按钮，等价于back()⽅法3.location对象的常⽤属性和常⽤⽅法常⽤属性href：设置或返回url如果没有登录，则跳转到登录页⾯location.href="login.html";常⽤⽅法reload()：重新加载replace()：⽤新的⽂档替换当前⽂档4.Document对象的常⽤⽅法referrer：返回载⼊当前⽂档的⽂档的URLURL：返回当前⽂档的URL<!DOCTYPE html><html><head><meta charset="utf-8" /><title>领奖页⾯</title></head><body><img src="img/d1.jpg" alt="中奖" /><h1><a href="taobao.html">淘宝领奖了</a></h1></body></html><!DOCTYPE html><html><head><meta charset="utf-8"/><title>奖品显⽰页⾯</title><script type="text/javascript">document.write("链接来源：" + document.referrer + "<br/>");document.write("当前⽹页⽂档的URL：" + document.URL);</script></head><body><h2>淘宝⽹的商品购买页⾯：笔记本！数码相机！</h2></body></html>function changeLink(){document.getElementById("node").innerHTML="搜狐";}function showAllInput(){var aInput=document.getElementsByTagName("input");var sStr="";for(var i=0;i<aInput.length;i++){sStr+=aInput[i].value+"<br />";}document.getElementById("s").innerHTML=sStr;}function showOneInput(){var aInput=document.getElementsByName("season");var sStr="";for(var i=0;i<aInput.length;i++){sStr+=aInput[i].value+"<br />";}document.getElementById("s").innerHTML=sStr;}运⾏结果：第⼀个HTML代码显⽰的页⾯点击“淘宝领奖了”之后，链接来源现实的是⽤document.referrer返回载⼊当前⽂档的⽂档的URL 当前⽹页⽂档的URL是使⽤document.URL返回当前⽂档的URL第⼆个HTML显⽰的结果如果没有前⼀个⽂档，链接来源不会返回载⼊当前⽂档的⽂档的URL，会显⽰空⽩只会返回当前⽂档的URLgetElementById()：返回对拥有指定id的第⼀个对象的引⼊getElementById()：返回带有指定名称的对象的集合getElementById()：返回带有指定标签名的对象的集合write()：向⽂档写⼊HTML表达式或JavaScript代码5.制作复选框全选/全不选效果分析：设置同名的复选框组，“全选”复选框设置唯⼀ID利⽤getElementsByName()访问同名复选框组使⽤getElementById()访问“全选”复选框根据“全选”复选框的状态，设置同名复选框勾选状态（checked属性）<!DOCTYPE html><html><head><meta charset="utf-8"/><title>全选/全不选效果</title><style type="text/css">.bg {background-image: url(img/list_bg.gif);background-repeat: no-repeat;width: 730px;}td {text-align: center;font-size: 13px;line-height: 25px;}body {margin: 0}</style><script type="text/JavaScript">function check(){var oInput=document.getElementsByName("product");for (var i=0;i<oInput.length;i++){if (document.getElementById( "all").checked==true){ oInput[i].checked=true;} else {oInput[i].checked=false;}}}</script></head><body><table border="0" cellspacing="0" cellpadding="0" class="bg"><form action="" method="post"><tr><td style="height:40px;"> </td><td> </td><td> </td><td> </td></tr><tr style="font-weight:bold;"><td><input id="all" type="checkbox" value="全选" onclick="check();"/>全选</td><td>商品图⽚</td><td>商品名称/出售者/联系⽅式</td><td>价格</td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed"/></td></tr><tr><td><input name="product" type="checkbox" value="1"/></td><td><img src="img/list0.jpg" alt="alt"/></td><td>杜⽐环绕，家庭影院必备，超真实享受<br />出售者：ling112233<br /><img src="img/online_pic.gif" alt="alt"/>  <img src="img/list_tool_fav1.gif" alt="alt"/>收藏</td><td>⼀⼝价<br /> 2833.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed"/></td></tr><tr><td><input name="product" type="checkbox" value="2"/></td><td><img src="img/list1.jpg" alt="alt"/></td><td>NVDIA 9999GT 512MB 256bit极品显卡，不容错过<br />出售者：aipiaopiao110 <br /><img src="img/online_pic.gif" alt="alt"/>  <img src="img/list_tool_fav1.gif" alt="alt"/>收藏</td><td>⼀⼝价<br /> 6464.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed"/></td></tr><tr><td><input name="product" type="checkbox" value="3"/></td><td><img src="img/list2.jpg" alt="alt"/></td><td>精品热卖：⾼清晰，30⼨等离⼦电视<br />出售者：阳光的挣扎<br /><img src="img/online_pic.gif" alt="alt"/>  <img src="img/list_tool_fav1.gif" alt="alt"/>收藏</td><td>⼀⼝价<br /> 18888.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed"/></td></tr><tr><td><input name="product" type="checkbox" value="4"/></td><td><img src="img/list3.jpg" alt="alt"/></td><td>Sony索尼家⽤最新款笔记本<br />出售者：疯狂的镜⽆<br /><img src="img/online_pic.gif" alt="alt"/>  <img src="img/list_tool_fav1.gif" alt="alt"/>收藏</td><td>⼀⼝价<br /> 5889.0 </td></tr><tr><td colspan="4"><hr style="border:1px #CCCCCC dashed"/></td></tr></form></table></body></html>运⾏结果全选全不选6.创建Date对象var ⽇期实例=new Date(参数);var tdate=new Date();返回当前⽇期及时间document.write(today);7.Date对象的常⽤⽅法getFullYear()：获取年份getMonth()：获取⽉份（0-11）getDate()：获取号数（1-31）getHours()：获取⼩时数（0-23）getMinutes()：获取分钟数（0-59）getSeconds()：获取秒数（0-59）getDay()：获取星期⼏（0-6）<!DOCTYPE html><html><head><meta charset="UTF-8"><title>星期</title><script type="text/javascript" src="js/xingqi.js"></script></head><body></body></html>　JavaScript代码　var today=new Date();var weekday=today.getDate();document.write("今天星期"+weekday);switch(weekday) {case 5:document.write(" finally Day!");break;case 6:document.write(" super Day!");break;case 0:document.write(" sleepy Day!");break;default:document.write(" I'm looking forward to this weeked.");} 运⾏结果8.今天遇到的问题今天遇到⼀个问题⽤css怎么改变下拉列表select框的默认样式，我百度了⼀下，解决了这个问题代码<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#parent{background:#CCCCCC no-repeat;width: 100px;height: 30px;overflow: hidden;}#parent select{background: transparent;//背景设置为透明border: none;padding-left: 10px;width: 120px;height: 100%;}</style></head><body><div id="parent"><select><option>今天星期⼀</option><option>今天星期⼆</option><option>今天星期三</option></select></div></body></html> 我们需要为其添加⼀个⽗容器，容器是⽤来覆盖⼩箭头的，然后为select添加⼀个向右的⼩偏移或者宽度⼤于⽗级元素。

网页飘雪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。

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>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对象具有多种构造函数。

new Date()new Date(milliseconds)new Date(datestring)new Date(year, month)new Date(year, month, day)new Date(year, month, day, hours)new Date(year, month, day, hours, minutes)new Date(year, month, day, hours, minutes, seconds)new Date(year, month, day, hours, minutes, seconds, microseconds) Date对象构造函数参数说明⏹milliseconds - 距离JavaScript内部定义的起始时间1970年1月1日的毫秒数⏹datestring - 字符串代表的日期与时间。