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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

随机码

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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

密码校验

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

查看密码

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>
1
2
3
4
5
6
7
8

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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='快乐时刻
日本在第二次世界大战期间，于1945年8月6日和8月9日，分别遭到美国投掷的两枚原子弹袭击。
' +
            '第一颗原子弹于8月6日早上8点15分被投入广岛市中心，称为“小男孩”，造成约14万人死亡、受伤或失踪。
' +
            '第二颗原子弹于8月9日上午11点02分被投入长崎市中心，称为“胖子”，造成约7.5万人死亡、受伤或失踪。
' +
            '这两次核弹攻击是人类历史上最具毁灭性和残忍性的战争行为之一，也引起了全球对核武器及其使用的深刻反思和警醒。
';
    }

script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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

排他操作

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

head>
<body>
<body>
  <button>按钮1button>
  <button>按钮2button>
  <button>按钮3button>
  <button>按钮4button>
  <button>按钮5button>
body>


<script>
    // 1. 获取所有按钮元素， btns得到的是类数组对象
    var btns = document.getElementsByTagName('button');
    for (var i = 0; i < btns.length; i++) { // 里面的每一个元素btns[i]
        btns[i].onclick = function () {
            for (var i = 0; i < btns.length; i++) { // (1) 先把所有的按钮背景颜色去掉
                btns[i].style.backgroundColor = '';
            }
            this.style.backgroundColor = 'red'; // (2) 然后设置当前的元素背景颜色
        }
    }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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

鼠标指针经过时背景变色

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        #myTable {
            border-collapse: collapse;
            width: 100%;
        }

        #myTable th,
        #myTable td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        #myTable th {
            background-color: #f2f2f2;
        }
    style>

head>
<body>
<table id="myTable">
    <thead>
    <tr>
        <th>姓名th>
        <th>年龄th>
        <th>性别th>
    tr>
    thead>
    <tbody>
    <tr>
        <td>张三td>
        <td>20td>
        <td>男td>
    tr>
    <tr>
        <td>李四td>
        <td>25td>
        <td>女td>
    tr>
    <tr>
        <td>王五td>
        <td>30td>
        <td>男td>
    tr>
    tbody>
table>
<script>
    var table = document.getElementById("myTable");
    var rows = table.getElementsByTagName("tr");

    for (var i = 0; i < rows.length; i++) {
        rows[i].addEventListener("mouseover", function() {
            this.style.backgroundColor = "#f5f0f0";
        });

        rows[i].addEventListener("mouseout", function() {
            this.style.backgroundColor = "";
        });
    }
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

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

Tab栏切换

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        /* 隐藏所有标签内容 */
        .tabcontent {
            display: none;
        }

        /* 标签栏样式 */
        .tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        /* 标签按钮样式 */
        .tab button {
            background-color: inherit;
            border: none;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            transition: 0.3s;
            font-size: 17px;
        }

        /* 激活状态的标签按钮样式 */
        .tab button.active {
            background-color: #ccc;
        }

        /* 标签内容样式 */
        .tabcontent {
            padding: 6px 12px;
            border: 1px solid #ccc;
            border-top: none;
        }
    style>

head>
<body>
<div class="tab">
    <button class="tablinks" onclick="openTab(event, 'tab1')">标签1button>
    <button class="tablinks" onclick="openTab(event, 'tab2')">标签2button>
    <button class="tablinks" onclick="openTab(event, 'tab3')">标签3button>
div>

<div id="tab1" class="tabcontent">
    <h3>标签1内容h3>
    <p>这是标签1的内容。p>
div>

<div id="tab2" class="tabcontent">
    <h3>标签2内容h3>
    <p>这是标签2的内容。p>
div>

<div id="tab3" class="tabcontent">
    <h3>标签3内容h3>
    <p>这是标签3的内容。p>
div>

<script>
    function openTab(evt, tabName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " active";
    }
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85

在这里插入图片描述

