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. 相似图像识别检 —基于图像签名（LSH）

    原文链接:http://grunt1223.iteye.com/blog/828192 参考:人工智能,一种现代方法 第 617页,且原始论文给出了完整的证明过程.在ANN方法中,LSH算一种可靠的紧 ...

  2. 图像检索中为什么仍用BOW和LSH

    原文链接:http://blog.csdn.net/jwh_bupt/article/details/27713453 去年年底的时候在一篇博客中,用ANN的框架解释了BOW模型[1],并与LSH[2 ...

  3. 还是UVa340

    #include<stdio.h> #define maxn 1010 int main() { int num,a[maxn],i,j,b[maxn]; ; &&num) ...

  4. Find Bugs

    为什么没有早点知道有这么好用的插件呢?

  5. PhotoZoom Classic 7中的新功能

    众所周知PhotoZoom Classic是家庭使用理想的放大图像软件.目前很多用户还在使用PhotoZoom Classic 6,对于PhotoZoom Classic 7还是有点陌生.其实在6代衍 ...

  6. Java导出Excel文件的两种方法

    将数据以Excel表格的形式导出:首先下载poi的jar包,导入项目中,或者使用maven仓库管理,在pom文件添加:<dependency>    <groupId>org. ...

  7. BZOJ 1725: [Usaco2006 Nov]Corn Fields牧场的安排 状压动归

    Description Farmer John新买了一块长方形的牧场,这块牧场被划分成M列N行(1<=M<=12; 1<=N<=12),每一格都是一块正方形的土地.FJ打算在牧 ...

  8. Python爬虫2------爬虫屏蔽手段之代理服务器实战

      1.代理服务器: 一个处于客户端与互联网中间的服务器,如果使用代理服务器,当我们浏览信息的时候,先向代理服务器发出请求,然后由代理服务器向互联网获取信息,再返回给我们. 2.代码: import ...

  9. 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  10. linux采用scp命令拷贝文件到本地，拷贝本地文件到远程服务器

    // 假设远程服务器IP地址为 192.168.1.100 1.从服务器复制文件到本地: scp root@192.168.1.100:/data/test.txt /home/myfile/ roo ...