JavaScript效果之简单的点击按扭自动随机切换背景颜色
其他
2020-03-26 00:39:48
阅读次数: 0
简单的点击按扭自动随机切换背景颜色
简略版：
-
<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="开始变色" οnclick="counter()">
<input type="button" value="暂停变色" οnclick="window.clearTimeout(TMR)"><!--clearTimeout() 方法可取消由 setTimeout() 方法设置的定时操作。-->
<input type="button" value=" 获取颜色值 " οnclick="colorWrite()" >
</div>
</body>
</html>
效果展示：
加强版：
要求：1.新建一个实时获取颜色值的按钮命名为自动获取颜色值。
2.颜色值直接显示在按钮的正下方，且随背景颜色的变换而变化。
经过学习我好像满足不了这两个要求只能满足其中一个。
例如1：点击按钮可以自动获取颜色值且随背景颜色的变化而变换，但是。。。。
效果展示：
例如2：算了不说了，自己看吧，我太难了。。。真不会。
效果展示：
只能做到这种地步了，日后在研究。。（或许可以通过遍历数组的形式，来重写代码。）
发布了31 篇原创文章 ·
获赞 35 ·
访问量 2万+
转载自blog.csdn.net/weixin_39934520/article/details/103253260
