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

做网页经常用到的代码集合3

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

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>
其中的[url]http://www.butabon.com/Clock/clock_038.swf[/url]是时钟的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>
其中的[url]http://www.butabon.com/Clock/digiwide019.swf[/url]同样是时钟的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>
其中的[url]http://www.butabon.com/Clock/digital_019.swf[/url]同样是时钟的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、添加“跟随鼠标的文字”功能

<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、每次打开的时候自动在顶部副标题位置显示一条格言

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">
<!--
if (!document.layers&&!document.all)
event="test"
function helpor_net_show(current,e,text){

if (document.all&&document.readyState=="complete"){
document.all.tooltip2.innerHTML='<marquee style="border:1px solid #3399ff">'+text+'</marquee>'
document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10
document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10
document.all.tooltip2.style.visibility="visible"
}

else if (document.layers){
document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')
document.tooltip2.document.nstip.document.close()
document.tooltip2.document.nstip.left=0
currentscroll=setInterval("scrolltip()",100)
document.tooltip2.left=e.pageX+10
document.tooltip2.top=e.pageY+10
document.tooltip2.visibility="show"
}
}
function helpor_net_hide(){
if (document.all)
document.all.tooltip2.style.visibility="hidden"
else if (document.layers){
clearInterval(currentscroll)
document.tooltip2.visibility="hidden"
}
}

function scrolltip(){
if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)
document.tooltip2.document.nstip.left-=5
else
document.tooltip2.document.nstip.left=150
}
//-->
</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>部分加入：

function addbookmark()

{window.external.AddFavorite("http://www.yufeng21.com";,"宇风多媒体";}

//-->
</script>

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

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

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

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

63.如何在页面利用单击来关闭浏览窗口?
在<BODY></BODY>部分加入以下代码：

64.如何为页面设置访问口令?
有时候你需要为某一页设置密码，以让合适的人进来。在＜head＞＜/head＞部分加入：

在以上代码中,"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">

</form>

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

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

70.如何让浏览器正确显示word文件格式?
为了正确处理word等格式，你需要在HTML文件中设置好该文件类型，比如：

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

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

米扑博客

Most Valuable Package of Mobile Internet

标签云

打赏赞助

访客统计

分类 (24)

归档 (181)

友情链接