JS實(shí)現(xiàn)顏色動(dòng)態(tài)淡化效果

更新時(shí)間：2017年03月06日 15:58:37 作者：歐陽翠花

本文主要介紹了JS實(shí)現(xiàn)顏色動(dòng)態(tài)淡化效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧

效果圖：

代碼如下：

<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>

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

js
顏色

相關(guān)文章

request請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)
下面小編就為大家?guī)硪黄猺equest請(qǐng)求獲取參數(shù)的實(shí)現(xiàn)方法(post和get兩種方式)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-09-09
Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換(17)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本插件學(xué)習(xí)筆記之標(biāo)簽切換的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
JS實(shí)現(xiàn)左右拖動(dòng)改變內(nèi)容顯示區(qū)域大小的方法
這篇文章主要介紹了JS實(shí)現(xiàn)左右拖動(dòng)改變內(nèi)容顯示區(qū)域大小的方法,涉及JavaScript實(shí)時(shí)響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁面元素屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-10-10
Json解析的方法小結(jié)
本文給大家?guī)砹薺son解析方法小結(jié)的知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
js實(shí)現(xiàn)多圖和單圖上傳顯示
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)多圖和單圖上傳顯示，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示
這篇文章主要介紹了JavaScript結(jié)合AJAX_stream實(shí)現(xiàn)流式顯示,需要的朋友可以參考下
2015-01-01
[js高手之路]圖解javascript的原型(prototype)對(duì)象,原型鏈實(shí)例
下面小編就為大家?guī)硪黄猍js高手之路]圖解javascript的原型(prototype)對(duì)象,原型鏈實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-08-08
layer.open 子頁面彈出層向父頁面?zhèn)鬏敂?shù)據(jù)的例子
今天小編就為大家分享一篇layer.open 子頁面彈出層向父頁面?zhèn)鬏敂?shù)據(jù)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
JavaScript中常見獲取元素的方法匯總
本文向大家介紹了javascript中常見的3種獲取元素的方法，分別是通過元素ID、通過標(biāo)簽名字和通過類名字來獲取，并附上了示例，希望大家能夠喜歡。
2015-03-03
javascript 表格內(nèi)容排序簡(jiǎn)單操作示例代碼
本文為大家詳細(xì)介紹下javascript實(shí)現(xiàn)表格內(nèi)容排序，喜歡的朋友可以參考下
2014-01-01