当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

全部安卓应用教程网络软件教程办公软件教程电脑学习教程苹果应用教程技术开发教程网页设计教程
使用按钮控制文本渐变的JS代码如何写

使用按钮控制文本渐变的JS代码如何写

更新时间：2023-06-22 文章作者：未知 信息来源：网络 阅读次数：次

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

使用按钮控制文本渐变

【实例描述】

文本渐变是一种吸引用户眼球的特效，本例通过两个按钮，实现对文本渐变的控制。当用户单击“开始渐变”按钮时，文本就会实现渐变的效果，当单击“结束渐变”按钮时，文本还原成初始状态。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<SCRIPT LANGUAGE="JavaScript">
var x=9;
var change="on"
if (navigator.appName == "Netscape") {  //浏览器是netscape的情况
    visShow="'show'";                   //显示的命令
    visHide="'hide'";                   //隐藏的命令
    docStyle="document.";
    styleDoc="";
}
else {                                 //浏览器是IE的情况
    visHide="'hidden'";                //显示的命令
    visShow="'visible'";               //隐藏的命令
    docStyle="";
    styleDoc=".style";                 //设置样式的命令
}
function hide1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visHide);//隐藏第一个div
}
function hide2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visHide);//隐藏第二个div
}
function hide3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visHide);//隐藏第三个div
}
function hide4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visHide);//隐藏第四个div
}
function hide5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visHide);//隐藏第五个div
}
function hide6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visHide);//隐藏第六个div
}
function hide7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visHide);//隐藏第七个div
}
function hide8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visHide);//隐藏第八个div
}
function hide9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visHide);//隐藏第九个div
}
function hide10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visHide);//隐藏第十个div
}
function show1() {
eval(docStyle+ 'object1' + styleDoc + '.visibility=' + visShow);//显示第一个div
hide2(),hide3();
}
function show2() {
eval(docStyle+ 'object2' + styleDoc + '.visibility=' + visShow);//显示第二个div
hide1(),hide3();
}
function show3() {
eval(docStyle+ 'object3' + styleDoc + '.visibility=' + visShow);//显示第三个div
hide2(),hide4();
}
function show4() {
eval(docStyle+ 'object4' + styleDoc + '.visibility=' + visShow);//显示第四个div
hide3(),hide5();
}
function show5() {
eval(docStyle+ 'object5' + styleDoc + '.visibility=' + visShow);//显示第五个div
hide4(),hide6();
}
function show6() {
eval(docStyle+ 'object6' + styleDoc + '.visibility=' + visShow);//显示第六个div
hide5(),hide7();
}
function show7() {
eval(docStyle+ 'object7' + styleDoc + '.visibility=' + visShow);//显示第七个div
hide6(),hide8();
}
function show8() {
eval(docStyle+ 'object8' + styleDoc + '.visibility=' + visShow);//显示第八个div
hide7(),hide9();
}
function show9() {
eval(docStyle+ 'object9' + styleDoc + '.visibility=' + visShow);//显示第九个div
hide8(),hide10();
}
function show10() {
eval(docStyle+ 'object10' + styleDoc + '.visibility=' + visShow);//显示第十个div
hide9();
}
function change1() {
x+=1;
eval("show" + x + "()");                          //逐个显示div,从1到10
if (x<10) setTimeout("change1()", 75);            //一直在此方法中循环
else if (change=="on") change2();                 //开始调用第二个循环方法            
}
function change2() {
x-=1;                                             //逐个显示div，从10到1
eval("show" + x + "()");
if (x>1) setTimeout("change2()", 75);             //一直在此方法中循环     
else change1();                                   //开始调用第一个循环方法
}
function changeOn() {                              //开始变化的控制
    x=9;
    change="on";
    change1();
}
function changeOff() {                            //结束变化的控制
    change="off";
}
</SCRIPT>
</head>
<body>
<div id="vis" style="position:absolute; visibility:show; left:10px; top:10px; z-index:1">
<table cellpadding=2 border=1><tr>
<td><center><b>颜色变化控制</b></center></font></a></td>
<td><a href="javascript:changeOn()">
<font color="#000000"><center>开始渐变</center></font></a></td>
<td><a href="javascript:changeOff()">
<font color="#000000"><center>结束渐变</center></font></a></td>
</tr></table></div>
<div id="object1" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=#eaffff width=175 height=50><td><center><b><font color="#F9F9F9">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object2" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#ECECEC">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object3" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#D5D5D5">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object4" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#C0C0C0">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object5" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#b0b0b0">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object6" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#939393">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object7" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#808080">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object8" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#6b6b6b">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object9" style="position:absolute; visibility:hide; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#424242">看看我的颜色变化</font></b></center></td></table>
</div>
<div id="object10" style="position:absolute; visibility:show; left:10px; top:50px; z-index:1">
<table border=1 bgcolor=eaffff width=175 height=50><td><center><b><font color="#000000">看看我的颜色变化</font></b></center></td></table>
</div><P>
</FONT></CENTER>
</body>
</html>

【运行效果】

 渐变效果1

渐变效果2

【难点剖析】

本例的重点是“change1”和“change2”方法。通过“change1”方法的循环执行，分别调用显示div的10个方法，然后再通过“change2”方法的循环，调用隐藏的10个方法。代码中有个技巧“eval”（“show”+x+“（）”）”，使用“eval”方法可以将这些普通字符串，连接成一个函数名。

【源码下载】

本实例JS代码下载


使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

温馨提示：喜欢本站的话，请收藏一下本站！

本类教程下载

系统下载排行

本站发布的Win7纯净版系统、Win10纯净版和XP纯净版系统仅为个人学习测试使用，请在下载后24小时内删除，不得用于任何商业用途，否则后果自负，请支持购买微软正版软件！

本站所有资源全部来自于网络资源,如侵犯到您的权益,请及时通知我们(),我们会及时处理.

Copyright © 2018-2020 萝卜系统下载站  手机站  关于本站


foot

网站地图xml | 网站地图html