JS实现掷骰子

实现方法：

方法一：通过background-position、background-image、backg-repeat三个属性以及jquery animate()方法改变背景骰子图来实现图片切换。

　　　   PS：调整background-position比较麻烦，由于背景是一张包含各个点数以及旋转时骰子的整图

方法二：设置定时调整css样式background-image。

　　       PS：实现简单，但是视觉效果不佳

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>掷骰子</title>

     <style type="text/css">

         .dice {

             width: 100px;

             height: 100px;

             background-image: url(dice_1.jpg);

             cursor: pointer;

             position: relative;

         }

     </style>

 </head>

 <body>

 <div class="dice"></div>

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.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);

             dice.css('background-image', 'url(dice_f.jpg)');

             setTimeout(function(){

                 dice.css('background-image', 'url(dice_s.jpg)');

             },200);

             setTimeout(function(){

                 dice.css('background-image', 'url(dice_t.jpg)');

             },200);

             setTimeout(function(){

                 dice.css('background-image', 'url(dice_'+num+'.jpg)')

             }, 200);

         });

     });

 </script>

 </body>

 </html>

骰子图：

效果图：

JS实现掷骰子的更多相关文章

  1. jQuery掷骰子

    网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试 js代码如下: $(function(){ var dice = $("#dice"); dice.cl ...

  2. 掷骰子-IOS新手项目练习（抱歉，由于个人原因，图片没显示，要源码的项目私聊）

    ---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...

  3. html5掷骰子的小demo

    代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...

  4. TurnipBit开发板掷骰子小游戏DIY教程实例

    转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 下面带大家用TurnipBit开发板实现一个简单的小游戏- ...

  5. 掷骰子DApp的实现

    前言:​ DApp前些日子比较火, 这段时间有些低迷. 我也是后知后觉, 现在才接触一些, 这篇博文就当做DApp的初次印象吧.​ 本文要写的是基于智能合约的博彩游戏DApp—骰子游戏, 来看看它是怎 ...

  6. python-模拟掷骰子，两个筛子数据可视化

    """ 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...

  7. 纯php实现中秋博饼游戏（2）：掷骰子并输出结果

    这篇是纯php实现中秋博饼游戏系列博文(2) 上文是:纯php实现中秋博饼游戏(1):绘制骰子图案 http://www.cnblogs.com/zqifa/p/php-dice-1.html要纯ph ...

  8. 掷骰子游戏窗体实现--Java初级小项目

    掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...

  9. 3星|《给你讲个笑话：我是创业公司CEO》:创业成功就是上帝掷骰子

    给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...

随机推荐

  1. 推荐10个超棒的jQuery工具 提示插件

    脚本之家 http://www.jb51.net/article/28525.htm

  2. 修复lsp，360浏览器可以上网其它软件不行

    netsh winsock reset netsh int ip reset 重启电脑

  3. 使用Storm实现实时大数据分析！

    随着数据体积的越来越大,实时处理成为了许多机构需要面对的首要挑战.Shruthi Kumar和Siddharth Patankar在Dr.Dobb's上结合了汽车超速监视,为我们演示了使用Storm进 ...

  4. BOW模型在ANN框架下的解释

    原文链接:http://blog.csdn.net/jwh_bupt/article/details/17540561 作者的视野好,赞一个. 哥德尔第一完备性定理,始终是没有能看完完整的证明,艹!看 ...

  5. UML+模式设计概述

    转自于:http://blog.csdn.net/rexuefengye/article/details/13020225 工程学:工程庞大到一定程度必须是用工程学方法,好比直接用水泥沙子建设实用的摩 ...

  6. css3动画，点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  7. 检索源码 删除无用Properties的小工具

    背景: 重新做项目的过程中,引用了大量旧代码.尤其是Properties文件,里面肯定有一批是无用的,干脆笨办法直接扫描源码文件来过滤. 后续在此基础上修改修改,再做个扫描无用image文件的类. 代 ...

  8. （转）RabbitMQ学习之Headers交换类型（java）

    http://blog.csdn.net/zhu_tianwei/article/details/40923131 Headers类型的exchange使用的比较少,它也是忽略routingKey的一 ...

  9. 创建一个dynamics CRM workflow (四) - Development of Custom Workflows

    首先我们需要确定windows workflow foundation 已经安装. 创建之后先移除MyCustomWorkflows 里面的 Activity.xaml 从packages\Micro ...

  10. CENTOS 7发送邮件测试

    centos7作为126邮箱客户端发送邮件测试. 首先安装客户端软件: yum install sendmail mailx -y 配置邮箱设置: 开启smtp发件协议 配置授权码,写入配置文件. 追 ...