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. 【Oracle】使用logmnr挖掘日志

    使用Logmnr挖掘日志的详细步骤如下: 1. 查看日志状态及位置 col member for a45 select group#,status from v$log; select group#, ...

  2. day27-3 matplatlib模块

    目录 matplotlib 条形图 折线图 散点图 matplotlib 图形可视化,主要用来画图 别问,问就是看不懂 条形图 import matplotlib.pyplot as plt # 只识 ...

  3. RemoveAll测试

    foreach (var item in procode) { var reslit = LoadData((string)item.ProductCode.Trim(), item.product_ ...

  4. nginx日志按天自动切割

    1.编写shell脚本,创建nginx_log.sh文件#!/bin/bashsource /etc/profile#设置Nginx日志文件存放目录log_path="/usr/local/ ...

  5. Python笔记2----包、模块、库、条件循环

    包.模块.库 包指的是 : 文件夹 模块和库就是.py文件. 其中,库是一些功能相同的模块的集合,其也是模块. 1.import 模块 2.form 库 import 模块 3.import 包.子包 ...

  6. Windows GUI程序自动化之pywinauto

    一. pywinauto知识点总结 官方英文版文档网址:https://pywinauto.readthedocs.io/en/latest/index.html 1.1 pywinauto的安装与配 ...

  7. 网络教程(8）IP协议

    两台计算机间不是直接连接的,所以不能使用PPP协议,那么它们是怎么链接的呢? host A想把信息传给host B ethernet帧中的目标mac地址传到SFO后开始使用PPP协议   [Media ...

  8. omap 移植qt4.7.0

    准备: 1.Qt源码包 qt-everywhere-opensource-src-4.7.0.tar.gz 2.交叉编译器 arm-eabi-4.4.0.tar.bz2 3.触摸屏校验工具:tslib ...

  9. nginx 301 重定向设置不含www到www域名

    如果需要将不含www主机的域名301重定向到含www的域名,如将 shwww.net 重定向至 www.shwww.net,nginx 配置指令如下: server { server_name shw ...

  10. 【Educational Codeforces Round 48 (Rated for Div. 2) D】Vasya And The Matrix

    [链接] 我是链接,点我呀:) [题意] 告诉你每一行.每一列的异或和. 让你求出一个符合要求的原矩阵. [题解] 显然应该有 a1^a2^....^an = b1^b2^....^bn 也即两边同时 ...