JS實現(xiàn)顏色動態(tài)淡化效果
更新時間：2017年03月06日 15:58:37 作者：歐陽翠花
本文主要介紹了JS實現(xiàn)顏色動態(tài)淡化效果的實例，具有很好的參考價值。下面跟著小編一起來看下吧
效果圖：
代碼如下：
<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="點(diǎn)擊執(zhí)行顏色淡化效果"/>
<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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關(guān)文章
request請求獲取參數(shù)的實現(xiàn)方法(post和get兩種方式)
下面小編就為大家?guī)硪黄猺equest請求獲取參數(shù)的實現(xiàn)方法(post和get兩種方式)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)左右拖動改變內(nèi)容顯示區(qū)域大小的方法
這篇文章主要介紹了JS實現(xiàn)左右拖動改變內(nèi)容顯示區(qū)域大小的方法,涉及JavaScript實時響應(yīng)鼠標(biāo)事件動態(tài)改變頁面元素屬性的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
本文給大家?guī)砹薺son解析方法小結(jié)的知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)多圖和單圖上傳顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示
這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實現(xiàn)流式顯示,需要的朋友可以參考下2015-01-01![[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例](http://img.jbzj.com/images/xgimg/bcimg6.png)
[js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例
下面小編就為大家?guī)硪黄猍js高手之路]圖解javascript的原型(prototype)對象,原型鏈實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
layer.open 子頁面彈出層向父頁面?zhèn)鬏敂?shù)據(jù)的例子
今天小編就為大家分享一篇layer.open 子頁面彈出層向父頁面?zhèn)鬏敂?shù)據(jù)的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
本文向大家介紹了javascript中常見的3種獲取元素的方法，分別是通過元素ID、通過標(biāo)簽名字和通過類名字來獲取，并附上了示例，希望大家能夠喜歡。2015-03-03
javascript 表格內(nèi)容排序 簡單操作示例代碼
本文為大家詳細(xì)介紹下javascript實現(xiàn)表格內(nèi)容排序，喜歡的朋友可以參考下2014-01-01