body主体

   <div id="box">
        <h1>猜数字游戏</h1>
        <div class="text">
            <span>现在已生成一个1-100的数字，猜中有奖</span>
        </div>
        <div class="in">
            <input type="text" id="num"/>
        </div>
            <input type="button" value="确定" onclick="guess()"/>
        <div id="anwser" style="font-size: 25px;">
            
        </div>   
    </div>

给盒子设置样式

<style type="text/css">
            #box{
                width: 185px;
                height: 263px;  
                margin: 0 auto ;
                padding: 10px 20px 40px;
                border: 1px solid black;
            }
            
            #box h1{
                width: 185px;
                height: 30px;
                margin: 0 10px 30px;
            }
            #box .text{
                text-align: center; 
            }
            #box .in input{
                font-size: 25px;
                text-align: center;
                width: 105px;
                height: 53px;
                margin: 18px 40px 14px;
            }
            #box input{
                text-align: center;
                width: 110px;
                height: 30px;
                margin: 0 40px;
            }
            #box #anwser{
                text-align: center;
                padding-top: 25px;
            
            }
        </style>

JS

 <script type="text/javascript">
     onload= function(){
        x = parseInt(Math.random()*100+1)
        var spa = document.getElementById('anwser')
        console.log(x)
        function guess(){
            var num =document.getElementById('num').value
            console.log(num)
            if(x==num){
                spa.innerHTML='猜对了'
            }else if(x<num){
                spa.innerHTML='大了'
            }else if(x>num){
                spa.innerHTML='小了'
            }
        }
            }
</script>