JavaScrip练习

HTML+JS计算器

DOCTYPE html>
<html>
<head>
    <title>Calculatortitle>
head>
<body>

<input type="text" id="display" disabled>
<br>
    
<button onclick="addToDisplay('7')">7button>
<button onclick="addToDisplay('8')">8button>
<button onclick="addToDisplay('9')">9button>
<button onclick="addToDisplay('+')">+button><br>

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

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

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


<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>

JavaScrip练习_第1张图片

用户输入显示

<!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>

JavaScrip练习_第2张图片

随机码

DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Random Verification Codetitle>
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>

JavaScrip练习_第3张图片

密码校验

DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Pagetitle>
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>

JavaScrip练习_第4张图片

查看密码

DOCTYPE html>
<html>
<head>

   <meta charset="UTF-8">
   <title>Login Pagetitle>
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>

JavaScrip练习_第5张图片

点击按钮弹出信息

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

JavaScrip练习_第6张图片

登录校验

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>

JavaScrip练习_第7张图片

点击按钮显示内容

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='

快乐时刻

日本在第二次世界大战期间,于1945年8月6日和8月9日,分别遭到美国投掷的两枚原子弹袭击。
' + '第一颗原子弹于8月6日早上8点15分被投入广岛市中心,称为“小男孩”,造成约14万人死亡、受伤或失踪。
'
+ '第二颗原子弹于8月9日上午11点02分被投入长崎市中心,称为“胖子”,造成约7.5万人死亡、受伤或失踪。
'
+ '这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一,也引起了全球对核武器及其使用的深刻反思和警醒。

'
; }
script> body> html>

JavaScrip练习_第8张图片

你可能感兴趣的:(前端,javascript,前端,servlet)