颜色渐变
今天突发奇想.研究了下10进制和16进制的东西.
想到了颜色的表达也是16进制的..所以就尝试性的写下了这些!~
嘿嘿.还蛮好玩的.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0
}
#main {
width: 500px;
float: left;
height: 20px;
background: #000
}
#slidebar {
width: 300px;
float: left;
height: 20px;
}
</style>
<script type="text/javascript">
function colorShow(sColor, eColor){
this.sNum = Number('0x' + sColor);
this.eNum = Number('0x' + eColor);
}
colorShow.prototype = {
init: function(){
this.step = parseInt((this.eNum - this.sNum) / 10, 10)
this.step = this.step == 0 ? 1 : this.step;
this.sNum = (this.sNum + this.step > this.eNum) ? this.eNum : this.sNum + this.step;
},
fx: function(){
var _self = this
setTimeout(function(){
document.getElementById('main').style.backgroundColor = '#' + _self.sNum.toString(16);
document.getElementById('slidebar').innerHTML = '#' + _self.sNum.toString(16);
_self.fx();
_self.init();
}, 100)
}
}
window.onload = function(){
var tes = new colorShow('000000', 'ffffff');
tes.init();
tes.fx()
}
</script>
</meta>
</head>
<body>
<div id="main">这里的颜色变动</div>
<div id="slidebar">slidebar</div>
</body>
</html>