网页按钮使用的各种代码

网页按钮使用的各种代码 按钮总的来说是 WINDOWIN 中最学用的也是最基本的一种控制部件 比如在各种编程语 言中及应用程序中都少不了按钮的参与 在网页设计中也是如此 通过按钮可以完成很多任 务 以下将全面讲解按钮使用技巧及应用实例 一 按钮的基本使用 一般的可视性网页制作工具中 都有方便的按钮填加工具 可直接在网页的合适位置 填加按钮 如果你使用手工的网页制作方法 那么可用下面的源代码制作按钮 其中 onclick 决定按下按钮的动作 onclick 如果只使用单独的按钮 那么可省略 form 标签 只使用单纯的按钮代码 将节省按钮 所占的网页空间 onclick 二 按钮的前景与背景控制 绝大多数的人使用按钮时 都直接使用缺省的灰白色按钮有黑色的文字说明 其实按 钮的背景和前景是可以随意改变的 请看下面的代码 其中 background color 控制背景色 color 按钮前景色 三 按钮的图片背景 按钮不仅可以修改前景色和背景颜色 而且可以使用图片背景 下面的代码分别演示 了固定的背景图片效果和动态的图片背景效果 动态的效果即在鼠标放到按钮上时 按钮的 背景是另外一种图像背景 而鼠标离开时则恢复原来的图片背景 下面代码中的 mainbb1 jpg 和 mainbb2 jpg 分别为两个图像文件 2 input type button name frme2 value 变化背景 style background color rgb 192 192 192 FONT FAMILY 宋体 FONT SIZE 12pt background image url mainbb2 jpg class initial onclick h1 htm 四 按钮字号和字型控制 按钮上显示的文字也可以随意改变风格 可以设置字体的字型和字号 请看以下代码 3 五 按钮鼠标移动变色 上面已经介绍了按钮的颜色控制方法 加上鼠标事件的参与即可实现鼠标移动变色 下面是完整的代码 变色按钮 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 function highlightButton s if INPUT event srcElement tagName event srcElement className s 六 鼠标移动按钮变字号 利用同样的方法 也可以使按钮在鼠标移动时变换字号 其实字号的变化也引起了按 钮尺寸的变化 这一效果能够引起游览者的注意力 当然也可以合起来使字号和颜色同时发 生变化 4 变号按钮 bigChange color blue letter spacing 4px text transform uppercase background yellow start font size 12pt over font size 9pt function highlightButton s if INPUT event srcElement tagName event srcElement className s 七 按钮上显示时钟 按钮上显示的信息不仅可以事先定义成固定的字符串 而且可以随时更改 当然你也 可以把一些动态的信息送到按钮上 下面是在按钮上显示走动的时钟的例子 效果非常好 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 13 hour hrNow 12 ap PM if hrNow 13 hour hrNow 12 if mnNow 9 min 0 mnNow 5 else min mnNow if scNow 9 secs 0 scNow else secs scNow time hour min secs ap document form button value time self status time setTimeout clock 1000 document write onError null clock 八 按钮控制显示源文件 为了方便别人学习你的网页设计方法 在主页上放置一个按钮 按下该按钮后即自动 显示源文件 是不是非常实用 代码如下 放到主页的正文区 九 按钮链接站点 这是按钮的一种最简单使用方法 按下按钮后转到一个站点 onclick parent location http 十 按钮改变页面背景 通过按钮可以实时修改页面的颜色 如果让其自动在两种颜色之间快速切换背景颜色 就形成了闪烁效果 下面的代码设置了两个按钮 分别演示修改背景和闪烁效果 代码放到 主页的正文区 function BgButton if document bgColor 00ffff document bgColor ffffff else document bgColor 00ffff 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 十一 按钮刷新页面 尽管浏览器上都有刷新按钮 但在主页中设置上则显得页面更为完善 尤其是那些经 常需要刷新的场合 实现刷新有两种方法 代码分别如下 请放到主页的正文区 代码一 代码二 7 十二 滚屏按钮 按下按钮后 屏幕内容开始向上滚动 代码如下 但一页长度必须超出一屏 否则将 看不到滚动效果 function scrollit for I 1 I 十三 加入书签按钮 利用文字链接也可以实现加入书签功能 但使用按钮则更为醒目和直观 按下按钮后 则可把指定的站点加到游览器的书签中 代码如下 十四 按钮字幕 移动的字幕并不少见 比如在 FRONTPAGE 中有现成的字幕生成器 而利用 JAVA 实现 的走马灯效果更是花样百出 其实使用按钮制作字幕效果更为独特 按钮会随着字符的数量 而发生尺寸变化 动态很强 以下为完成的代码 请放到网页的正文区 var id pause 0 position 0 function banner var i k msg 欢迎访问网页教学网 increase msg k 30 ms