鼠标经过，下拉列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        /* 下拉列表按钮样式 */
        .dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 12px;
            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 下拉列表容器样式 */
        .dropdown {
            position: relative;
            display: inline-block;
        }

        /* 下拉列表内容样式 */
        .dropdown-content {
            display: none;
            position: absolute;
            z-index: 1;
        }

        /* 下拉列表内容中选项的样式 */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        /* 鼠标悬停在选项上时的样式 */
        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* 显示下拉列表内容的样式 */
        .show {
            display: block;
        }
    style>

head>
<body>
<div class="dropdown">
    <button class="dropbtn">下拉列表button>
    <div class="dropdown-content">
        <a href="#">选项1a>
        <a href="#">选项2a>
        <a href="#">选项3a>
    div>
div>

<script>
    // 获取下拉列表容器和内容
    var dropdown = document.querySelector(".dropdown");
    var dropdownContent = document.querySelector(".dropdown-content");

    // 当鼠标移动到下拉列表容器上时，显示下拉列表内容
    dropdown.addEventListener("mouseover", function() {
        dropdownContent.classList.add("show");
    });

    // 当鼠标离开下拉列表容器时，隐藏下拉列表内容
    dropdown.addEventListener("mouseout", function() {
        dropdownContent.classList.remove("show");
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

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

留言板

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        h1 {
            text-align: center;
        }

        form {
            margin: 20px;
        }

        label {
            display: inline-block;
            width: 60px;
        }

        textarea {
            width: 300px;
            height: 100px;
        }

        button {
            margin-left: 60px;
        }

        ul {
            list-style-type: none;
            padding: 0;
            margin: 20px;
        }

        li {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #f0f0f0;
            border-radius: 5px;
        }
    style>

head>
<body>
<h1>留言板h1>
<form>
    <label for="name">姓名：label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="message">留言：label>
    <textarea id="message" name="message" required>textarea>
    <br>
    <button type="button" id="submit">发布button>
form>
<ul id="messages">
    
ul>
<script>
    // 获取页面元素
    var nameInput = document.getElementById("name");
    var messageInput = document.getElementById("message");
    var submitButton = document.getElementById("submit");
    var messagesList = document.getElementById("messages");

    // 定义发布留言的函数
    function postMessage() {
        // 获取输入的姓名和留言内容
        var name = nameInput.value;
        var message = messageInput.value;

        // 创建新的li元素
        var newMessage = document.createElement("li");
        newMessage.innerHTML = "" + name + "：" + message;

        // 将新的li元素添加到ul中
        messagesList.appendChild(newMessage);

        // 清空输入框
        nameInput.value = "";
        messageInput.value = "";
    }

    // 绑定发布按钮的点击事件
    submitButton.addEventListener("click", postMessage);
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

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

留言板删除

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            margin: 20px 0;
        }
        form {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 10px;
        }
        input[type="text"], textarea {
            padding: 5px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            width: 100%;
            box-sizing: border-box;
        }
        input[type="submit"] {
            padding: 5px 10px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background-color: #3e8e41;
        }
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        li {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            position: relative;
        }
        li a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #f00;
            text-decoration: none;
            font-size: 14px;
            cursor: pointer;
        }
    style>

head>
<body>
<h1>留言板h1>
<form>
    <label for="name">姓名：label>
    <input type="text" id="name" name="name" required>
    <label for="message">留言：label>
    <textarea id="message" name="message" rows="5" required>textarea>
    <input type="submit" value="发布">
form>
<ul id="messages">ul>

<script>
    const form = document.querySelector('form');
    const messages = document.querySelector('#messages');

    form.addEventListener('submit', (event) => {
        event.preventDefault();
        const name = document.querySelector('#name').value;
        const message = document.querySelector('#message').value;
        const li = document.createElement('li');
        const a = document.createElement('a');
        a.textContent = '删除';
        a.addEventListener('click', () => {
            li.remove();
        });
        li.textContent = `${name}: ${message}`;
        li.appendChild(a);
        messages.appendChild(li);
        form.reset();
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

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

图片跟随鼠标移动

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        #container {
            position: relative;
            width: 5000px;
            height: 5000px;

        }

        #image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-image: url('障碍.png');
            background-size: cover;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }
    style>

