js 简单摇筛子

最新推荐文章于 2023-12-29 13:24:17 发布

今天想吃柠檬

最新推荐文章于 2023-12-29 13:24:17 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签： html css javaScript

本文链接：https://blog.csdn.net/m0_37723564/article/details/85290302

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言

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

正文

这个摇骰子的动作主要是通过定时器改变骰子的图片实现的，比较简单。下面看看代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>摇骰子</title>
        <style type="text/css">
            .dice{
                width: 100px;
                height: 100px;
                background-image: url(1.jpg);
                cursor: pointer;
                position: relative;

            }       
        </style>
    </head>
    <body>
        <div class="dice">

        </div>
    </body>
    <script src="jquery-3.3.1.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);
               
               setTimeout(function(){
                   dice.css('background-image','url(d1.jpg)');
               },200);
               setTimeout(function(){
                   dice.css('background-image','url(d2.jpg)');
               },400);
               setTimeout(function(){
                   dice.css('background-image','url(d3.jpg)')
               },600);
              setTimeout(function(){
                  dice.css('background-image','url('+num+'.jpg')
              },700);
           });
       });
    </script>
</html>

然后是用到的图片