用js实现翻牌的效果

最新推荐文章于 2020-07-29 21:52:56 发布

转载最新推荐文章于 2020-07-29 21:52:56 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangwei1234/p/4541932.html

文章标签：

#前端 #javascript #ViewUI

本文介绍如何使用HTML、CSS和JavaScript创建一个简单的猜数字游戏。通过随机生成一个1到9之间的整数，用户需要在不显示具体数字的情况下猜测这个数字。游戏包含鼠标悬停提示、点击事件和中奖提示。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 386px;
            height: 386px;
            border: 1px solid red;
            margin: 100px auto auto auto;
        }

        li{
            float: left;
            width: 100px;
            height: 100px;
            border-radius:20px;
            text-align: center;
            line-height: 100px;
            border: 1px solid red;
            list-style: none;
            margin: 20px auto auto 20px;
            background-color: red;
            font-size: 30px;
            color:white;
            font-family: "幼圆";

            transition-property:all;
            -webkit-transition-property:all;
            -moz-transition-property:all;
            -o-transition-property:all;
            -mz-transition-property:all;

            transition-duration:1s;
            -webkit-transition-duration:1s;
            -moz-transition-duration:1s;
            -o-transition-duration:1s;
            -mz-transition-duration:1s;


        }

        .fanzhuan{
            -webkit-transform: rotateY(360deg);
        }



    </style>

    <script type="text/javascript">
        var num = Math.floor((Math.random()*9))+1;

        window.onload = function(){
            var lis = document.getElementsByTagName("li");
            for(var i=0;i<lis.length;i++){
                lis[i].onmouseover = function(){
                    this.innerHTML = "猜猜看";
                }
                lis[i].onmouseout= function(){
                    this.innerHTML = "";
                    this.className = "";
                }
                lis[i].onclick = function(){
                    if(num==parseInt(this.getAttribute("id"))){
                        alert("中奖了！")
                    }
                    this.className = "fanzhuan";
                    this.innerHTML = parseInt(this.getAttribute("id"));
                }
            }


        }




    </script>

</head>
<body>
    <div>
        <ul>
            <li id="1"></li>
            <li id="2"></li>
            <li id="3"></li>
            <li id="4"></li>
            <li id="5"></li>
            <li id="6"></li>
            <li id="7"></li>
            <li id="8"></li>
            <li id="9"></li>

        </ul>
    </div>
</body>
</html>