这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要介绍了 JS 实现颜色动态淡化效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
效果图:
代码如下:
- <html>
- <head>
- <title>
- 颜色变换
- </title>
- <style type="text/CSS">
- div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;}
- input{position:absolute;left:100px;top:100px;}
- </style>
- </head>
- <body>
- <input type="button" value="点击执行颜色淡化效果" />
- <script type="text/javascript">
- var a = 255,
- b = 165,
- c = 0,
- w = 100,
- box;
- function cont() {
- a = 255;
- b = 165;
- c = 0;
- w = 100;
- box = document.createElement('div');
- document.body.appendChild(box);
- }
- function changeColor() {
- document.getElementsByTagName('input')[0].disabled = "disabled";
- box.style.backgroundColor = "RGB(" + a + "," + b + "," + c + ")";
- box.style.width = w;
- box.style.height = w;
- c++;
- if (c >= 166) b++;
- w++;
- if (a >= 255 && b > 255 && c > 255) {
- box.parentNode.removeChild(box);
- document.getElementsByTagName('input')[0].removeAttribute('disabled');
- return false;
- }
- setTimeout(changeColor, 1);
- }
- document.getElementsByTagName('input')[0].onclick = function() {
- cont();
- changeColor();
- }
- </script>
- </body>
- </html>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持 phperz!
来源: http://www.phperz.com/article/17/0712/327008.html