js 摇骰子特效

前言

最近正好有在搜有关摇骰子的游戏,在网上看到了一篇比较不错的案例,修改了原来的代码给大家分享一下

正文

这个摇骰子的动作主要是通过定时器改变骰子的图片实现的,比较简单,主要依靠setTimeout()这个函数实现得到的。下面看看代码



    
        
        摇骰子
        
    
    
        

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执行,又是需要顺序显示图片,那时间需要设置不同,这样可以是图片在不同时间显示不一样的图片。尽管代码还是会按顺序执行。但是由于多张图几乎同时显示,肉眼是只能看到一张的。只有时间不同才能看到多张图,产生骰子转动的错觉。

你可能感兴趣的:(javascript,css,css3)