简单js之猜数字小游戏

1.<body>内容

<div id="box">
            <div id="title">
                <b>猜数字游戏</b>
            </div>
            <div id="text1">
                <p>现在已生成一个1-100的数<br />字,猜中有奖</p>
            </div>
            <div id="text">
                <input type="text"  id="text2"/>
            </div>
            <div id="button1">
                <input type="button" value="确认" id="right" />

            </div>
            <div id="show">
                <div id="showText"></div>
            </div>
                <!--<input type="button" value="再来" id="again" />-->
            
        </div>

2.CSS样式设置

<style type="text/css">
            #box{
                width:225px;
                height: 313px;
                /*background: blue;*/
                margin:100px auto;
                border: 1px solid black;
            }
            #title{
                width: 180px;
                height: 63px;
                font-size:33px;
                padding-left:45px ;
                padding-top: 10px;
            }
            #text1{
                width: 180;
                height: 59px;
                font-size: 14px;
                padding: 0px 20px;
                align-content: center;
            }
            P{
                text-align: center;
            }
            #text{
                width:225px ;
                height: 55px;
                /*background: blue;*/
                position: relative;
            }
            #text2{
                width:104px ;
                height: 53px;
                position: relative;
                left: 58px;
                border: 1px solid black;
            }
            #button1{
                width:225px ;
                height: 42px;
                /*background: blue;*/
                position: relative;
            }
            #right{
                width: 104px;
                height:27px ;
                border: 1px solid black;
                position: relative;
                background: #ebebeb;
                left: 58px;
                top: 13px;
            }
            
            #show{
                width: 220px;
                height: 60px;
                border: none;               
            }
            #showText{
                width: 120px;
                height: 54px;
                position: relative;
                left: 96px;
                top: 10px;
                font-size: 16px;
                color: #958787;
            }
            
        </style>

3.js设置

<script>
            var show = document.getElementById('showText')
            var right = document.getElementById('right')
            var oText = document.getElementById('text2')
            
            var b = parseInt(Math.random()*100)
            
            right.onclick = function(){
                var t = oText.value
                if(b>t){
                    show.innerHTML='小了'
                }else if(b<t){
                    show.innerHTML='大了'
                }else{
                    show.innerHTML='猜中了'
                }
            }
            
        </script>

4.实现页面


03-猜数字.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容