JS实现掷骰子
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实现掷骰子的更多相关文章
- jQuery掷骰子
网上找的jQuery掷骰子效果,测试兼容IE7及以上浏览器,IE6没有测试 js代码如下: $(function(){ var dice = $("#dice"); dice.cl ...
- 掷骰子-IOS新手项目练习（抱歉，由于个人原因，图片没显示，要源码的项目私聊）
---恢复内容开始--- 今天我们来讲的就是项目<掷骰子> 首先我们先下载资源包,也就是我们需要的图片[点击图片下载] 在我们下载完图片之后,我们就可以开始创建项目 一.我们项目的做法可以 ...
- html5掷骰子的小demo
代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...
- TurnipBit开发板掷骰子小游戏DIY教程实例
转载请以链接形式注明文章来源(MicroPythonQQ技术交流群:157816561,公众号:MicroPython玩家汇) 0x00前言 下面带大家用TurnipBit开发板实现一个简单的小游戏- ...
- 掷骰子DApp的实现
前言: DApp前些日子比较火, 这段时间有些低迷. 我也是后知后觉, 现在才接触一些, 这篇博文就当做DApp的初次印象吧. 本文要写的是基于智能合约的博彩游戏DApp—骰子游戏, 来看看它是怎 ...
- python-模拟掷骰子，两个筛子数据可视化
""" 作者:zxj 功能:模拟掷骰子,两个筛子数据可视化 版本:3.0 日期:19/3/24 """ import random impo ...
- 纯php实现中秋博饼游戏（2）：掷骰子并输出结果
这篇是纯php实现中秋博饼游戏系列博文(2) 上文是:纯php实现中秋博饼游戏(1):绘制骰子图案 http://www.cnblogs.com/zqifa/p/php-dice-1.html要纯ph ...
- 掷骰子游戏窗体实现--Java初级小项目
掷骰子 **多线程&&观察者模式 题目要求:<掷骰子>窗体小游戏,在该游戏中,玩家初始拥有1000的金钱,每次输入押大还是押小,以及下注金额,随机3个骰子的点数,如果3个骰 ...
- 3星|《给你讲个笑话：我是创业公司CEO》:创业成功就是上帝掷骰子
给你讲个笑话:我是创业公司CEO 作者有过数次创业经历,最后一次在济南创业,后来公司搬到北京,看书中的交代公司目前好像还不算太成功.书中交代作者公司的业务是文化产品的策划,没细说做什么,也没说做成过哪 ...
随机推荐
- 3D特征：关于HFM和HBB
1.HBB 三维绑定框 (1): 要用到HBB,定义还不太清楚,来自于 VALVE Developer Community (https://developer.valvesoftware.co ...
- Pycharm 设置
1:显示行号 打上对勾OK 2:设置作者 & 文件编码 3:选择切换Python的版本
- Java泛型的一段代码
package com.chase.test; import java.util.ArrayList; import java.util.Hashtable; import java.util.Lis ...
- VMware ESXi定制版(OEM ISO)资源下载（包含5.1\5.5\6.0）
一.VMware ESXi 5.1.0 update03 1.VMware-ESXi-5.1.0-Update3-2323236-hitachi-0400.iso(日立) 2.VMware-ESXi ...
- js中浏览器兼容startsWith 、endsWith 函数
在做js开发的时候用到了startsWith函数时,发现各个浏览器不兼容问题,因为对开发来说,chrome浏览器最好用,就一直在chrome浏览器中使用这两个函数没有任何问题,但在ie浏览器访问就直接 ...
- Unsupported platform for fsevents@1.2.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
系统:win10 使用 npm 安装依赖时报错: Unsupported platform for fsevents@1.2.3: wanted {"os":"darwi ...
- linux ubuntu安装好后，开通远程登录
1.设置root密码 ubuntu安装好后,用初始的第一个用户登录,然后修改root密码: sudo passwd root 2.检查sshd服务是否启动 (1)查看sshd状态 -----若没有ss ...
- 【Codeforces Round #507 (Div. 2, based on Olympiad of Metropolises) A】Palindrome Dance
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] i从1..n/2循环一波. 保证a[i]和a[n-i+1]就好. 如果都是2的话填上min(a,b)*2就好 其他情况跟随非2的. ...
- 【hihocoder 1032】最长回文子串
[题目链接]:http://hihocoder.com/problemset/problem/1032 [题意] [题解] 原文地址:https://segmentfault.com/a/119000 ...
- Emgu cv人脸检测识别
Emgu cv人脸检测识别 1.开发平台:WIN10 X64 VS2012 Emgucv版本:3.1 2.先给大家分享一个官网给的示例源代码: https://ncu.dl.sourcef ...