您的位置：首页 > 编程语言

【经典之作】做网页时经常用到的代码集合（3）

2014-10-31 11:30 337 查看

转载：http://blog.csdn.net/ithomer/article/details/5270600

50、添加“天气预报”功能

<p><b>今日天气</b><br>

<center><iframe width=157 height=240 frameborder=0 scrolling=NO src='http://appnews.qq.com/cgi-bin/news_qq_search?city='></iframe></center>

51、增加flash精美时钟

发现了很多绚丽的FLASH钟表,免费,没有广告的可以使用,颜色也可选择,安装也方便。

你可以预览后选择自己喜欢的。

刻度时钟：

<EMBED SRC=http://www.butabon.com/Clock/clock_038.swf WIDTH=150 HEIGHT=150 wmode=transparent quality=high loop=true menu=false>

其中的http://www.butabon.com/Clock/clock_038.swf是时钟的flash地址，可以在IE中预览，其中的038可以替换成000-039之间或者051-059之间的任何一个数字(全看个人喜好，呵呵)

数字时钟：

第一种风格：

<EMBED SRC=http://www.butabon.com/Clock/digiwide019.swf WIDTH=150 HEIGHT=15 wmode=transparent quality=high loop=true menu=false>

其中的http://www.butabon.com/Clock/digiwide019.swf同样是时钟的flash地址，可以在IE中预览，其中的019可以替换成000-019之间之间的任何一个数字(同样全看个人喜好，呵呵)

第二种风格：

<EMBED SRC=http://www.butabon.com/Clock/digital_019.swf WIDTH=150 HEIGHT=90 wmode=transparent quality=high loop=true menu=false>

其中的http://www.butabon.com/Clock/digital_019.swf同样是时钟的flash地址，可以在IE中预览，其中的019可以替换成000-019之间之间的任何一个你可以在IE中可以成功预览的数字(请自己测试)。

52、添加“状态栏文本”功能

<script language=java-script>

var MESSAGE="欢迎您亲自光临蓝色梦想BLOG "

var POSITION=100

var DELAY=10

var scroll=new statusMessageObject()

function statusMessageObject(p,d)

{

this.msg =MESSAGE

this.out =" "

this.pos =POSITION

this.delay=DELAY

this.i=0

this.reset=clearMessage

}

function clearMessage()

{

this.pos=POSITION

}

function scroller()

{

for (scroll.i=0;scroll.i<scroll.pos;scroll.i++){

scroll.out += " "}

if (scroll.pos >= 0)

scroll.out += scroll.msg

else scroll.out=scroll.msg.substring(-scroll.pos,scroll.msg.length)

window.status=scroll.out

scroll.out=" "

scroll.pos--

if (scroll.pos < -(scroll.msg.length)) {

scroll.reset()}

setTimeout('scroller()',scroll.delay)

}

function snapIn(jumpSpaces,position)

{

var msg = scroll.msg

var out = ""

for(var i=0; i<position; i++)

{

out+= msg.charAt(i)

}

for(i=1;i<jumpSpaces;i++)

{

out += " "

}

out+=msg.charAt(position)

window.status = out

if(jumpSpaces <= 1)

{

position++

if(msg.charAt(position) == ' ')

{

position++

}

jumpSpaces = 100-position

}

else if (jumpSpaces > 3)

{

jumpSpaces *= .75

}

else

{

jumpSpaces--

}

if(position != msg.length)

{

var cmd = "snapIn(" + jumpSpaces + "," + position + "";

scrollID = window.setTimeout(cmd,scroll.delay);

}

else

{

window.status=""

jumpSpaces=0

position=0

cmd = "snapIn(" + jumpSpaces + "," + position + "";

scrollID = window.setTimeout(cmd,scroll.delay);

return false

}

return true

}

snapIn(100,0);

</script>

53、添加“跟随鼠标的文字”功能

<style type="text/css">

.spanstyle

{

position:absolute;

visibility:visible;

top:-500px;

font-size:10pt;

color: #0000ff;

font-weight:bold;

}

