前言 最近正好有在搜有关摇骰子的游戏,在网上看到了一篇比较不错的案例,修改了原来的代码给大家分享一下
正文 这个摇骰子的动作主要是通过定时器改变骰子的图片实现的,比较简单,主要依靠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执行,又是需要顺序显示图片,那时间需要设置不同,这样可以是图片在不同时间显示不一样的图片。尽管代码还是会按顺序执行。但是由于多张图几乎同时显示,肉眼是只能看到一张的。只有时间不同才能看到多张图,产生骰子转动的错觉。
推荐阅读
- 如何使用HTML和CSS创建具有悬停效果的动画导航栏()
- 如何使用HTML,CSS和JavaScript创建二进制计算器()
- 70行JavaScript代码实现除夕夜倒计时 零基础也能学会~
- 如何在JavaScript中将Map键转换为数组()
- 前端|利用html和css制作一个简单的网页(端午快乐)
- 如何使用HTML和CSS在文本背景中添加图像()
- JavaScript|英雄联盟轮播图逻辑
- 如何在JavaScript中实现HashMap(详细实现指南)
- CSS如何实现元素对齐()