掷骰子

最新推荐文章于 2021-06-07 12:52:07 发布

weixin_30765505

最新推荐文章于 2021-06-07 12:52:07 发布

阅读量297

点赞数

原文链接：http://www.cnblogs.com/web-learning/p/10483243.html

版权

掷骰子,效果如下

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>动态图片切换</title>
        <meta charset="UTF-8">
        <link href="css/style.css" rel="stylesheet">
        
    </head>
    <body>       
        <!-- 游戏区域 -->
        <div id="container">
            <img src="images/dice_1.png" id="dice" alt="">
        </div>
        <div id="command">
            <input id="btn" type="button" value="摇一摇">
        </div>
    </body>
</html>
<script src="../common.js"></script>
<script type="text/javascript">
    let $command = $('#command');
    let $img = $('img');
    $command.onclick = function(){
        $img.src = "images/diceDynamic.gif";
        let num = getRandom(6,1)
        setTimeout(() => {
            $img.src = "images/dice_"+ num +".png";
        }, 1000);      
    }
    
</script>

style.css

*{margin:0; padding:0}
#container{padding:10px;width:200px;margin:auto;height:200px;border:orange solid 1px; border-radius:8px;}
#dice{width:200px;height:200px;}
#command{margin:auto;width:100px;}
#command input{width:100px;height:30px;border:#ccc solid 1px;border-radius:8px;}

.project

<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
    <name>2掷骰子hw</name>
    <comment></comment>
    <projects>
    </projects>
    <buildSpec>
        <buildCommand>
            <name>com.aptana.ide.core.unifiedBuilder</name>
            <arguments>
            </arguments>
        </buildCommand>
    </buildSpec>
    <natures>
        <nature>com.aptana.projects.webnature</nature>
    </natures>
</projectDescription>

转载于:https://www.cnblogs.com/web-learning/p/10483243.html

weixin_30765505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
掷骰子

掷骰子,效果如下index.html<!DOCTYPE html><html lang="en"> <head> <title>动态图片切换</title> <meta charset="UTF-8"> <link href="css/style.css"...
复制链接

扫一扫