原生JS 实现投掷骰子效果

平常小伙伴玩游戏可能会接触投骰子

随机1~6位数判断大小来算输赢

今天我就用学习两天半的技术来写一个简陋的投骰子效果

思路：

1.准备7张图片（1~6点和一张动态骰子（gif）图）

2.获取标签

3.设定随机事件

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>#btn {width: 80px;height: 35px;background-color: aquamarine;border: none;color: black;cursor: pointer;border-radius: 3px;}#btn:hover {background: rgba(118, 209, 179, 0.74);}</style></head><body><imgsrc="./img/1.png"alt=""style="width: 200px; height: 200px"id="img"/><button id="btn">开始摇摆</button><script>var _btn = document.getElementById("btn");var _img = document.getElementById("img");//单击事件_btn.onclick = function () {//设置一个摇摆的图片_img.src = "./img/x.gif";setTimeout(function () {//随机点数var no = Math.ceil(Math.random() * 6);//设置图片_img.src = "./img/" + no + ".png";}, Math.ceil(Math.random() * 2000));};</script></body>
</html>

效果如下：

由于我自身还没激活截取Gif图片的功能，就放了张静态图在这里，复制源码

加入图片（贴心的我图片都给你们粘过来了）动动小手点个赞吧（doge）：

点击即可旋转起来

原生JS 实现投掷骰子效果相关推荐

html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
react中react-custom-scrollbars返回顶部功能，如何使其有平滑动画效果；原生js scroll平滑动画效果
1.Scrollbars是react-custom-scrollbars插件暴露出来的组件 scrollRef.current.view.scroll({top: 0,left: 0,behavior ...
原生JS实现简单放大镜效果
[前言] 本文介绍下原生JS实现简单图片放大镜效果 [主体] 时间问题,直接上源码 <!DOCTYPE html> <html> <head><meta ch ...
用原生js实现刮奖效果
用原生js实现简单的刮奖效果效果图分析:这是运用canvas来做的,页面结构为一个canvas和一张图片.canvas在最上层,图片在最下层.canvas与图片宽高一致.首先在canvas上填充灰 ...
原生JS实现瀑布流效果
前两天通过B站在极客学院学习了JS动态瀑布流效果:主要是HTML+CSS控制样式,通过JS实现全局瀑布流样式,以及通过访问自定义的JSON字符串,实现图片无限加载:现对其代码进行整理,供日后学习参考. ...
原生js实现跑马灯效果，鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...
原生JS实现淡出淡入效果
前言一提到淡入淡出效果,大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数,它们被封装到库中,很方便被调用.但是有时候只为了一个简单的淡入淡出效果,并不需 ...
html完成公告滚动条,原生js实现公告滚动效果
本文实例为大家分享了js实现公告滚动展示的具体代码,供大家参考,具体内容如下 1.html结构我是公告1 我是公告2 我是公告3 我是公告4 2.css样式 body, div, ul, li { ...

原生JS 实现投掷骰子效果

原生JS 实现投掷骰子效果相关推荐

最新文章

热门文章