js 简单摇筛子

js 简单摇筛子前言1、最近正好有在搜有关摇骰子的游戏,在网上看到了一篇比较不错的案例,修改了原来的代码给大家分享一下正文这个摇骰子的动作主要是通过定时器改变骰子的图片实现的,比较简单

前言

1、最近正好有在搜有关摇骰子的游戏,在网上看到了一篇比较不错的案例,修改了原来的代码给大家分享一下

正文

这个摇骰子的动作主要是通过定时器改变骰子的图片实现的,比较简单。下面看看代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>摇骰子</title>
        <style type="text/css">
            .dice{
                width: 100px;
                height: 100px;
                background-image: url(1.jpg);
                cursor: pointer;
                position: relative;

            }       
        </style>
    </head>
    <body>
        <div class="dice">

        </div>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
       $(function(){
           let dice = $(".dice");
           dice.on('click',function(){
               dice.css('cursor','default');
               let num = Math.ceil(Math.random()*6);
               console.log(num);
               
               setTimeout(function(){
                   dice.css('background-image','url(d1.jpg)');
               },200);
               setTimeout(function(){
                   dice.css('background-image','url(d2.jpg)');
               },400);
               setTimeout(function(){
                   dice.css('background-image','url(d3.jpg)')
               },600);
              setTimeout(function(){
                  dice.css('background-image','url('+num+'.jpg')
              },700);
           });
       });
    </script>
</html>

然后是用到的图片

js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子js 简单摇筛子

前面的是六个面,后面是演示动作的图,看起来就像是动的。

点击后通过定时器按顺序显示,最后通过随机数显示骰子的面。

这里和原来参考的代码不同的有两个地方一是定时器的时间(原来的代码中所有定时器时间都是200),二是最后显示的面原来的代码没有加定时器。

原来的我直接用有些问题,动作图由于定时器时间相同,你只能看到最后一张。

然后我查了setTimeout的用法。如果多个setTimeout执行,又是需要顺序显示图片,那时间需要设置不同。尽管代码还是会按顺序执行。但是由于多张图几乎同时显示,肉眼是只能看到一张的。只有时间不同才能看到多张图,产生骰子转动的错觉

参考的别人的代码地址(感谢)

https://www.cnblogs.com/momobutong/p/8601860.html

 

今天的文章js 简单摇筛子分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:http://bianchenghao.cn/63650.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注