JavaScrip练习

HTML+JS计算器

<!DOCTYPE html>
<html>
<head>
    <title>Calculator</title>
</head>
<body>
<!-- 计算器显示 -->
<input type="text" id="display" disabled>
<br>
    <!--
        计算器按钮
        onclick ：鼠标点击事件
        addToDisplay：添加到显示
     -->
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('+')">+</button><br>

<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button><br>

<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('*')">*</button><br>

<button onclick="addToDisplay('0')">0</button>
<button onclick="addToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button><br>

<!-- Calculator script -->
<script>
    //将value值添加到显示器上
    function addToDisplay(value) {
        //文档.获取id元素
        document.getElementById('display').value += value;
    }
    //计算结果并返回
    function calculate() {
        //计算值
        var result = eval(document.getElementById('display').value);
        document.getElementById('display').value = result;
    }
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QjqJVkyz-1685320511518)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413110624813.png)]$

用户输入显示

<!DOCTYPE html>
<html >

<head>
    <meta charset="UTF-8">
    <title>User Input Display</title>
</head>
<body>
<!--创建一个标签和输入字段，以便用户输入数据-->
<label for="userInput">输入您的内容:</label>
<input type="text" id="userInput">
<!--创建一个按钮，当用户点击时，嗲用displayInput函数-->
<button onclick="displayInput()">点击查看</button>
<!--创建一个段落元素，用来显示用户输入的内容-->
<p id="displayArea"></p>

<script>
    function displayInput() {
        //获取用户输入的值
        var userInput = document.getElementById("userInput").value;
        //将用户输入的值显示到段落标签中
        document.getElementById("displayArea").innerHTML = userInput;
    }
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KQo6Juy4-1685320511518)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413111228704.png)]$

随机码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Random Verification Code</title>
</head>
<body>
<h1>随机验证码:</h1>
<p id="code"></p>
<button onclick="generateCode()">生成随机码</button>
<script>
    function generateCode() {
        var code = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        for (var i = 0; i < 6; i++) {
            code += possible.charAt(Math.floor(Math.random() * possible.length));
        }
        document.getElementById("code").innerHTML = code;
    }
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XCxeK8w5-1685320511519)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113012826.png)]$

密码校验

<!DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Page</title>
</head>
<body>
<form>
   <label for="password1">密码:</label>
   <input type="password" id="password1" name="password1"><br><br>
   <label for="password2">重复密码:</label>
   <input type="password" id="password2" name="password2"><br><br>
   <input type="submit" value="提交">
</form>
<script>
   const password1 = document.getElementById("password1");
   const password2 = document.getElementById("password2");
   const form = document.querySelector("form");
   form.addEventListener("submit", function(event) {
      if (password1.value !== password2.value) {
         alert("密码不一致");
         event.preventDefault();
      }
   });
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxGCjgNt-1685320511519)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113030526.png)]$

查看密码

<!DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Page</title>
</head>
<body>
<form action="/login" method="post">
   <label for="username">用户名:</label>
   <input type="text" id="username" name="username"><br><br>
   <label for="password">密码:</label>
   <input type="password" id="password" name="password">
   <input type="checkbox" onclick="togglePassword()">查看密码<br><br>
   <input type="submit" value="Submit">
</form>

<script>
   function togglePassword() {
      var passwordField = document.getElementById("password");
      if (passwordField.type === "password") {
         passwordField.type = "text";
      } else {
         passwordField.type = "password";
      }
   }
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LErxheQV-1685320511520)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230413113543882.png)]$

点击按钮弹出信息

<button id="btn">点击</button>
<script>
    var btn = document.getElementById('btn'); // 第1步：获取事件源
    // 第2步：注册事件btn.onclick
    btn.onclick = function () { // 第3步：添加事件处理程序（采取函数赋值形式）
        alert('弹出');
    };
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1OPhv9cp-1685321135802)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230529084154346.png)]$

登录校验

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form  action="success.html"  method="get" onsubmit="return checkUserInfo();">

    <table  border="1px" width="450px" align="center">
        <tr>
            <td>用户名:</td>
            <td><input type="text"   id="userName"  /></td>
        </tr>

        <tr>
            <td>手机 :</td>
            <td><input type="text"  class="tel"/></td>
        </tr>

        <tr>
            <td>座机 :</td>
            <td><input type="text"  class="tel"/></td>
        </tr>

        <tr>
            <td colspan="2" align="center"><input type="submit"  value="提交"/>                       </td>
        </tr>

    </table>

</form>

<!--编写函数实现表单数据的验证-->
<script type="text/javascript">

    function   checkUserInfo(){

        //①、找到表单中哪些填入数据信息的控件对象
        var userNameInput = document.getElementById("userName");

        //②、获取输入框中的值(使用的是对象中的value属性)
        var userName_value = userNameInput.value;


        //获取批量元素
        var  tels = document.getElementsByClassName("tel");
        document.getElementsByName('name属性的值');
        document.getElementsByTagName('标签的名称');


        //③、进行校验
        if(""==userName_value){
            alert('用户名必须要填写!');
            return false;
        }else{
            //要求必须至少是6位
            if(userName_value.length<6){
                alert('用户名至少是6位!');
                return false;
            }
        }

        return true;
    }
</script>
</body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2QbVsj5o-1685322305044)(E:\前端\JavaScript\html+js案例\小练习.assets\image-20230529085808118.png)]$

点击按钮显示内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button onclick="showData();">显示数据</button>
<hr />

<div  id="show">

</div>

<script type="text/javascript">

    function  showData(){

        //找到显示信息的div元素对象
        var div = document.getElementById('show');
        //将显示的数据信息进行嵌入
        //div.innerHTML='这是我要显示的信息...';
        div.innerHTML='<h1>快乐时刻</h1><p>日本在第二次世界大战期间，于1945年8月6日和8月9日，分别遭到美国投掷的两枚原子弹袭击。<br>' +
            '第一颗原子弹于8月6日早上8点15分被投入广岛市中心，称为“小男孩”，造成约14万人死亡、受伤或失踪。<br>' +
            '第二颗原子弹于8月9日上午11点02分被投入长崎市中心，称为“胖子”，造成约7.5万人死亡、受伤或失踪。<br>' +
            '这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一，也引起了全球对核武器及其使用的深刻反思和警醒。</p>';
    }

</script>

</body>
</html>