JS實(shí)現(xiàn)顏色動(dòng)態(tài)淡化效果
更新時(shí)間：2017年03月06日 15:58:37 作者：歐陽(yáng)翠花
本文主要介紹了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í)也希望多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要介紹了Javascript顯示和隱藏ul列表的方法,涉及javascript針對(duì)頁(yè)面元素遍歷及顯示與隱藏的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了小程序的上傳文件接口的注意解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)循環(huán)Nodelist Dom列表的4種方式,結(jié)合具體實(shí)例形式分析了javascript循環(huán)遍歷Nodelist Dom列表的常用操作技巧,需要的朋友可以參考下2018-02-02
js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子
這篇文章介紹了js獲取或設(shè)置當(dāng)前窗口url參數(shù)的小例子，有需要的朋友可以參考一下2013-10-10
Javascript 訪問樣式表實(shí)現(xiàn)代碼
Javascript訪問樣式表--又一篇好文章2009-08-08
JavaScript/jQuery實(shí)現(xiàn)切換頁(yè)面效果
這篇文章主要為大家詳細(xì)介紹了JavaScript或jQuery實(shí)現(xiàn)切換頁(yè)面效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
數(shù)組的去重方法,其實(shí)無論實(shí)在實(shí)際項(xiàng)目還是在面試中都會(huì)有用到的,下面這篇文章主要給大家介紹了非常全面的12種js數(shù)組去重的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
JavaScript 無縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
JavaScript 指定寬度高度的無間斷滾動(dòng)實(shí)現(xiàn)代碼，這樣的效果適合作為焦點(diǎn)新聞的輪播顯示。2010-03-03
今天小編就為大家分享一篇解決layui的radio屬性或別的屬性沒顯示出來的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
解決使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò)：error：Bootstrap dropdown require
這篇文章主要介紹了使用bootstrap的dropdown部件時(shí)報(bào)錯(cuò)：error：Bootstrap dropdown require Popper.js ,小編把問題描述和解決方案分享給大家，需要的朋友可以參考下2018-08-08