JS onclick 开始停止在一个键上 事件如何进行交换?

邻里 发布于 2014/10/31 19:13
阅读 1K+
收藏 0
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
    *{
        margin: 0 auto;
    }
    .pic{
        width: 600px;
        margin-top: 30px;
        height: 400px;
    }
    input[type="button"]{
        background:#F3D026;
        padding: 12px 24px;
        display: inline-block;
        color: #000;
        font-size: 1em;
        border: none;
        cursor: pointer;
    }
    p{
        text-align: center;
        margin-top: 30px;
    }
    img{
        display: block;
        text-align: center;
    }
</style>
<script type="text/javascript">
    window.onload = function(){
        // 定义图片数组
        var arr = ['nianzhongjiang.jpg','shenmijiangpin.jpg','chaju.jpg','zengge.jpg','dianfanbao.jpg','weibolu.png','bingxiang.jpg'];
        var pic = document.getElementById('pic');//图片元素抓取
        var start = document.getElementById('start');//按钮元素抓取    
        var fn;
        start.onclick = function(){//给按钮绑定上事件
            clearInterval(fn);
            start.setAttribute('value','停止吧!!');
            var fn = setInterval(function(){//设置定时器
                var num = Math.floor(Math.random()*arr.length);//随机一个数组下标
                // 拼接图片
                var img = "images/"+arr[num];
                //获取元素再返回
                pic.setAttribute('src',img);
            },10);

        start.onclick = function(){
            clearInterval(fn);
            start.setAttribute('value','再来一把');
        }

        }
    
    }
</script>
</head>

<body>
<div class="pic">
    <img src="images/xiexiehuigu.jpg" id="pic" />
</div>
    <p><input type="button" value="开始" id="start" /></p>
</body>
</html>



想了很久也没有想起来 如何把事件给交换了!希望大家能帮忙解答下!

我的意思是事件事件原来是开始,我停止后又如何开始!就是来回的切换!

加载中
0
静心天涯
静心天涯
触发开始函数之后移除按钮的onclick事件,再添加停止事件。反过来也一样
邻里
邻里
如何移除onclick事件呢! 我想的是通过setAttribute()来更改它的绑定的事件值,可是行不通!
返回顶部
顶部