0
点赞
收藏
分享

微信扫一扫

js渐变颜色

小美人鱼失去的腿 2022-01-11 阅读 57
<script type="text/javascript">
	
	var i = -15;
	setInterval(function(){
		var n = 0;
		i = i + 0.1
		n = i
		if(n > 15){
			i = -15
		}
		

		changeBodyColor(n)
	},20)
	
	
	function changeBodyColor(n){
		if(n > 15){
			n = 15
		}else if(n < -15){
			n = -15
		}
		console.log("入参" + n)
		var r = 255;
		var g = 255;
		var b = 255;
		
		if(n > 0){
			r = 255 - parseInt(255 / 15 * n) % 256
			g = 255 - parseInt(255 / 15 * n) % 256;
		} else {
			n = 0 - n;
			b = 255 - parseInt(255 / 15 * n) % 256
			g = 255 - parseInt(255 / 15 * n) % 256;
		}
		console.log(r,g,b)
		
		document.body.style.backgroundColor=getColorValue(r,g,b)
	}
	
	function getColorValue(r, g, b){
		return "#" + get16Value(r) + get16Value(g) + get16Value(b);
	}
	
	function get16Value(num){
		num = num % 256
		var str = num.toString(16)
		if(str.length == 1){
			str = "0" + str;
		}
		return str
	}
</script>
举报

相关推荐

0 条评论