网页按钮使用的各种代码.docx

网页按钮使用的各种代码.docx

《网页按钮使用的各种代码.docx》由会员分享，可在线阅读，更多相关《网页按钮使用的各种代码.docx（8页珍藏版）》请在冰豆网上搜索。

网页按钮使用的各种代码

---按钮总的来说是WINDOWIN中最学用的也是最基本的一种控制部件，比如在各种编程语言中及应用程序中都少不了按钮的参与，在网页设计中也是如此，通过按钮可以完成很多任务，以下将全面讲解按钮使用技巧及应用实例。

----一、按钮的基本使用

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

"按钮">

onclick>

----如果只使用单独的按钮，那么可省略form标签，只使用单纯的按钮代码，将节省按钮所占的网页空间：

"按钮">

onclick>

----二、按钮的前景与背景控制

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

"button"value="变色按钮"

style="background-color:

rgb（255,0,0）;

color:

rgb（255,2550,0）"

onclick>

----其中background-color控制背景色，color按钮前景色；

----三、按钮的图片背景

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

"highlightButton（'start'）"

onmouseout="highlightButton（'over'）">

"button"value="变色按钮"）;onclick>

----六、鼠标移动按钮变字号

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

content="text/html;charset=gb_2312-80">

functionhighlightButton（s）{

if（"INPUT"==

}

"highlightButton（'start'）"

onmouseout="highlightButton（'over'）">

"button"value="变号按钮"）;onclick>

----七、按钮上显示时钟

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

day=newDate（）;

miVisit=（）;

functionclock（）{

dayTwo=newDate（）;

hrNow=（）;

mnNow=（）;

scNow=（）;

miNow=（）;

if（hrNow==0）{hour=12;ap="AM";

}elseif（hrNow<=11）{ap="

AM";hour=hrNow;

}elseif（hrNow==12）{ap="PM";hour=12;

}elseif（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;

=time;

=time;

setTimeout（'clock（）',1000）;}

（""

+"

\""

+"name=button>"）;

onError=null;

clock（）;

----八、按钮控制显示源文件

----为了方便别人学习你的网页设计方法，在主页上放置一个按钮，按下该按钮后即自动显示源文件，是不是非常实用？

代码如下，放到主页的正文区：

"button"name="B1"

value="显示源文件"

onclick="="

view-source:

"+">

----九、按钮链接站点

----这是按钮的一种最简单使用方法，按下按钮后转到一个站点：

----十、按钮改变页面背景

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