【JavaEE】_JavaScript简单使用

示例1：猜数字

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GuessNumber</title>
</head>
<body>
    <div>请输入要猜的数字</div>
    <input type="text">
    <button>提交</button>
    <div class="result">

    </div>
    <script>
        //1. 生成一个1~100的随机整数
        let toGuess=parseInt(100*Math.random())+1;
        console.log(toGuess)
        //Math.random()生成的是[0,1)之间的随机数
        //2. 进行猜数字操作
        let button = document.querySelector('button');
        let input = document.querySelector('input');
        let resultDiv = document.querySelector('.result');
        button.onclick=function(){
            //3. 取出输入框中的内容
            if(input.value == ''){  
                // 用户没有输入，直接返回
                return;
            }
            let inputNum = parseInt(input.value);
            //4. 比较大小关系
            if(inputNum<toGuess){
                resultDiv.innerHTML = '猜小了';
            }else if(inputNum>toGuess){
                resultDiv.innerHTML = '猜大了';
            }else{
                resultDiv.innerHTML = '猜中了';
            }
        }
        
    </script>
</body>
</html>

运行后页面如下：

随机生成的数字可以在console标签页查看：

在文本框中输入猜测的数字即可，如：

示例2：留言板

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MessageWall</title>
    <style>
        /* 可以使用* 通配符选择器，即选中页面所有元素 */
        *{
            /* 消除浏览器的默认样式 */
            margin:0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 600px;
            margin: 40px auto;  /*水平居中*/
        }
        h1{
            text-align: center;
        }
        p{
            text-align: center;
            color:#666;
            margin:20px 0;
        }
        .row{
            /* 开启弹性布局 */
            display: flex;
            height:40px;
            /* 水平方向居中 */
            justify-content: center;
            /* 垂直方向居中 */
            align-items: center;

        }
        .row span{
            width:80px;
        }
        .row input{
            width:200px;
            height:25px;
        }
        .row button{
            width:280px;
            height:30px;
            color:white;
            background-color: orange;
            border: none;   /*去掉边框*/
            border-radius: 10px;
        }
        /* 点击的时候有反馈（伪类选择器） */
        .row button:active{
            background-color:grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>对谁：</span>
            <input type="text">
        </div>

        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>

        <div class="row">
            <button>提交</button>
        </div>
    </div>
    <script>
        // 点击提交按钮时，就可以将用户输入的内容提交到页面上显示
        // 创建新的div.row，把内容构造到这个div中
        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('button');
        button.onclick = function(){
            //1. 获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let message = inputs[2].value;
            if(from == ''|| to == ''|| message == ''){
                return;
            }
            //2. 构造新div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from+"对"+to+"说："+message;
            containerDiv.appendChild(rowDiv);
            //3. 提交后清空输入框内容
            for(let input of inputs){
                input.value = '';
            }
        }

    </script>
</body>
</html>

运行后页面如下：

输入内容点击提交后运行结果如下：