敲7 小游戏

今天同学面试，遇到了这题，说说规则

依次从某个数开始顺序数数，数到含有7或7的倍数的要拍手或其它规定的方式表示越过（比如：7、14、17、49等都不能数出），下一人继续数下面的数字。违反规则者受罚。

重要的是 if (numss % 7 == 0 || (numss % 10 == 7))

%表示余数是多少

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="jquery-3.1.1.min.js"></script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

          .num_dic0,
        .num_dic1,
        .num_dic2,
        .num_dic3,
        .num_dic4,
        .num_dic5,
        .num_dic6,
        .num_dic7,
        .num_dic8,
        .num_dic9,
        .tips,
        .tip_s {
            border-radius: 15% 15%;
            width: 400px;
            position: fixed;
            top: 30%;
            left: 40%;
            text-align: center;
            color: #fff;
            background-color: #000;
            font-size: 24px;
        }

        .tips {
            padding: 7% 20px 7% 20px;
        }

        .tip_s {
            height: 300px;
            line-height: 300px;
        }

        .num_dic0,
        .num_dic1,
        .num_dic2,
        .num_dic3,
        .num_dic4,
        .num_dic5,
        .num_dic6,
        .num_dic7,
        .num_dic8,
        .num_dic9 {
            width: 400px;
            height: 400px;
            line-height: 400px;
            font-size: 66px;
            font-weight: bold;
        }

            .num_dic0 p,
            .num_dic1 p,
            .num_dic2 p,
            .num_dic3 p,
            .num_dic4 p,
            .num_dic5 p,
            .num_dic6 p,
            .num_dic7 p,
            .num_dic8 p,
            .num_dic9 p {
                width: 100%;
                height: 100%;
            }

        .num_dic0 {
            background-color: rgb(85, 104, 36);
        }

        .num_dic1 {
            background-color: rgba(255, 0, 0, 0.78);
        }

        .num_dic2 {
            background-color: rgba(182, 255, 0, 0.83);
        }

        .num_dic3 {
            background-color: rgba(255, 216, 0, 0.71);
        }

        .num_dic4 {
            background-color: rgba(76, 255, 0, 0.69);
        }

        .num_dic5 {
            background-color: rgba(33, 147, 147, 0.73);
        }

        .num_dic6 {
            background-color: rgba(118, 26, 106, 0.84);
        }

        .num_dic7 {
            background-color: rgba(118, 26, 106, 0.864);
        }

        .num_dic8 {
            background-color: rgba(0, 0, 0, 0.84);
        }

        .num_dic9 {
            background-color: rgba(212, 54, 191, 0.86);
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    </form>
</body>

<script>
    var numss = 1;


    function tiop() {
        var tip_div = $("body").append("<div  class='tip_s'>   我们来玩一个游戏！  </div>");
    }
    function tiop1() {
        $(".tip_s").remove();
        var item = "";
        item += "<div  class='tips'>";
        item += "依次顺序出现某个数，你看见7或7的倍数要只要喊过就可以了（比如：7、14、17、21、 27都要喊过）";
        item += "</div>";
        var tip_guiju = $("body").append(item);
    }
    function num() {
        $(".tips").remove();
        $("body div").siblings().remove();
        var radion = Math.floor(Math.random() * 10);
        var nums = "";
        if (numss % 7 == 0 || (numss % 10 == 7)) {
            nums += "<div  class='num_dic" + radion + "'>";
            nums += "        <p  class='nums'>过</p>";
            nums += "</div>";
            var tip_guiju = $("body").append(nums);
        } else {
            nums += "<div  class='num_dic" + radion + "'>";
            nums += "        <p  class='nums'>" + numss + "</p>";
            nums += "</div>";
            var tip_guiju = $("body").append(nums);
        }
        numss++;
    }

    $(function () {
        setTimeout(tiop, 10);
        setTimeout(tiop1, 1000);
        setInterval(num, 3000);


    });


</script>
</html>

View Code

用javascript 是可以美化，所以才这样做的不过大致思路是这样的

好了这就是敲7运行，代码也发出来了

猜你喜欢