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. 提示“CD/DVD找不到媒体所需的驱动”

    最近在帮我姐安装win7系统时提 示“CD/DVD找不到媒体所需的驱动”,我用的是U盘安装方式,觉得奇怪,那个镜像文件我已经安装过几十次都没有出错,显然是不会有错的.但是新买的电 脑又不会太大的问题, ...

  2. 企业级任务调度框架Quartz(5) Quartz的声明式配置

    前序:     前面我们已经通过编程的方式实现了多个作业任务执行具体操作的演示:但具体到实际的时候,如果我们要在 Job 启动之后改变它的执行时间和频度,则必须去修改源代码重新编译,我们很难去以编程的 ...

  3. IIS访问php页面问题，报告404错误

    IIS访问php页面出现问题,所有php页面找不到,显示404页面,html页面可以正常访问. 搜索结果: 方案1: 打开WEB服务扩展,把“所有未知ISAPI扩展”设为允许! 方案2: PHP没有完 ...

  4. 团体程序设计天梯赛-练习集-L1-026. I Love GPLT

    L1-026. I Love GPLT 这道超级简单的题目没有任何输入. 你只需要把这句很重要的话 —— “I Love GPLT”——竖着输出就可以了. 所谓“竖着输出”,是指每个字符占一行(包括空 ...

  5. 【转】Oracle基础结构认知—oracle物理结构 礼记八目 2017-12-13 20:31:06

    原文地址:https://www.toutiao.com/i6499008214980362765/ oracle数据库启动:oracle服务启动,通过参数文件查找控制文件,启动控制文件,则控制文件调 ...

  6. webpack学习笔记(2)--webpack.config.js

    3 模式 mode mode 参数设置为 development(开发模式), production(生产模式) 或 none(无),可以启用对应环境下 webpack 内置的优化.默认值为 prod ...

  7. Project Euler 32 Pandigital products

    题意:找出所有形如 39 × 186 = 7254 这种,由 1 - 9,9个数字构成的等式的和,注意相同的积不计算两次 思路:如下面两种方法 方法一:暴力枚举间断点 /*************** ...

  8. 把SQLAlchemy查询对象转换成字典/json使用(分开)

    注:针对的是查询出来的是单条对象 多个对象的话可以使用for循环遍历查询出来的对象列表,也可以使用下面的方法 1.config.py文件 #!/usr/bin/env python #-*- codi ...

  9. 编译htop

    git clone https://github.com/hishamhm/htop cd htop ./autogen.sh ./configure make make install

  10. J2EE异常问题总结

    http://blog.csdn.net/rchm8519/article/details/41624381 http://www.51testing.com/html/49/240349-14393 ...