• 【JavaEE】_JavaScript简单使用

    目录

    示例1：猜数字

    示例2：留言板

    示例1：猜数字

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>GuessNumbertitle>
    7. head>
    8. <body>
    9.     <div>请输入要猜的数字div>
    10.     <input type="text">
    11.     <button>提交button>
    12.     <div class="result">
    13.  
    14.     div>
    15.     <script>
    16.         //1. 生成一个1~100的随机整数
    17.         let toGuess=parseInt(100*Math.random())+1;
    18.         console.log(toGuess)
    19.         //Math.random()生成的是[0,1)之间的随机数
    20.         //2. 进行猜数字操作
    21.         let button = document.querySelector('button');
    22.         let input = document.querySelector('input');
    23.         let resultDiv = document.querySelector('.result');
    24.         button.onclick=function(){
    25.             //3. 取出输入框中的内容
    26.             if(input.value == ''){  
    27.                 // 用户没有输入，直接返回
    28.                 return;
    29.             }
    30.             let inputNum = parseInt(input.value);
    31.             //4. 比较大小关系
    32.             if(inputNum
    33.                 resultDiv.innerHTML = '猜小了';
    34.             }else if(inputNum>toGuess){
    35.                 resultDiv.innerHTML = '猜大了';
    36.             }else{
    37.                 resultDiv.innerHTML = '猜中了';
    38.             }
    39.         }
    40.         
    41.     script>
    42. body>
    43. html>

    运行后页面如下：

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

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

    示例2：留言板

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>MessageWalltitle>
    7.     <style>
    8.         /* 可以使用* 通配符选择器，即选中页面所有元素 */
    9.         *{
    10.             /* 消除浏览器的默认样式 */
    11.             margin:0;
    12.             padding: 0;
    13.             box-sizing: border-box;
    14.         }
    15.         .container{
    16.             width: 600px;
    17.             margin: 40px auto;  /*水平居中*/
    18.         }
    19.         h1{
    20.             text-align: center;
    21.         }
    22.         p{
    23.             text-align: center;
    24.             color:#666;
    25.             margin:20px 0;
    26.         }
    27.         .row{
    28.             /* 开启弹性布局 */
    29.             display: flex;
    30.             height:40px;
    31.             /* 水平方向居中 */
    32.             justify-content: center;
    33.             /* 垂直方向居中 */
    34.             align-items: center;
    35.  
    36.         }
    37.         .row span{
    38.             width:80px;
    39.         }
    40.         .row input{
    41.             width:200px;
    42.             height:25px;
    43.         }
    44.         .row button{
    45.             width:280px;
    46.             height:30px;
    47.             color:white;
    48.             background-color: orange;
    49.             border: none;   /*去掉边框*/
    50.             border-radius: 10px;
    51.         }
    52.         /* 点击的时候有反馈（伪类选择器） */
    53.         .row button:active{
    54.             background-color:grey;
    55.         }
    56.     style>
    57. head>
    58. <body>
    59.     <div class="container">
    60.         <h1>表白墙h1>
    61.         <p>输入内容后点击提交，信息会显示到下方表格中p>
    62.         <div class="row">
    63.             <span>谁：span>
    64.             <input type="text">
    65.         div>
    66.  
    67.         <div class="row">
    68.             <span>对谁：span>
    69.             <input type="text">
    70.         div>
    71.  
    72.         <div class="row">
    73.             <span>说：span>
    74.             <input type="text">
    75.         div>
    76.  
    77.         <div class="row">
    78.             <button>提交button>
    79.         div>
    80.     div>
    81.     <script>
    82.         // 点击提交按钮时，就可以将用户输入的内容提交到页面上显示
    83.         // 创建新的div.row，把内容构造到这个div中
    84.         let containerDiv = document.querySelector('.container');
    85.         let inputs = document.querySelectorAll('input');
    86.         let button = document.querySelector('button');
    87.         button.onclick = function(){
    88.             //1. 获取到三个输入框的内容
    89.             let from = inputs[0].value;
    90.             let to = inputs[1].value;
    91.             let message = inputs[2].value;
    92.             if(from == ''|| to == ''|| message == ''){
    93.                 return;
    94.             }
    95.             //2. 构造新div
    96.             let rowDiv = document.createElement('div');
    97.             rowDiv.className = 'row';
    98.             rowDiv.innerHTML = from+"对"+to+"说："+message;
    99.             containerDiv.appendChild(rowDiv);
    100.             //3. 提交后清空输入框内容
    101.             for(let input of inputs){
    102.                 input.value = '';
    103.             }
    104.         }
    105.  
    106.     script>
    107. body>
    108. html>

    运行后页面如下：

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

  • 相关阅读:
    Deep Few-Shot Learning for Hyperspectral Image Classification-浅读
    Rocksdb加SPDK改善吞吐能力建设
    【附安装包】3ds Max2023安装教程
    Java面试中的常问的多线程问题
    JVM整体结构
    教育学大佬是怎么找外文参考文献的？
    纽约联储测试CBDC以改善MogaFX外汇交易
    企业转型升级之道：数字化转型，思想先行
    【cmake】cmake应用：安装和打包
    软件测试之自动化测试
  • 原文地址：https://blog.csdn.net/m0_63299495/article/details/132922231