您的位置：首页 > Web前端 > JavaScript

叫你怎么用javascript制作制作随机点名系统！

2014-11-27 15:18 288 查看

//请自带需要的图片，可将代码中的图片数量的大小调整

//系统可自动点名，返回出对应的照片和文字

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

    img

    {

        width:300px;

        height:300px;

        }

    </style>

    <script type="text/javascript">

        //script标签中的函数必须显式调用才能执行,函数外部的代码在页面加载的时候就会执行

        /*alert('dd');

        function f1() {

        alert('cc');

        }

        //调用函数f1，就是让函数f1的{}中的代码执行

        f1();*/

 

        var count = 1;

        var isstop = false;

        function changeimg() {

            var s = number(1, 8);

            document.getElementById('img1').src = 'images/' + s + '.jpg';

            document.getElementById('ge').innerHTML = s;

        }

        //浏览器帮我我们开启了一个线程，在这个线程中每隔300毫秒，执行一次changeimg函数，但是一旦开启了线程，我们就要能够停止线程，否则线程一直无休止的执行下去，会占用内存资源。这个变量o的值(比如8193)就是浏览器给这个线程分配的唯一ID，如果想停止这个线程，就可以使用js中的clearInterval方法

        var o = setInterval(changeimg, 300);

        //alert(o);

        function startorstop() {

            switch (isstop) {

                case false:

                    //停止图片循环，将按钮的文本更为为"开始"，将isstop的值改为true

                    clearInterval(o);

                    document.getElementById('btn').value = '开始';

                    document.getElementById('img1').src = 'images/1.jpg';

                    isstop = true;

                    break;

                case true:

                    //开始图片循环，将按钮的文本更改为"停止",将isstop的值改为false

                    o = setInterval(changeimg, 300);

                    document.getElementById('btn').value = '停止';

                    isstop = false;

                    break;

            }

            //将线程的id号作为参数传入clearInterval方法，浏览器就会帮助我们停止刚刚创建的线程，所以图片就会停止轮换

        }

        function number(min,max) {

            range = max - min;

            sum = Math.random();

            num = Math.round(sum * range);

            return num;

        }

    </script>

</head>

<body>

<img src="images/1.jpg" id="img1" /><br />

<span id="ge"></span>

<input type="button" value="停止" id="btn" onclick="startorstop();" />

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  html csdn博客 javascript 线程 js
相关文章推荐
新的分享
章节导航