JavaScript效果之简单的点击按扭自动随机切换背景颜色

最新推荐文章于 2022-04-10 08:26:19 发布

红烧兔纸

最新推荐文章于 2022-04-10 08:26:19 发布

阅读量2.3k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_39934520/article/details/103253260

版权

JavaScript 专栏收录该内容

14 篇文章 5 订阅

订阅专栏

简单的点击按扭自动随机切换背景颜色

简略版：

<html>
<head>
<title>简单的点击按随机钮切换背景颜色</title>
<script >
function counter(){
	var colourElements="0123456789ABCDEF";
	var Split=colourElements.split('');
	
	for(var i=0; i < Split.length; i++){
		var a=Math.round(Math.random()*i);
		var b=Math.round(Math.random()*i);
		var c=Math.round(Math.random()*i);
		var d=Math.round(Math.random()*i);
		var e=Math.round(Math.random()*i);
		var f=Math.round(Math.random()*i);
		var G=Split[a];
		var H=Split[b];
		var I=Split[c];
		var J=Split[d];
		var K=Split[e];
		var L=Split[f];
			}

	if((G == null)||(H == null)||(I == null)||(J == null)||(K == null)||(L == null)){
		counter();
	}else{
		var RandomColour=G+H+I+J+K+L;
		document.bgColor=RandomColour;//document的bgColor属性用来设置背景颜色，
		TMR=setTimeout('counter()',1500);//1.5秒切换一次
	}
}

function colorWrite(){
	alert(document.bgColor);
	}
</script>
</head>
<body>
<div style="text-align:center;margin:200px;">
<input type="button" value="开始变色" onclick="counter()">
<input type="button" value="暂停变色" onclick="window.clearTimeout(TMR)"><!--clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。-->
<input type="button" value=" 获取颜色值 " onclick="colorWrite()" >
</div>

</body>
</html>

效果展示：

加强版：

要求：1.新建一个实时获取颜色值的按钮命名为自动获取颜色值。

2.颜色值直接显示在按钮的正下方，且随背景颜色的变换而变化。

经过学习我好像满足不了这两个要求只能满足其中一个。

例如1：点击按钮可以自动获取颜色值且随背景颜色的变化而变换，但是。。。。

效果展示：

例如2：算了不说了，自己看吧，我太难了。。。真不会。

效果展示：

只能做到这种地步了，日后在研究。。（或许可以通过遍历数组的形式，来重写代码。）

红烧兔纸

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
JavaScript效果之简单的点击按扭自动随机切换背景颜色

简单的点击按扭自动随机切换背景颜色简略版： <html><head><title>简单的点击按随机钮切换背景颜色</title><script >function counter(){ var colourElements="0123456789ABCD...
复制链接

扫一扫