head>
<body>

<div id="container">
    <div id="image">div>
div>
<script>
    var container = document.getElementById('container');
    var image = document.getElementById('image');

    container.addEventListener('mousemove', function(event) {
        var x = event.clientX - container.offsetLeft;
        var y = event.clientY - container.offsetTop;

        image.style.left = x + 'px';
        image.style.top = y + 'px';
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

文本框提示信息

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        .input-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }

        label {
            margin-right: 10px;
        }

        input {
            width: 200px;
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
        }

        #tracking-number-tip {
            position: absolute;
            top: 40px;
            left: 23%;
            transform: translateX(-50%);
            width: 200px;
            height: 50px;
            line-height: 50px;
            font-size: 24px;
            text-align: center;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            display: none;
        }
    style>

head>
<body>
<div class="input-container">
    <label for="tracking-number">快递单号：label>
    <input type="text" id="tracking-number" name="tracking-number" maxlength="20" onkeyup="showTrackingNumber(this.value)">
    <div id="tracking-number-tip">div>
div>
<script>
    function showTrackingNumber(value) {
        var tip = document.getElementById("tracking-number-tip");
        if (value.length > 0) {
            tip.innerHTML = value;
            tip.style.display = "block";
        } else {
            tip.style.display = "none";
        }
    }
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

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

定时切换图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        .slideshow-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
        }

        .slide {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }

        .slide.active {
            opacity: 1;
        }
    style>
<body>
<div class="slideshow-container">
    <div class="slide">
        <img src="障碍.png">
    div>
    <div class="slide">
        <img src="恐龙.png">
    div>
    <div class="slide">
        <img src="怪兽.png">
    div>
div>
<script>
    var slides = document.querySelectorAll('.slide');
    var currentSlide = 0;
    var slideInterval = setInterval(nextSlide, 1000);

    function nextSlide() {
        slides[currentSlide].classList.remove('active');
        currentSlide = (currentSlide + 1) % slides.length;
        slides[currentSlide].classList.add('active');
    }
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

在这里插入图片描述

轮播图

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>

    <style>
        .slider {
            position: relative;
            width: 30%;
            height: 400px;
            overflow: hidden;
        }

        .slides {
            display: flex;
            width: 300%;
            height: 100%;
            transition: transform 0.5s ease;
        }

        .slides img {
            width: 33.33%;
            height: 100%;
        }

        .controls {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            transform: translateY(-50%);
            display: flex;
            justify-content: space-between;
            z-index: 1;
        }

        .prev, .next {
            width: 50px;
            height: 50px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
            font-size: 30px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
        }

        .prev:hover, .next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
    style>
<body>
<div class="slider">
    <div class="slides">
        <img src="怪兽.png">
        <img src="恐龙.png">
        <img src="障碍.png">
    div>
    <div class="controls">
        <div class="prev">❮div>
        <div class="next">❯div>
    div>
div>
<script>
    const slides = document.querySelector('.slides');
    const prev = document.querySelector('.prev');
    const next = document.querySelector('.next');
    let counter = 0;

    prev.addEventListener('click', () => {
        if (counter > 0) {
            counter--;
            slides.style.transform = `translateX(-${counter * 33.33}%)`;
        }
    });

    next.addEventListener('click', () => {
        if (counter < 2) {
            counter++;
            slides.style.transform = `translateX(-${counter * 33.33}%)`;
        }
    });
script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

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

相关阅读:
使用wireshark抓包，验证客户端和服务端SSL通信时指定的算法套件
 QDebug 日志输出的浏览器
 【Java每日一题】3.船只安排（贪心算法+双指针）
Python 简介
 【无标题】
8万字带你入门Rust
【Docker】了解Docker Desktop桌面应用程序，TA是如何管理和运行Docker容器（3)
ROS的roslibjs基本功能使用测试
 python使用opencv实现火焰检测
 MySQL——变量和存储过程
原文地址：https://blog.csdn.net/qq_44715376/article/details/130920908