文墨网
 
     
 


  


代码 >> 代码粗放 >> 网页各种按钮的代码    热   

网页各种按钮的代码
作者:文墨网    来源:本站原创    点击数:7421

网页各种按钮的代码

按钮是WINDOWIN中的一种基本控制部件,在各种编程语言中及应用程序中都少不了按钮的参与,在网页设计中也是如此,通过按钮可以完成很多任务,按钮使用及应用如下:

 一、按钮的基本使用

 一般的可视性网页制作工具中,都有方便的按钮填加工具,可直接在网页的合适位置填加按钮,如果你使用手工的网页制作方法,那么可用下面的源代码制作按钮,其中&#111nclick决定按下按钮的动作:

< form method=POST >
< p >< input type=button name=B1 &#118alue=
按钮 >< /p >
&#111nclick > < /p >
< /form >

 如果只使用单独的按钮,那么可省略form标签,只使用单纯的按钮代码,将节省按钮所占的网页空间:
< p >< input type=button name=B1 &#118alue=
按钮 >< /p >
&#111nclick > < /p >

 二、按钮的前景与背景控制
 绝大多数的人使用按钮时,都直接使用缺省的灰白色按钮有黑色的文字说明,其实按钮的背景和前景是可以随意改变的,请看下面的代码:

< form name=highlight >
< p align=center >< input type=
button &#118alue=变色按钮
style=background-color: rgb(255,0,0);
color: rgb(255,2550,0)
&#111nclick > < /p >
< /form >

 其中background-color控制背景色,color按钮前景色;
 三、按钮的图片背景

 按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景,下面代码中的mainbb1.jpg和mainbb2.jpg 分别为两个图像文件:

< script >
< !--
if (document.images){
after=new Image()
after.src=mainbb1.jpg}
function change2(image){
var el=event.srcElement
if (el.tagName==INPUT&&el.type==button)
event.srcElement.style.backgroundImage=
url+('+image+')}
//-- >
< /script >

< form &#111nmouseover=change2('mainbb1.jpg')
&#111nmouseout=change2('mainbb2.jpg') >
< p align=center >< input type=
button name=frme2
&#118alue=变化背景
style=background-color: rgb(192,192,192);
FONT-FAMILY: 宋体;
FONT-SIZE: 12pt;background-image: url('mainbb2.jpg')
class=initial &#111nclick=(h1.htm')
< br > < input type=submit
name=B1 &#118alue=固定背景
style=FONT-SIZE: 12pt; background-image:
url('mainbb1.jpg') >< /p >
< /form >

 四、按钮字号和字型控制
 按钮上显示的文字也可以随意改变风格,可以设置字体的字型和字号,请看以下代码:

< form name=highlight >
< p align=center >
< input type=button &#118alue=变化字号
style=background-color: rgb(192,192,192);
FONT-FAMILY: 宋体; FONT-SIZE: 9pt
color: rgb(255,2550,0)); &#111nclick >
< input type=button &#118alue=变化字号
style=background-color: rgb(192,192,192);
FONT-FAMILY: 宋体; FONT-SIZE: 12pt
color: rgb(255,2550,0)); &#111nclick >
< /p >
< /form >

 五、按钮鼠标移动变色
 上面已经介绍了按钮的颜色控制方法,加上鼠标事件的参与即可实现鼠标移动变色,下面是完整的代码:

< html >
< head >
< meta http-equiv=Content-Type
content=text/html; charset=gb_2312-80 >
< meta name=GENERATOR content=
Microsoft FrontPage Express 2.0 >
< title >变色按钮< /title >
< style >
.bigChange {color:blue; font-weight:bolder;
font-size:175%;letter-spacing:4px;
text-transform: uppercase; background:yellow}
.start {color:ff0000; background:c8ff4e}
.over {color:ffff00; background:0000ff}
< /style >
< /head >
< body bgcolor=#83E09C >
< p >
< script language=&#106avascript >
function highlightButton(s) {
if (INPUT==event.srcElement.tagName)
event.srcElement.className=s }
< /script > < /p >
< form name=highlight &#111nmouseover=
highlightButton('start')
&#111nmouseout=highlightButton('over') >
< p align=center >< input type=
button &#118alue=变色按钮); &#111nclick > < /p >
< /form >
< /body >
< /html >

 六、鼠标移动按钮变字号
 利用同样的方法,也可以使按钮在鼠标移动时变换字号,其实字号的变化也引起了按钮尺寸的变化,这一效果能够引起游览者的注意力,当然也可以合起来使字号和颜色同时发生变化:

