网页按钮使用的各种代码文档格式.docx
- 文档编号:20348504
- 上传时间:2023-01-22
- 格式:DOCX
- 页数:8
- 大小:17.51KB
网页按钮使用的各种代码文档格式.docx
《网页按钮使用的各种代码文档格式.docx》由会员分享,可在线阅读,更多相关《网页按钮使用的各种代码文档格式.docx(8页珍藏版)》请在冰豆网上搜索。
inputtype=
value="
变色按钮"
style="
background-color:
rgb(255,0,0);
color:
rgb(255,2550,0)"
----其中background-color控制背景色,color按钮前景色;
----三、按钮的图片背景
----按钮不仅可以修改前景色和背景颜色,而且可以使用图片背景,下面的代码分别演示了固定的背景图片效果和动态的图片背景效果,动态的效果即在鼠标放到按钮上时,按钮的背景是另外一种图像背景,而鼠标离开时则恢复原来的图片背景,下面代码中的和分别为两个图像文件:
script>
!
--
if{
after=newImage()
="
}
functionchange2(image){
varel=
if=="
INPUT"
&
=="
)
url"
+"
('
+image+"
'
)"
igChange{color:
blue;
font-weight:
bolder;
font-size:
175%;
letter-spacing:
4px;
text-transform:
uppercase;
background:
yellow}
.start{color:
ff0000;
c8ff4e}
.over{color:
ffff00;
0000ff}
/style>
/head>
bodybgcolor="
#83E09C"
scriptlanguage="
JAVASCRIPT"
functionhighlightButton(s){
if("
==
}
/script>
onmouseover=
highlightButton('
start'
onmouseout="
over'
);
onclick>
/body>
/html>
----六、鼠标移动按钮变字号
----利用同样的方法,也可以使按钮在鼠标移动时变换字号,其实字号的变化也引起了按钮尺寸的变化,这一效果能够引起游览者的注意力,当然也可以合起来使字号和颜色同时发生变化:
html>
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb_2312-80"
title>
变号按钮<
/title>
style>
.bigChange{color:
letter-spacing:
.start{font-size:
12pt}
.over{font-size:
9pt}
变号按钮"
----七、按钮上显示时钟
----按钮上显示的信息不仅可以事先定义成固定的字符串,而且可以随时更改,当然你也可以把一些动态的信息送到按钮上,下面是在按钮上显示走动的时钟的例子,效果非常好:
scriptLANGUAGE="
JavaScript"
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);
if(hrNow>
=13){hour=hrNow-12;
if(mnNow<
=9){min="
0"
+mnNow;
else(min=mnNow)
if(scNow<
=9){
secs="
+scNow;
}else{secs=scNow;
time=hour+"
:
+min+"
+secs+ap;
=time;
setTimeout('
clock()'
1000);
("
formname=\"
form\"
+"
inputtype=buttonvalue=\"
Clickforinfo!
\"
name=button>
onError=null;
clock();
----八、按钮控制显示源文件
----为了方便别人学习你的网页设计方法,在主页上放置一个按钮,按下该按钮后即自动显示源文件,是不是非常实用?
代码如下,放到主页的正文区:
value="
显示源文件"
onclick="
view-source:
+"
----九、按钮链接站点
----这是按钮的一种最简单使用方法,按下按钮后转到一个站点:
form>
进入本站>
='
//'
----十、按钮改变页面背景
----通过按钮可以实时修改页面的颜色,如果让其自动在两种颜色之间快速切换背景颜色,就形成了闪烁效果,下面的代码设置了两个按钮,分别演示修改背景和闪烁效果,代码放到主页的正文区:
背景色变换"
BgButton()"
functionBgButton(){
if=='
#00ffff'
{='
#ffffff'
else{='
}}
FORM>
INPUTTYPE="
BUTTON"
VALUE="
闪烁"
onClick="
blinkit(self)"
/FORM>
SCRIPTLANGUAGE="
functionblinkOn(){
="
0000ff"
nTimes++
JSCTimeOutID=
blinkOff()"
50);
functionblinkOff(){
FFFFFF"
if(nTimes<
3)
JSCTimeOutID=("
blinkOn()"
else
functionblinkit(aWin){
nTimes=0
theWin=aWin
/SCRIPT>
----十一、按钮刷新页面
----尽管浏览器上都有刷新按钮,但在主页中设置上则显得页面更为完善,尤其是那些经常需要刷新的场合,实现刷新有两种方法,代码分别如下,请放到主页的正文区:
代码一:
刷新按钮"
(0)"
代码二:
刷新按钮一"
ReloadButton()"
functionReloadButton(){="
该网页文件"
//-->
----十二、滚屏按钮
----按下按钮后,屏幕内容开始向上滚动,代码如下,但一页长度必须超出一屏,否则将看不到滚动效果:
divalign="
center>
向下滚屏"
onClick="
scrollit()"
/center>
/div>
scriptLanguage="
functionscrollit(){
for(I=1;
I<
=500;
I++){
(1,I)}}
//-->
----十三、加入书签按钮
----利用文字链接也可以实现加入书签功能,但使用按钮则更为醒目和直观,按下按钮后,则可把指定的站点加到游览器的书签中,代码如下:
把本站加入书签"
'
网页教学网'
----十四、按钮字幕
----移动的字幕并不少见,比如在FRONTPAGE中有现成的字幕生成器,而利用JAVA实现的走马灯效果更是花样百出,其实使用按钮制作字幕效果更为独特,按钮会随着字符的数量而发生尺寸变化,动态很强,以下为完成的代码,请放到网页的正文区:
formname=form2>
submit"
banner"
Submit"
alert('
你可以加上链接!
br>
varid,pause=0,position=0;
functionbanner(){
vari,k,msg="
欢迎访问网页教学网"
//increasemsg
k=(30/+1;
for(i=0;
i<
=k;
i++)msg+="
"
+msg;
if(position++==position=0;
id=setTimeout("
banner()"
60);
banner();
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 按钮 使用 各种 代码