JS在Web中的应用

最新推荐文章于 2024-06-17 20:13:06 发布

努力奔跑中的小刘

最新推荐文章于 2024-06-17 20:13:06 发布

阅读量540

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_54447656/article/details/122086331

版权

本文通过实例展示了JavaScript在Web中的应用，包括绑定事件、操作DOM树，以及创建、删除节点。首先，讨论了如何操作元素的class属性，接着分别呈现了猜数字游戏、表白墙和待办事项这三个网页应用的效果，详细阐述了实现过程。

摘要由CSDN通过智能技术生成

绑定事件，操作DOM树

var input = document.querySelector('input');
var ol = document.querySelector('ol');
document.querySelector('button').onclick = function(){
     var todo = input.value;
     console.log(todo);
     var li = `<li>${todo}</li>`;
     console.log(li);
     //把li标签追加到ol下的HTML中
     ol.innerHTML = ol.innerHTML + li;

}

创建元素对象

var input = document.querySelector('input');
var ol = document.querySelector('ol');
document.querySelector('button').onclick = function(){
     var todo = input.value;
     console.log(todo);//把todo包装成li标签对象
     //创建一个<li>标签对象
     var li = document.createElement('li');
     li.innerText = todo;//把todo文本作为li的内部文本添加到对象上
     ol.appendChild(li);//把li对象，作为ol的孩子，尾插上去
}

删除节点

//增加一项功能，点击某个li时，删除该li
     li.onclick = function(){
          //this代表事件源
          //把this从ol中删除
          ol.removeChild(li);
          ol.removeChild(this);
     }

应用一：猜数字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜数字</title>
    <style>
        .error{
            color:red;
        }
        .right{
            color:blue;
        }
    </style>
</head>
<body>
    <button id="reset">重新开始一句游戏</button>
    <div>
        <label for="input">请输入要猜的数字</label>
        <input type="text" id="input">
        <button id="guess">猜</button>
    </div>
    <div>
        已经猜的次数：
        <span id="count">0</span>
    </div>
    <div>

最低0.47元/天解锁文章

努力奔跑中的小刘

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS在Web中的应用

绑定事件，操作DOM树var input = document.querySelector('input');var ol = document.querySelector('ol');document.querySelector('button').onclick = function(){ var todo = input.value; console.log(todo); var li = `<li>${todo}</li>`; .
复制链接

扫一扫