< html >
< head >
< meta http-equiv=Content-Type
content=text/html; charset=gb_2312-80 >
< title >变号按钮< /title >
< style >
.bigChange {color:blue; letter-spacing:4px;
text-transform: uppercase; background:yellow}
.start {font-size:12pt}
.over {font-size:9pt}
< /style >
< /head >
< body bgcolor=#83E09C >
< script language=&#106avascript >
function highlightButton(s) {
if (INPUT==event.srcElement.tagName)
event.srcElement.className=s }
< /script >
< form name=highlight &#111nmouseover=
highlightButton('start')
&#111nmouseout=highlightButton('over') >
< p align=center >< input type=
button &#118alue=变号按钮); &#111nclick > < /p >
< /form >
< /body >
< /html >

 七、按钮上显示时钟
 按钮上显示的信息不仅可以事先定义成固定的字符串,而且可以随时更改,当然你也可以把一些动态的信息送到按钮上,下面是在按钮上显示走动的时钟的例子,效果非常好:

< script LANGUAGE=&#106avascript >
day = new Date();
miVisit = day.getTime();
function clock() {
dayTwo = new Date();
hrNow = dayTwo.getHours();
mnNow = dayTwo.getMinutes();
scNow = dayTwo.getSeconds();
miNow = dayTwo.getTime();
if (hrNow == 0) {hour = 12;ap = AM;
} else if(hrNow < = 11) {ap =
AM;hour = hrNow;
} else if(hrNow == 12) {ap = PM;hour = 12;
} else if (hrNow >= 13) {hour =
(hrNow - 12);ap = PM;}
if (hrNow >= 13) {hour = hrNow - 12;}
if (mnNow < = 9) {min = 0 + mnNow;}
else (min = mnNow)
if (scNow < = 9) {
secs = 0 + scNow;} else {secs = scNow;}
time = hour + : + min + : + secs + ap;
document.form.button.&#118alue = time;
self.status = time;
setTimeout('clock()', 1000);}
document.write(< form name=\form\ >
+ < input type=button &#118alue=\Click for info!\
+ name=button >< /form >);
&#111nError = null;
clock();
< /script >

 八、按钮控制显示源文件
 为了方便别人学习你的网页设计方法,在主页上放置一个按钮,按下该按钮后即自动显示源文件,是不是非常实用?代码如下,放到主页的正文区:

< form method=POST >
< p align=center >< input type=
button name=B1
&#118alue=显示源文件
&#111nclick=window.location=
view-source: +window.location.href >
< /p >
< /form >

 九、按钮链接站点
 这是按钮的一种最简单使用方法,按下按钮后转到一个站点:

< form >
< p >< input type=button
&#118alue=进入本站 > > >
&#111nclick=parent.location='http:
//www.webjx.com' >< /p >
< /form >

 十、按钮改变页面背景
 通过按钮可以实时修改页面的颜色,如果让其自动在两种颜色之间快速切换背景颜色,就形成了闪烁效果,下面的代码设置了两个按钮,分别演示修改背景和闪烁效果,代码放到主页的正文区:

< form >
< p >< input type=button &#118alue=背景色变换
&#111nclick=BgButton() >< /p >
< /form >
< script >function BgButton(){
if (document.bgColor=='#00ffff')
{document.bgColor='#ffffff';}
else{document.bgColor='#00ffff';} }
< /script >

< FORM >< INPUT TYPE=BUTTON &#118alue=闪烁
&#111nClick=blinkit(self) >< /FORM >
< SCRIPT LANGUAGE=&#106avascript >
function blinkOn(){
theWin.document.bgColor = 0000ff
nTimes++
JSCTimeOutID = window.setTimeout
(blinkOff(),50);}
function blinkOff(){
theWin.document.bgColor = FFFFFF
if (nTimes < 3)
JSCTimeOutID = window.setTimeout(blinkOn(),50);
else theWin.history.go(0)}
function blinkit(aWin){
nTimes = 0
theWin = aWin
JSCTimeOutID = window.setTimeout(blinkOn(),50);}
< /SCRIPT >

 十一、按钮刷新页面
 尽管浏览器上都有刷新按钮,但在主页中设置上则显得页面更为完善,尤其是那些经常需要刷新的场合,实现刷新有两种方法,代码分别如下,请放到主页的正文区:

