在JavaScript函数中设置计数器?

时间:2014-02-25 00:20:34

标签: javascript

嘿大家对网站和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>

1 个答案:

答案 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>