javascript程序之向浏览者问好


“XXX欢迎您的光临”,当您在浏览主页时突然看到这样的问候语,您会有怎样的感觉?高兴,亲切,还是崇拜网页制作者。其实这种技术很简单,只要学过一些JavaScript语言的朋友,几乎都能实现这种的效果。下面笔者就为各位网页爱好者介绍两种向浏览者问好的JavaScript程序。

  在进入程序讲解前,我们先来整理一下编写的思路。若想在网页上出现“XXX欢迎您的光临”这样的问候语,首先必须要先设定一个输入对话框,以便让浏览者报上姓名。然后用JavaScript的语句或HTML语句在主页中建立一个层或文本框,把浏览者姓名写入其中,最后通过程序在主页上完好地显示出来。

  有了编程思路以后,接着便开始写程序。

  一.建立在层上的问候程序

源代码如下:
<script language="JavaScript">
function textprintdown() //自定义运行函数
{
textmesg=prompt("请输入您的名字,万分感谢!","") //设定用户输入框
document.write('<div id="Layer1" style="position:absolute; width:643px; height:115px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000"> ')//在网页上添加一个层
document.write('<div align="center">') //设定层的格式为居中
document.write('<font color=9900CC size=5 align=center face=隶书>') //设定层上的文字样式为蓝色、5号、居中、隶书字体
document.write('<b>') //设定层上的文字样式为粗体
document.write(textmesg,",欢迎您的光临!") //在层上写入用户框中的内容
document.write('</b>')
document.write('</font>')
document.write('</div>')
document.write('</div>')
}
textprintdown()//开始运行自定义函数
</script>

  细心的朋友看到这里后会发现其实这段程序并不复杂,只调用了JavaScript两个内置运行操作函数prompt()与document.write()。的确如此,这段问候程序确实是非常简单的,不过有一点必须注意,那就是对于层的设定千万不要随心所欲,否则的话用JavaScript添加的新层会遮盖住你原先网页上的内容。为此笔者建议大家,可以先用Dreamweaver网页编辑软件在网页空白处画上一个层,接着再把这个层代码写入document.write()的括号中。

  二.建立在文本框上的问候程序

程序源代码如下:
<script language="JavaScript">
function textprintdown()//自定义运行函数
{
var textmesg=prompt("请输入您的名字,万分感谢!","")//设置用户输入框
document.form1.textfield.value=textmesg+",欢迎您的光临!"//对文本框进行附值
}
textprintdown()//运行自定义操作函数
</script>

  这段程序在编写思路方面与前一个程序基本上是相同的,但在嵌入网页时有所区别。建立在层上的问候程序只要把程序代码照搬到网页源代码区中便可,而建立在文本框上的问候程序除了COPY源程序以外,还必须在网页源代码区中加入以下HTML代码:

<form name="form1"><input type="text"style="BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; BORDER-LEFT: 1px solid; BORDER-BOTTOM: 1px solid;border-color:white;font-size:12pt;font-family:宋体" name="textfield">

  其实网页问候程序不仅能用JavaScript编写,而且还能用ASP,PHP技术实现。虽然用后两种语言所编出的问候程序功能更完善些,但不可否认用JavaScript编写的问候程序相对要简单得多。

  好了,今天就讲到这里,希望您能喜欢这个程序。告诉大家一个秘密,在网页上出现“XXX欢迎您的光临”这样的问候语不仅能炫耀一下自己高超的网页制作水平,而且还能提高访问量呐!不信,呵呵……您不妨试试!

本文作者:
« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3