代码一:
< form >
< p >< input type=button &#118alue=刷新按钮
&#111nclick=history.go(0) > < /p >
< /form >
代码二:
< form >
< p >< input type=button &#118alue=刷新按钮一
&#111nclick=ReloadButton() >< /p >
< /form >
< script language=&#106avascript >< !--
function ReloadButton(){location.href=该网页文件;}
// -- >< /script >

 十二、滚屏按钮
 按下按钮后,屏幕内容开始向上滚动,代码如下,但一页长度必须超出一屏,否则将看不到滚动效果:

< form >
< div align=center >
< center >< p >< input type=button &#118alue=
向下滚屏 &#111nClick=scrollit() > < /p >
< /center >< /div >
< /form >

< script Language=&#106avascript >
< !--
function scrollit(){
for (I=1; I< =500; I++){
parent.scroll(1,I) }}
//-- >
< /script >

 十三、加入书签按钮
 利用文字链接也可以实现加入书签功能,但使用按钮则更为醒目和直观,按下按钮后,则可把指定的站点加到游览器的书签中,代码如下:

< form >
< p >< input type=button
&#118alue=把本站加入书签
&#111nclick=window.external.addFavorite
('http://www.webjx.com/','网页教学网') >< /p >
< /form >

 十四、按钮字幕
 移动的字幕并不少见,比如在FRONTPAGE 中有现成的字幕生成器,而利用JAVA实现的走马灯效果更是花样百出,其实使用按钮制作字幕效果更为独特,按钮会随着字符的数量而发生尺寸变化,动态很强,以下为完成的代码,请放到网页的正文区:

< form name=form2 >
< p >< input type=submit name=banner &#118alue=Submit
&#111nClick=alert('你可以加上链接!') > < br >
< script language=&#106avascript >
var id,pause=0,position=0;
function banner() {
var i,k,msg=欢迎访问网页教学网;// increase msg
k=(30/msg.length)+1;
for(i=0;i< =k;i++) msg+= +msg;
document.form2.banner.&#118alue=msg.substring(position,position-30);
if(position++==msg.length) position=0;
id=setTimeout(banner(),60); }
banner();
< /script >< /p >
< /form >


  • 看了这篇,我也想发表一篇

  • 翻阅本站全部篇目 >> 翻阅本栏其它篇目:
  • >> 代码 >> 代码粗放 >> 网页各种按钮的代码

    评论(已关闭)】【打印此文】【关闭窗口

     最新5篇热力推荐文章
  • 刘宝军《自白》[2671]

  • 刘宝军《六月的质感----2012年学...[4757]

  • 《词综》(卷三)五代十国词七十...[17293]

  • 秋水霞衣《点绛唇·初临文墨网》...[3812]

  • 刘宝军《倴城,太阳落山了,灯光...[3968]

  •  相关文章
  • 青鸟《建网站三大问题:百度、谷歌收录/网站的推广/网站的盈利》[42229]

  • 图片翻页图片下有说明文字的网页代码[3302]

  • 我申请了免费空间,做好的网站系统已通过FTP上传,打开网址为什么显示网站正在建设中?[3363]

  • 站内搜索问题错误提示:Microsoft JET Database Engine 错误 '80040e14' 内存溢出 /wmr/web2/search.asp,行 324[10334]

  • 重新导向代码/改变本网址指向另一网址[3245]

  • 网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)【回复网友(已关闭)
        
  • 网友学生时代于2011-9-5 17:56:54发表评论说:
        谢谢老师!
    这对我太有帮助了,谢谢您!

  • 查看关于此文章的所有评论

    文墨网底部
     
     


     
    版权所有:文墨网 公安备案号13022402000106 冀ICP备17009013号-1 ©2002-2021  

    电话:13603371339 地址:河北唐山滦南倴城

    联系站长| 上传空间
    文墨网 | 网站制作文墨网(QQ7722629)| 程序友谊网络科技