2018.07.25 HTML+CSS+JS小项目猜数字

最新推荐文章于 2024-06-20 13:45:49 发布

AD_ando

最新推荐文章于 2024-06-20 13:45:49 发布

阅读量595

点赞数 1

文章标签：学习记录

本文链接：https://blog.csdn.net/qq_42715745/article/details/81254161

版权

时间：2018.07.25 大一学期末暑假
地点：成都-实习
项目类型：网页结合js制作的猜数字
制作时间：两天

网页源码：

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>无标题文档</title>
</head>

<body>
<div class="rule">
    <h2>欢迎来到猜数字！</h2><br>
        <p>
        <b>规则介绍：</b><br>
        当前，<b>您有8次猜数字的机会</b><br>
        <b style="font-weight: 600;color: #E00003;">系统将会随机生成一个0~100以内且生成后不变的数字</b><br>
        <b>您输入一个0~100以内的数字后</b>，系统会判断是否与随机生成的数字吻合<br>
        <b>如果您输入的偏大，则会告知偏大，同理偏小则告知偏小</b><br>
        8次机会如果能猜出，则胜利,否则将失败!<br>
        </p>
</div>
<div class="userscan">
    <p>请在下面输入您决定的数字：
    <br>
    <form id="formstyle">
        <input type="number" name="usernum"  id="textbox">
        <button type="button" id="submitbox" onClick="userNumber()">提交</button>
        </form>
    </p>

</div>
<div class="judgeview">
    <p id="judgep1">请输入您的数字!<span id="judge"></span></p>

    <p id="judgep2">当前您还剩：<span id="chance"></span> 次机会</p>

</div>

样式代码：

@charset "utf-8";
/* CSS Document */

/*规则样式*/
    *{
        margin: 0;
        padding: 0;
    }
    body{
        font-family: "微软雅黑";
        font-weight: 100;
        width:auto;
        height: auto;
    }
    b{
        font-weight: 500;
    }
    .rule{
        text-align: center;
        background: linear-gradient(to right ,#00FF84,#00E3FF);

        padding: 30px;
    }
    .rule h2{
        word-spacing:50px;
    }
    .rule p{

        font-size: 18px;
    }
    form{
        display: inline;
    }
    /*用户输入界面*/
    .userscan{
        background: linear-gradient(to right ,#000,#C8C8C8);
        text-align: center;
        position: relative;
        padding: 50px;
        width:auto;
        height: 20%;
    }
    .userscan p{
        margin: auto;
        color: #FFFFFF;
        width:100%;
    }
    .userscan form{
        display: block;
        margin: 2% 0 0 0;
        padding: 0 5% 0 0;
    }
    #textbox{
        margin: auto;
        border-radius:20px 0 0 20px;
        border:1px solid #9F9F9F;
        width:10%;
        height:50px;
        outline:none;
        font-size:24px;
        border: none;

    }
    #submitbox{
        border: none;
        margin: auto;
        display:inline;
        border-radius:0px 20px 20px 0px;
        position: absolute;
        border:1px none #000;
        background: linear-gradient(to right ,#1CBFFF,#3A9FFF);
        width:5%;
        height:50px;
        color: #FFFFFF;
        font-size:16px;
        font-weight:600;
        outline:none;
        font-size:20px;
        margin-left: -5px;
    }
    /*判断界面*/
    .judgeview{
        width: 100%;
        height:400px;
        background: linear-gradient(to right ,#C000FF,#F0FF00);
    }
    .judgeviwe p{
        display: none;


    }
    #judgep1{
        width: 100%;
        height:30%;
        text-align: center;
        padding:80px 0 0 0px;
        font-size: 24px;
        font-weight: 600;

    }
    #judgep2{
        width: 100%;
        height:40%;
        text-align: center;
        padding:20px 0 0 0px;
        font-size: 24px;
    }
    #randwindow{
        display:block;
    }
    #judge{
        font-size: 50px;
        color:#FD0000;
    }
    #chance{
        color:#FD0000;
        font-weight: 600;
        font-size: 40px;
    }

js代码：

// JavaScript Document
//对移动设备进行样式适
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        alert("test");
        document.getElementById("textbox").style.width="35%";
        document.getElementById("submitbox").style.width="20%";
    }

    //定义系统随机生成的数字,声明用户的数字
    var systemnum = Math.round(Math.random()*100); 
    var usernum;
console.log(judge)
    //声明计数变量，用于储存用户剩余机会
    var index = 8;
    document.getElementById("chance").innerHTML=index;

    //对数字进行处理的方法    
    function userNumber(){

        //储存用户提交数据
        usernum = document.getElementById("textbox").value; 

        //参数过滤
        if( usernum < 0 || usernum > 100 || usernum == ''){
            //替换空字符为“空”
            if(usernum == ''){
                usernum = "空";
            }
            //弹出警告
            alert("您输入的数字不合法！请重新输入！不允许为：" + usernum + " !" );
            return;
        }

        //判断结果
        if(systemnum < usernum){
            document.getElementById("judgep1").innerHTML=`您输入的结果：<span id="judge">偏大</span>`;
        }
        else if(systemnum > usernum){
            document.getElementById("judgep1").innerHTML=`您输入的结果：<span id="judge">偏小</span>`;
        }
        else{
            index = - 1;
            document.getElementById("judgep2").innerHTML=`你猜对了！YOU WIN！`;
            document.getElementById("judgep1").innerHTML=`正确数字就是：<span id="judge">` + systemnum + `~</span>`;
            document.getElementById("submitbox").disabled=true;
            return; 
        }

        //判断机会余额
        if(index == 0){
        document.getElementById("judgep2").innerHTML=`您已失败！！！正确的数字是：` + systemnum + `~` ;
        alert("您的机会已经用完！！！");
        return;
        }else if( index == -1){
            return;
        }

        //机会减少
        index--;
        document.getElementById("chance").innerHTML=index;

        return;

    }

总结：时隔大半年，重温了一个星期的HTML和CSS，花了几天快速学习JS，写的一个可以玩的网页小项目

AD_ando

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
2018.07.25 HTML+CSS+JS小项目猜数字

时间：2018.07.25 大一学期末暑假地点：成都-实习项目类型：网页结合js制作的猜数字制作时间：两天网页源码：&lt;!Doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;meta name="viewport" content="width=device-
复制链接

扫一扫