嘿大家对网站和javaScript不熟悉我试图在用户点击按钮之前添加一个计数器,用于显示背景颜色变化的次数,以及输出在单击按钮之前颜色发生了多长时间的变化。我看到很多柜台,但没有什么比我想要的,我的代码在下面,任何建议都会很棒
感谢所有!!
P.S。我的代码在IE中不起作用,我一直在使用Fire fox
更新:还有一点我需要做的事情:
•计算在用户点击“我喜欢这种颜色”之前显示的颜色数量 o创建一个计数器作为全局范围(在函数之外) o在changeColor()函数中递增计数器 o当用户单击我喜欢此颜色按钮时,使用本地存储来存储计数 •从localStorage读取 o文档启动时,访问上述步骤中保存的计数。如果没有任何数据 - 那么这是第一次访问该网站,因此无需显示计数。
我已将代码更新为下面给出的答案
<script type="text/javascript">
var count = 0;
var interval;
function getRandom(num){
return Math.floor(Math.random()*num);
}
function changeColor(){
count ++;
var num1 = getRandom(255);
var num2 = getRandom(255);
var num3 = getRandom(255);
var col = "rgb("+num1+","+num2+","+num3+")";
var div = document.getElementById( 'myDiv' );
div.style.background = col;
}
function stop() {
clearInterval(interval);
alert('The background color has changed ' + count + ' times before you clicked me!');
}
interval = setInterval("changeColor()", 2000);
</script>
<style type="text/css">
.Div {
position:absolute;
width: 800px;
height: 100px;
z-index: 15;
top: 50%;
left: 15%;
background: red;
}
</style>
</head>
<body onLoad="setInterval()">
<div id="myDiv" class="Div">
<input type="button" onClick="stop()", value="I like this color" align="absmiddle">
</div>
</body>
</html>
答案 0 :(得分:1)
试试这个:
<script type="text/javascript">
var count = 0;
var interval;
function getRandom(num){
return Math.floor(Math.random()*num);
}
function changeColor(){
count ++;
var num1 = getRandom(255);
var num2 = getRandom(255);
var num3 = getRandom(255);
var col = "rgb("+num1+","+num2+","+num3+")";
var div = document.getElementById( 'myDiv' );
div.style.background = col;
}
function stop() {
clearInterval(interval);
alert('The background color has changed ' + count + ' times before you clicked me!');
}
interval = setInterval("changeColor()", 2000);
</script>
<div id="myDiv">
<input type="button" onClick="stop()", value="I like this color" align="absmiddle">
</div>