</style>

<script>

var x,y

var step=15

var flag=0

var message="程序不过是梦"

message=message.split(""

var xpos=new Array()

for (i=0;i<=message.length;i++)

{

xpos=-500

}

var ypos=new Array()

for (i=0;i<=message.length;i++)

{

ypos=-500

}

function handlerMM(e)

{

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX-5

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY-75

flag=1

}

function makesnake()

{

if (flag==1 && document.all)

{

for (i=message.length; i>=1; i--)

{

xpos=xpos[i-1]+step

ypos=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length; i++)

{

var thisspan = eval("span"+(i)+".style"

thisspan.posLeft=xpos

thisspan.posTop=ypos

}

}

else if (flag==1 && document.layers)

{

for (i=message.length; i>=1; i--)

{

xpos=xpos[i-1]+step

ypos=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length; i++)

{

var thisspan = eval("document.span"+i)

thisspan.left=xpos

thisspan.top=ypos

}

}

var timer=setTimeout("makesnake()",30)

}

</script>

<body onLoad="makesnake()" >

<script>

for (i=0;i<=message.length;i++)

{

document.write("<span id='span"+i+"'class='spanstyle'>"

document.write(message)

document.write("</span>"

}

if (document.layers)

{

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

</script>

54、每次打开的时候自动在顶部副标题位置显示一条格言

<script language="java-script">

var word=new Array();

word[0]="当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。"

word[1]="每一个成功者都有一个开始。勇于开始，才能找到成功的路。"

word[2]="与其临渊羡鱼，不如退而结网。"

word[3]="若不给自己设限，则人生中就没有限制你发挥的藩篱。"

word[4]="绊脚石乃是进身之阶。"

word[5]="即使爬到最高的山上，一次也只能脚踏实地地迈一步。"

word[6]="积极思考造成积极人生，消极思考造成消极人生。"

word[7]="人之所以有一张嘴，而有两只耳朵，原因是听的要比说的多一倍。"

word[8]="别想一下造出大海，必须先由小河川开始。"

word[9]="即使是不成熟的尝试，也胜于胎死腹中的策略。"

word[10]="积极的人在每一次忧患中都看到一个机会，而消极的人则在每个机会都看到某种忧患。"

word[11]="如果我们想要更多的玫瑰花，就必须种植更多的玫瑰树。"

word[11]="世上没有绝望的处境，只有对处境绝望的人。"

word[12]="当你感到悲哀痛苦时，最好是去学些什么东西。学习会使你永远立于不败之地。"

word[13]="世界上那些最容易的事情中，拖延时间最不费力。"

word[14]="没有口水与汗水，就没有成功的泪水。"

word[15]="如果你希望成功，以恒心为良友，以经验为参谋，以小心为兄弟，以希望为哨兵。"

word[16]="大多数人想要改造这个世界，但却罕有人想改造自己。"

word[17]="未曾失败的人恐怕也未曾成功过。"

word[18]="人生伟业的建立，不在能知，乃在能行。"

word[19]="挫折其实就是迈向成功所应缴的学费。"

word[20]="任何的限制，都是从自己的内心开始的。"

word[21]="忘掉失败，不过要牢记失败中的教训。"

word[22]="不是境况造就人，而是人造就境况。"

document.all("header".innerHTML="<a href='nzhitao.blogchinese.com'><img src=uploadfile/200534145731970.gif' border=0 alt='蓝色梦想align=right /></a><span>"+document.all("Header1_HeaderTitle".outerHTML+"<br/> "+word[parseInt(Math.random()*22)]+"</span>"

</script>

55.图片跟随着鼠标，最好把图片做成透明的，那样效果更好

<SCRIPT LANGUAGE="javascript">

var image="../images/helpor.gif"

var newtop=15

var newleft=15

if (navigator.appName == "Netscape") {

layerStyleRef="layer.";

layerRef="document.layers";

styleSwitch="";

}

else

{

layerStyleRef="layer.style.";

layerRef="document.all";

styleSwitch=".style";

}

function helpor_net() {

layerName = 'iit'

eval('var curElement='+layerRef+'["'+layerName+'"]')

eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')

eval('curElement'+styleSwitch+'.visibility="visible"')

eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')

eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')

eval('height=curElement'+styleSwitch+'.height')

eval('width=curElement'+styleSwitch+'.width')

width=parseInt(width)

height=parseInt(height)

if (event.clientX > (document.body.clientWidth - 5 - width))

{

newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width

}

else

{

newleft=document.body.scrollLeft + event.clientX

}

eval('curElement'+styleSwitch+'.pixelLeft=newleft')

if (event.clientY > (document.body.clientHeight - 5 - height))

{

newtop=document.body.clientHeight + document.body.scrollTop - 5 - height

}

else

{

newtop=document.body.scrollTop + event.clientY

}

eval('curElement'+styleSwitch+'.pixelTop=newtop')

}

document.onmousemove = helpor_net;

if (navigator.appName == "Netscape") {

}

else

{

document.write('<div ID="OuterDiv">')

document.write('<img ID="iit" src="'+image+'" STYLE="position:absolute;TOP:20pt;LEFT:20pt;Z-INDEX:20;visibility:hidden;">')

document.write('</div>')

}

</script>

56.网页动态背景

透明的FLASH背景代码,红色网址是你所选的背景图片的地址

<DIV id=Layer0

style="z-index: 0; left: 50; visibility: visible; width: 771; position: absolute; top: 50; height: 539">

<OBJECT

codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5 ,0,0,0

height=639 width=739 classid=clsid27CDB6E-AE6D-11cf-96B8-444553540000>

<param name="_cx" value="17992">

<param name="_cy" value="9260">

<param name="FlashVars" value="-1">

<param name="Movie" value="http://midea808.com/swf/5.swf">

<param name="Src" value="http://midea808.com/swf/5.swf">

<param name="WMode" value="Transparent">

<param name="Play" value="-1">

<param name="Loop" value="-1">

<param name="Quality" value="High">

<param name="SAlign" value>

<<param name="Menu" value="-1">

<param name="Base" value>

<param name="AllowScriptAccess" value="always">

<param name="Scale" value="ShowAll">

<param name="DeviceFont" value="0">

<param name="EmbedMovie" value="0">

<param name="BGColor" value>

<param name="SWRemote" value>

<embed src="http://midea808.com/swf/5.swf" quality="high" wmode="transparent" width="642" height="480" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi? P1_Prod_Version=ShockwaveFlash" ;;;;>

</OBJECT>

57.鼠标放到链接上就会出现一个说明框，里面有滚动的文字说明

<a href="http://www.helpor.net" target="_blank" onMouseOver="helpor_net_show(this,event,'看到了吧？')" onMouseOut="helpor_net_hide()">把鼠标放上来试试</a>

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:seashell">

<layer name="nstip" width="1000px" bgColor="seashell"></layer>

</div>

<SCRIPT language="javascript">



</SCRIPT>

58.在鼠标后面跟着一串飘动的字符

<style type="text/css">

.spanstyle {

COLOR: #00cccc; FONT-FAMILY: 宋体; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY: visible

}

</style>

<script>

var x,y

var step=18

var flag=0

var message="★网页特效世界欢迎你的光临!"

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()

for (i=0;i<=message.length-1;i++) {

ypos[i]=-200

}

function handlerMM(e){

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY

flag=1

}

function www_helpor_net() {

if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("www_helpor_net()",30)

}

for (i=0;i<=message.length-1;i++) {

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

www_helpor_net();

// -->

</script>

59。点击鼠标右键，收藏夹就会自动打开，也等于是禁止了右键

<script language="javascript1.2">

if (document.all)

document.body.onmousedown=new Function("if (event.button==2||event.button==3)window.external.addFavorite('http://www.helpor.net','网页特效集锦')")

</script>

60.制作动态页面的步骤是怎样的?

第一步：设计页面及寻找页面需要的材料；第二步：完成普通页面的制作，此时无须涉及动态主页内容；第三步：为页面文字增加层叠样式表，以改变文字颜色，链接等；第四步：为页面增加交互性内容，如cgi,javascirpt,activeX控件等，这是把页面动态的关键；第五步：测试动态页面以适应更多浏览器；第六步：发布动态页面并在上面标明该页是动态页面(dhtml)。

61.如何让访问者单击加入站点书签?

总希望访问者能能把你的站点，加入到他们的书签里，这里有个好办法：

在<HEAD></HEAD>部分加入：

<script language="javascript">

</script>

然后在<BODY></BODY>部分加入：

<script language="javascript">

</script>

62.是否可以利用大写体来书写HTML标签元素?

对于大多数HTML标签元素,你可以利用大写体或小写体及两者的混合体来书写标签元素。比如：

<html></html>和<HTML></HTML>同等有效。

但如果是特殊字符的标签元素，你只能使用小写体。比如版权的字符的标签元素是：?，如果写成?；，那么页面将完全显示?；。

63.如何在页面利用单击来关闭浏览窗口?

在<BODY></BODY>部分加入以下代码：

<a href="javascript:window.close()">关闭窗口</a>

64.如何为页面设置访问口令?

有时候你需要为某一页设置密码，以让合适的人进来。在＜head＞＜/head＞部分加入：

<script language="javascript">

</script>

在以上代码中,"cnshell"就是正确的密码。"cnshell.htm"是当输入正确密码后链接的页面。这种设置口令的方法并不安全，因为只要访问者查看页面源代码就能知道设置的密码了。

65.如何为访问者设置正确的软件下载链接?

与其它链接一样，都使用<a></a>标签。但对于软件下载链接，你需要这样设置：

<a href="/cnshell.zip">Download cnshell.zip (188kb)</a>

66.如何删除图片链接的蓝色边框?

如果我们设置了图片为一个链接，会发现图片四周出现了蓝色边框。要删除边框，需要在图片标签里加上border="0"。如：<img src="/cnshell.jpg" border="0">

67.如何为链接提供一个按钮?

<form ACTION="cnshell.htm" METHOD="GET">

<p><input TYPE="submit" value="单击这里" NAME="cnshell"></p>

</form>

68.如何为页面增加一个计数器?

这个问题对于初上网的人实在是个头痛的事情，因为他们发现在利用FrontPage98增加计数器后，发现根本都不起作用。计数器需要服务器CGI的支持，不能由本地的电脑自行设置。所以，如果你的站点需要计数器，请到以下这个最有名的计数器提供商申请吧：http://www.linkexchange.com/

69.如何知道站点的流量来至那里?

如果你拥有站点服务器的管理权，那么这是个很简单的问题，查查服务器日志就可以了。但目前你没有那权力，不过可以由第三方提供流量数据。易数是个不错的选择，链接到站点http://best.netease.com/申请，然后把代码加入到页面即可。当你想知道流量时，单击易数图标，在统计页面中，单击分析即可。

70.如何让浏览器正确显示word文件格式?

为了正确处理word等格式，你需要在HTML文件中设置好该文件类型，比如：

<meta http-equiv="Content-Type" content="Application/msword">

还有其它经常设置的文件类型：

Application/msword Microsoft Word Document application/pdf PDF Documentapplication/wordperfect6.0 WordPerfect 6.0 Documentapplication/zip ZIP archiveaudio/x-wav WAV audio formataudio/midi MIDI audio formataudio/x-pn-realaudio RealAudioimage/gif GIF image formatimage/jpeg
JPEG image formatimage/png PNG image formattext/html HTML documenttext/plain Plain textvideo/mpeg MPEG video formatvideo/quicktime QuickTime video formatvideo/x-msvideo AVI video format

转载声明：本文转自 http://bbs.bccn.net/thread-195956-1-1.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航