javascript|js 摇骰子特效 css3|css

前言最近正好有在搜有关摇骰子的游戏，在网上看到了一篇比较不错的案例，修改了原来的代码给大家分享一下
正文这个摇骰子的动作主要是通过定时器改变骰子的图片实现的，比较简单，主要依靠setTimeout()这个函数实现得到的。下面看看代码

摇骰子.dice{ width: 100px; height: 100px; background-image: url(1.jpg); cursor: pointer; position: relative; }

【javascript|js 摇骰子特效】

dice.css('cursor','default');

这个表示jq中设置css属性，这里是设置鼠标指针放在一个元素边界范围内时所用的光标形状。
dice.css('background-image','url(d3.jpg)')
这个是配置样式下的背景图片，最后一个使用随机数是为了随机展示一面数字。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMNDvlWU-1653975611721)(https://juejin.cn/ “点击并拖拽以移动”)]
然后是用到的图片

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckGWnUtm-1653975611722)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0NbB7Szo-1653975611722)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-siP0F6u6-1653975611725)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x35wtnuk-1653975611725)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZoiXV1fI-1653975611726)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zCXRkiEH-1653975611726)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uqoFj0qo-1653975611727)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uf611yyO-1653975611727)(https://juejin.cn/ “点击并拖拽以移动”)]?

文章图片
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNXe5LRQ-1653975611728)(https://juejin.cn/ “点击并拖拽以移动”)]?
前面的是六个面，后面是演示动作的图，看起来就像是动的。
点击后通过定时器按顺序显示，最后通过随机数显示骰子的面。
这里和原来参考的代码不同的有两个地方一是定时器的时间（原来的代码中所有定时器时间都是200），二是最后显示的面原来的代码没有加定时器。
原来的我直接用有些问题，动作图由于定时器时间相同，你只能看到最后一张。
然后我查了setTimeout的用法。
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
如果多个setTimeout执行，又是需要顺序显示图片，那时间需要设置不同,这样可以是图片在不同时间显示不一样的图片。尽管代码还是会按顺序执行。但是由于多张图几乎同时显示，肉眼是只能看到一张的。只有时间不同才能看到多张图，产生骰子转动的错觉。