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. 几个概念：x86、x86-64和IA-32、IA-64

    最近在学习操作系统方面的知识,学习操作系统难免要和CPU打交道,虽然现在CPU和操作系统不像计算机发展初期一样是绑定在一起的,但是大家都知道操作系统和CPU Architecture的联系是很紧密的, ...

  2. ML二：NNSearch数据结构--二叉树

    wiki百科:http://zh.wikipedia.org/wiki/%E5%86%B3%E7%AD%96%E6%A0%91%E5%AD%A6%E4%B9%A0 opencv学习笔记--二杈决策树: ...

  3. （转）RabbitMQ学习之路由（java）

    http://blog.csdn.net/zhu_tianwei/article/details/40887755 参考:http://blog.csdn.NET/lmj623565791/artic ...

  4. Swift中self和Self

    Self相当于oc中的instance 是什么 相信大家都知道self这个关键字的具体作用,它跟OC里的self基本一样.但是对于Self来说...(WTF,这是什么东西) 当你用错Self的时候编译 ...

  5. Multitier architecture-n-tier architecture

    In software engineering, multitier architecture (often referred to as n-tier architecture) or multil ...

  6. Python基础：编码

    1:先说python2py2里默认编码是ascii文件开头那个编码声明是告诉解释这个代码的程序 以什么编码格式 把这段代码读入到内存,因为到了内存里,这段代码其实是以bytes二进制格式存的,不过即使 ...

  7. Pyhton学习——Day3

    # li = [1,12,9,"age","alex"]# #列表表示为[]括起来# #列表用","分割每个元素# #列表中的元素可以是数字 ...

  8. Oracle语句执行顺序

  9. Day 10 函数

    函数 1.什么是函数? 函数就是具备某一功能的工具,事先将工具准备好就是函数的定义,遇到应用场景拿来就用就是函数的调用 2.为何用函数? 如果不使用函数,写程序会遇到这三个问题 1.程序冗长 2.程序 ...

  10. 流量监控---iftop

    一.iftop是什么? iftop是类似于top的实时流量监控工具. 官方网站:http://www.ex-parrot.com/~pdw/iftop/ 二.iftop有什么用? iftop可以用来监 ...