几种实用的JavaScript鼠标特效,在我们平时网页设计中，鼠标特效可以说是常常会用到，那么今天我们来讲讲通过JS代码实现一些实用的鼠标特效，希望对大家有用。......
2023-03-17 490 JAVASCRIPT 鼠标
Javascript脚本特效示例：[16]按钮驱动背景
来源：互联网
2023-03-17 00:48:08 306
Javascript是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢，只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript，提供了数据验证的基本功能。
工具/原料
- txt文本文档或者 HTML文档/
方法/步骤
在桌机上新建文本文档，命名为晓博JavaScript特效测试.txt，在文本文档里中入HTML文档的基本元素如下，并保存。
html>
head>
title>晓博JavaScript特效测试/title>
/head>
body>
div id="zy">
div id="login">/div>
div id="daohang">
ul>
li>a href="index.html">首页/a>/li>
li>a href="jianjie.html">七夕简介/a>/li>
li>a href="#">七夕节传说/a>/li>
li>a href="#">七夕节习俗/a>/li>
li>a href="#">诗词& 歌谣/a>/li>
li>a href="#">七夕节寄语/a>/li>
/ul>
/div>
/div>
/body>
/html>
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/a99a494afa32939cad6ddf065719ce2c5a1b1532.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/92dd32f7dfb2dc194ab65baf95def4dca1391032.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
第一步:把如下代码加入head>区域中
script language="Javascript">
!--
function backcolor(form){
temp = ""
for (var i = 0; i 16; i ) {
temp = form.color[i].value
if (form.color[i].checked){ document.bgColor = temp }
}
}
function randombackground(){
document.bgColor = getColor()
}
function getColor(){
currentdate = new Date()
backgroundcolor = currentdate.getSeconds()
if (backgroundcolor > 44)
backgroundcolor = backgroundcolor - 45
else if (backgroundcolor > 29)
backgroundcolor = backgroundcolor - 30
else if (backgroundcolor > 15)
backgroundcolor = backgroundcolor - 16
if (backgroundcolor == 0 )
return "olive";
else if (backgroundcolor == 1 )
return "teal";
else if (backgroundcolor == 2 )
return "red";
else if (backgroundcolor == 3 )
return "blue";
else if (backgroundcolor == 4 )
return "maroon";
else if (backgroundcolor == 5 )
return "navy";
else if (backgroundcolor == 6 )
return "lime";
else if (backgroundcolor == 7 )
return "fuschia";
else if (backgroundcolor == 8 )
return "green";
else if (backgroundcolor == 9 )
return "purple";
else if (backgroundcolor == 10 )
return "gray";
else if (backgroundcolor == 11 )
return "yellow";
else if (backgroundcolor == 12 )
return "aqua";
else if (backgroundcolor == 13 )
return "black";
else if (backgroundcolor == 14 )
return "white";
else if (backgroundcolor == 15 )
return "silver";
}
// -->
/script>
第二步:把如下代码加入body>区域中
FORM>
input type="button" value="晓博变换背景" onClick="randombackground()">
/form>
用IE浏览器打开晓博JavaScript特效测试.html文件，可以看到按钮驱动背景特效,如下图
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/dd58d02c5b1b1ede7346a08d981fceecd2d90f32.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/a1780d1fceecd3d9e5eff2706799594305010832.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/edd84743040148fe8cd85ddf8fd149299b880232.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/059057299a883913707fec5a26bcbe2f46707c32.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/acfda02f477046184140e48fb08602214e577632.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/3ac71c214f579356f721f894effb960b30217032.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/65ba880b31210561ae39555d08aee8d7582a6a32.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/586bfdefe07814316d2c32d8dc6699cf03536232.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![Javascript脚本特效示例：[16]按钮驱动背景](https://exp-picture.cdn.bcebos.com/031231632385e036580b475cb8e039723c035a32.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JAVASCRIPT驱动
相关文章
- 详细阅读
-
如何开始学习javascript详细阅读
如何开始学习javascript,html是网页的内容，c是网页的格式，h是网站的后台，j是网站的前端，那么如何学习j，才能高效？......
2023-03-17 217 JAVASCRIPT
- 详细阅读