Wissensaustausch über die JavaScript-DOM-API-js-Tutorial-php.cn

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript. Er organisiert hauptsächlich verwandte Themen im Zusammenhang mit dem DOM-API-Wissen, einschließlich der Auswahl von Seiten-Tags, der Bedienung von Seiten-Tag-Attributen usw. Wir hoffen, dass es allen hilft.

Wissensaustausch über die JavaScript-DOM-API

[Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend]

Wissensaustausch über die JavaScript-DOM-API.DOM API-Wissensaustauschüber die JavaScript-DOM-API>Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Seiten-Tag auswählenüber die JavaScript-DOM-API>

Im DOM, dem globalen Objekt der Dokumentseite, den Funktionen querySelector und querySelectorAll werden verwendet, um Elemente durch Übergabe eines CSS-Selektors auszuwählen. Der Auswahlbereich ist der Selektor, der vor der Funktion vorhanden ist. Wenn er nicht gefunden wird, ist der Rückgabewert null.

let obj = document.querySelector("选择器");

Nach dem Login kopieren

Wissensaustausch über die JavaScript-DOM-API

Wenn auf der Seite mehrere ausgewählte Tags vorhanden sind, wird nur das Tag ausgewählt, das zum ersten Mal auf der Seite erscheint.

Wissensaustausch über die JavaScript-DOM-API
Wenn Sie alle diese Elemente auswählen möchten, müssen Sie die Funktion querySelectorAll verwenden.

Die Verwendung ist die gleiche wie bei querySelector.

let var_name = document.querySelectorAll("选择器");

Nach dem Login kopieren

Diese Funktion gibt ein Objekt zurück, das einem Array ähnelt. Die Verwendung ist genau die gleiche wie bei einem Array, aber zusätzlich können Schlüssel-Wert-Paare hinzugefügt werden.
Wissensaustausch über die JavaScript-DOM-API
Erweitern Sie die Elemente im Array und Sie werden viele Attribute finden, die alle native Attribute des DOM sind.

Wissensaustausch über die JavaScript-DOM-API

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Bearbeiten Sie die Eigenschaften von Seiten-Tagsüber die JavaScript-DOM-API>Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Ereignisseüber die JavaScript-DOM-API>

Viele JS-Codes werden durch „Ereignisse“ wie Mausbewegung, Mausscrollen, Tastatureingabe, Änderung der Browsergröße usw. ausgelöst.

Drei Elemente eines Ereignisses:

Ereignisquelle, welches HTML-Element das Ereignis generiert hat.
Ereignistypen wie Mausbewegung, Mausklick, Änderung der Fenstergröße usw.
Ereignisbehandlungsmethode: Welcher JS-Code soll ausgeführt werden, wenn das Ereignis auftritt? 🔜 es ist kompWissensaustausch über die JavaScript-DOM-APIierter Schlagen Sie die erste Schreibweise im Bild vor.

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Holen Sie sich die Klassifizierung des Elements.

Das Operationselement:

Wissensaustausch über die JavaScript-DOM-API Der Inhalt des Elements.

Attribute von Elementen.

Der Stil des Elements. über die JavaScript-DOM-API>

Um den Inhalt eines Elements zu manipulieren, können Sie zunächst das innerHTML-Attribut verwenden, um den Inhalt innerhalb eines Tags abzurufen.

let button = document.querySelector("button");button.onclick = function (){
    alert("嘻嘻嘻！");}

Nach dem Login kopieren

Chestnut:

Wirkung:

Wir haben festgestellt, dass dieselben Elemente alle reduziert und ausgegeben werden. Wir können auf die Einstellungsleiste der Entwicklertools klicken, um die erweiterte Ausgabe festzulegen.

Was wir oben in das ausgewählte Etikett eingefügt haben, ist Text. Was ist, wenn es kein Text ist? Tatsächlich ist es dasselbe. Unter der Annahme, dass ein Listen-Tag darin platziert ist, ist das erhaltene Ergebnis der HTML-Code des darin enthaltenen Tags.

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Elemente ändern

Wir können auch den Inhalt von HTML ändern, z. B. eine Liste in einen Titel ändern.

Wissensaustausch über die JavaScript-DOM-API

Wirkung:

über die JavaScript-DOM-API>Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API Zähler

Basierend auf dem Wissen über das Erhalten und Modifizieren von Elementen können wir einen einfachen Zähler implementieren:

获取元素内容
修改元素内容（加一操作）
写回到元素里面

代码Wissensaustausch über die JavaScript-DOM-API
Wissensaustausch über die JavaScript-DOM-API：

欸，好像与我们的预期有点不一致，原因就是修改元素内容时，拿到的内容是字符串类型的，发生的是拼接Wissensaustausch über die JavaScript-DOM-API，而不是算术Wissensaustausch über die JavaScript-DOM-API，所以我们需要进行转换，那如何转换？我们可以使用与java非常类似且同名的一个方法，它就是parseInt，同理如果需要小数那就有parseFloat，注意这里没有parseDouble方法哦！

代码Wissensaustausch über die JavaScript-DOM-API
Wissensaustausch über die JavaScript-DOM-API：

我们来丰富一下，加一个按钮，可以完成减的功能。

页面代码：

    <style>
        #screen{
            width: 88px;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            text-align: center;
            line-height: Wissensaustausch über die JavaScript-DOM-API0px;
            border-radius: Wissensaustausch über die JavaScript-DOM-APIpx;

            background-color: rgb(Wissensaustausch über die JavaScript-DOM-API00, Wissensaustausch über die JavaScript-DOM-API00, Wissensaustausch über die JavaScript-DOM-API00);
        }
        #plus, #sub{
            width: Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-APIpx;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            border-radius: Wissensaustausch über die JavaScript-DOM-API0px;
            margin-top: Wissensaustausch über die JavaScript-DOM-APIpx;
            border: 0px;

            background-color: rgb(Wissensaustausch über die JavaScript-DOM-API80, Wissensaustausch über die JavaScript-DOM-API00, Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API);
        }
    </style>
    <p>
        0    </p>
    <button>计数+Wissensaustausch über die JavaScript-DOM-API</button>
    <button>计数-Wissensaustausch über die JavaScript-DOM-API</button>

    <script>

    </script>

Nach dem Login kopieren

JavaScript代码：

let plus = document.querySelector("#plus");let sub = document.querySelector("#sub");let plus_func = function() {
    //Wissensaustausch über die JavaScript-DOM-API.获取值
    let add_btn = document.querySelector("#screen");
    let val = add_btn.innerHTML;
    val = parseInt(val);
    //Wissensaustausch über die JavaScript-DOM-API.+Wissensaustausch über die JavaScript-DOM-API
    val = val + Wissensaustausch über die JavaScript-DOM-API;
    //Wissensaustausch über die JavaScript-DOM-API.写回
    add_btn.innerHTML = val;}let sub_func = function() {
    //Wissensaustausch über die JavaScript-DOM-API.获取值
    let sub_btn = document.querySelector("#screen");
    let val =sub_btn.innerHTML;
    val = parseInt(val);
    //Wissensaustausch über die JavaScript-DOM-API.-Wissensaustausch über die JavaScript-DOM-API
    val = val - Wissensaustausch über die JavaScript-DOM-API;
    //Wissensaustausch über die JavaScript-DOM-API.写回
    sub_btn.innerHTML = val;}plus.onclick = plus_func;sub.onclick = sub_func;

Nach dem Login kopieren

Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API
但是对于但标签是没有innerHTML属性的，比如input标签，虽然不能通过innerHTML获取属性，但是可以通过value属性获取内容。

页面代码：

    <input>
    <button>+Wissensaustausch über die JavaScript-DOM-API</button>

    <script>

    </script>

Nach dem Login kopieren

JavaScript代码:

let add = document.querySelector("#add");add.onclick = function() {
    //Wissensaustausch über die JavaScript-DOM-API.获取值
    let add_btn = document.querySelector("#in");
    let val = add_btn.value;
    val = parseInt(val);
    //Wissensaustausch über die JavaScript-DOM-API.+Wissensaustausch über die JavaScript-DOM-API
    val = val + Wissensaustausch über die JavaScript-DOM-API;
    //Wissensaustausch über die JavaScript-DOM-API.写回
    add_btn.value = val;}

Nach dem Login kopieren

Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API点击图片切换über die JavaScript-DOM-API>

我们想实现一个小案例，就是点击一个图片就能切换图片，再点击一次又能够切换回来，我们可以利用DOM来修改元素的属性来实现，在这个案例中，我们只需Wissensaustausch über die JavaScript-DOM-API点击事件为修改图片的路径，也就是src属性，就可以实现图片的切换。

假设第一张图片的路径是./jee.png，第二张图片的路径是./樱花.png，实现图片切换的基本思路为：

获取img元素。
Wissensaustausch über die JavaScript-DOM-APIonclick。
点击事件的细节就是判断路径是否包含ee，包含就将src属性换成./樱花.png，反过来，判断路径是否包含樱花，包含就将src属性换成./jee.png
可以使用indexOf方法判断是否包含某个字符串。

JavaScript代码：

let img = document.querySelector("img");img.onclick = function() {
    console.log(img.src);
    if (img.src.indexOf("ee") >= 0) {
        img.src = Wissensaustausch über die JavaScript-DOM-API9;./樱花.pngWissensaustausch über die JavaScript-DOM-API9;;
    } else if (img.src.indexOf("樱花")) {
        img.src = Wissensaustausch über die JavaScript-DOM-API9;./jee.pngWissensaustausch über die JavaScript-DOM-API9;
    }}

Nach dem Login kopieren

页面代码：

    <style>
        img {
            height: Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API0px;
        }
    </style>
    <img  alt="Wissensaustausch über die JavaScript-DOM-API" >

    <script>

    </script>

Nach dem Login kopieren

Wissensaustausch über die JavaScript-DOM-API：
jsWissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API
具体哪些属性可以修改，我们可以使用console.dir函数来获取某个元素DOM API能够操作的全部属性。

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.6暂停/播放切换über die JavaScript-DOM-API>

实现一个按钮，点击之后按钮文字从"播放"变为"暂停"，再点击一次，按钮文字从"暂停"变为"播放"。

实现逻辑和切换逻辑是差不多的，具体看代码吧：

JavaScript代码：

let play = document.querySelector("#play");play.onclick = function(){
    if (play.value == "播放") {
        play.value = "暂停";
    } else if (play.value = "暂停") {
        play.value = "播放";
    }}

Nach dem Login kopieren

页面代码：

    <input>

Nach dem Login kopieren

实现Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.7全选/取消全选über die JavaScript-DOM-API>

首先我们需要创建若干个复选框，只有一个全选框，我们选中全选框，其他元素需要被全部选中，一旦其他元素有未选中的，全选也必须是未选中的。

实现的基本思路：

获取全选框元素，获取其他元素。
注册全选框的点击事件，检查其他框是否都被选中，如果选中，则全选框也选中，否则全选框不选中。
对每一个其他复选框Wissensaustausch über die JavaScript-DOM-API点击事件，并将状态与全选复选框关联。
每次点击其他框都要检测其他框是否都选中，以确定全选框的状态。

JavaScript代码：

let all = document.querySelector("#all");let gameroles = document.querySelectorAll(".gamerole");//checked属性为checked表示选中状态，为空字符串表示未选中//Wissensaustausch über die JavaScript-DOM-APIall的点击事件all.onclick = function() {
    for (let i = 0; i 页面代码：
    <input>全选 

    <input>胡桃 

    <input>可莉 

    <input>万叶 

    <input>心海 

    <input>锅巴 
Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.8点击文字放大über die JavaScript-DOM-API>

DOM还可以修改style属性，下面来尝试运用选中元素与修改元素的知识，来实现点击文字放大的一个小案例。

因为CSS中不区分大小写，属性与变量的命名采用脊柱式命名，而JS中-不能用于变量的命名，为了能够将CSS属性与JS变量名匹配，JS使用驼峰的形式表示CSS的属性，例如font-size属性，对应JS的变量名为fontSize。

对于文字的放大，我们可以给文本所在的标签注册一个点击事件，每点击一次就将字体大小增大，即修改CSS的font-size属性。

JavaScript代码：

let p = document.querySelector("p");p.onclick = function() {
    //Wissensaustausch über die JavaScript-DOM-API.获取文字大小属性
    let wordsSize = parseInt(p.style.fontSize);
    console.log("修改前" + wordsSize);
    //Wissensaustausch über die JavaScript-DOM-API.修改文字大小
    wordsSize += Wissensaustausch über die JavaScript-DOM-API;
    //Wissensaustausch über die JavaScript-DOM-API.写回到属性
    p.style.fontSize = wordsSize + "px";
    console.log("修改后" + wordsSize);}

Nach dem Login kopieren

页面代码：

    <p die javascript-dom-api0px>
        我是一段文本    </p>

Nach dem Login kopieren

实现Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.9实现关灯/开灯（夜间/白间模式切换）über die JavaScript-DOM-API>

很多情况下一个个修改样式属性太麻烦了，我们也可以直接修改类属性来达到Wissensaustausch über die JavaScript-DOM-API，可以通过选中元素变量名.className来获取和修改类属性。

由于JavaScript里面的class是一个关键字，因此获取元素的class不能使用class，而需要使用className，多个class属性可以使用classList。

JavaScript代码：

let p = document.querySelector(Wissensaustausch über die JavaScript-DOM-API9;pWissensaustausch über die JavaScript-DOM-API9;);let button = document.querySelector(Wissensaustausch über die JavaScript-DOM-API9;buttonWissensaustausch über die JavaScript-DOM-API9;);button.onclick = function(){
    if (p.className == "light") {
        p.className = Wissensaustausch über die JavaScript-DOM-API9;blackWissensaustausch über die JavaScript-DOM-API9;;
        button.innerHTML = Wissensaustausch über die JavaScript-DOM-API9;开灯Wissensaustausch über die JavaScript-DOM-API9;;
    } else if (p.className == Wissensaustausch über die JavaScript-DOM-API9;blackWissensaustausch über die JavaScript-DOM-API9;) {
        p.className = Wissensaustausch über die JavaScript-DOM-API9;lightWissensaustausch über die JavaScript-DOM-API9;;
        button.innerHTML = Wissensaustausch über die JavaScript-DOM-API9;关灯Wissensaustausch über die JavaScript-DOM-API9;;
    }}

Nach dem Login kopieren

页面代码：

    <style>        
        p{
            width: Wissensaustausch über die JavaScript-DOM-API00px;
            text-align: center;
        }
        .light, .black{
            width: Wissensaustausch über die JavaScript-DOM-API00px;
            height: Wissensaustausch über die JavaScript-DOM-API00px;

            text-align: center;
            line-height: Wissensaustausch über die JavaScript-DOM-API00px;
            font-size: Wissensaustausch über die JavaScript-DOM-API0px;
        }

        button{
            width: Wissensaustausch über die JavaScript-DOM-API00px;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            font-size: Wissensaustausch über die JavaScript-DOM-API0px;
            background-color: rgb(Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00);
            border: 0cm;
            border-radius: Wissensaustausch über die JavaScript-DOM-API0px;
        }
        .light{
            background-color: aliceblue;
            color: black;
        }
        .black{
            background-color: black;
            color: aliceblue;
        }
    </style>
    <p>我是一段文本</p>
    <p>
        <button>关灯</button>
    </p>

Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API操作页面结点über die JavaScript-DOM-API>Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API新增结点über die JavaScript-DOM-API>

除了修改元素的属性和内容，我们还可以在页面上添加元素，要添加元素，那就得先新建一个元素，并且还需要依赖一个父元素（已经创建好的），把这个新建的元素插入到父元素中就能实现元素的添加（依赖与DOM树），这个操作也被称为新增页面结点。
新建元素：

let newp = document.createElement("元素标签");

Nach dem Login kopieren

补充元素内容：

newp.属性 = 值;

Nach dem Login kopieren

插入到DOM树:

选中的父元素.appendChild(创建的子元素);

Nach dem Login kopieren

实例：
JavaScript代码：

let cnt = Wissensaustausch über die JavaScript-DOM-API;let add = document.querySelector("#add");let parent = document.querySelector("#container");add.onclick = function() {
    let newp = document.createElement("p");
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}

Nach dem Login kopieren

页面代码：

    <p></p>
    <button>新增节点</button>

Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API6

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API删除结点über die JavaScript-DOM-API>

删除结点就更容易了，在DOM树上删除结点就行。

删除结点：

获取到的父元素.removeChild(需要删除的子元素);

Nach dem Login kopieren

实例：
JavaScript代码：

let cnt = Wissensaustausch über die JavaScript-DOM-API;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
    let newp = document.createElement("p");
    arr[cnt-Wissensaustausch über die JavaScript-DOM-API] = newp;
    newp.id = "newp" + cnt;
    newp.className = cnt;
    newp.innerHTML = "hello";
    parent.appendChild(newp);
    console.log(newp);
    cnt++;}let del = document.querySelector("#del");del.onclick = function() {
    cnt--;
    if (cnt > 0) {
        console.log( "成功删除一个元素");
        parent.removeChild(arr[cnt-Wissensaustausch über die JavaScript-DOM-API]);
    } else {
        console.log( "该父元素已经没有元素可以删除了");
        cnt++;
    }}

Nach dem Login kopieren

页面代码：

    <p></p>
    <button>新增节点</button>

Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API.综合案例über die JavaScript-DOM-API>Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API猜数字über die JavaScript-DOM-API>

目标页面

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API

猜数字的逻辑我就不赘述了，不过里面需要取随机数，我们可以通过js中的Math.random()函数来获取随机数，该函数生成随机数的范围是[0,Wissensaustausch über die JavaScript-DOM-API)区间内的一个小数，我们需要的是[Wissensaustausch über die JavaScript-DOM-API,Wissensaustausch über die JavaScript-DOM-API00]之间的整数，我们可以乘上Wissensaustausch über die JavaScript-DOM-API00后向下取整加一就能得到目标区间的数了，实现向下取整的函数是Math.floor(数字)。

然后前端页面部分是通过HTML加上CSS弹性布局实现的，交互通过JavaScript DOM实现，下面的Wissensaustausch über die JavaScript-DOM-API案例也是一样的，就不多说了。

JavaScript代码：

//获取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#bWissensaustausch über die JavaScript-DOM-API");let flash = document.querySelector("#bWissensaustausch über die JavaScript-DOM-API");//生成Wissensaustausch über die JavaScript-DOM-API-Wissensaustausch über die JavaScript-DOM-API00的随机数//floor表示只取浮点数整数部分let ansNumber = Math.floor(Math.random() * Wissensaustausch über die JavaScript-DOM-API00) + Wissensaustausch über die JavaScript-DOM-API;//实现按钮猜数字的点击事件guessBtn.onclick = function(){
    //输入框没有值，表示用户没有输入，不处理
    if(input.value == Wissensaustausch über die JavaScript-DOM-API9;Wissensaustausch über die JavaScript-DOM-API9;) {
        return;
    }
    let guessNumber = parseInt(input.value);
    if (guessNumber > ansNumber) {
        ret.innerHTML = "YO!猜大了！";
        ret.style.color = "red";
    } else if (guessNumber <p>页面代码：</p><pre class="brush:php;toolbar:false">nbsp;html>
    <meta>
    <meta>
    <meta die javascript-dom-api.0>
    <title>猜数字</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: aliceblue;
        }
        hWissensaustausch über die JavaScript-DOM-API {
            width: Wissensaustausch über die JavaScript-DOM-API00%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            text-align: center;
            line-height: Wissensaustausch über die JavaScript-DOM-API0px;
            color: blueviolet;
            margin: Wissensaustausch über die JavaScript-DOM-API0px 0;
        }
        .guessp {
            width: Wissensaustausch über die JavaScript-DOM-API00%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .guessp #bWissensaustausch über die JavaScript-DOM-API{
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            width: Wissensaustausch über die JavaScript-DOM-API0%;
            background-color: rgb(Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API);
            color: aliceblue;
            border: 0cm;
            border-radius: Wissensaustausch über die JavaScript-DOM-APIpx;
        }
        .guessp #bWissensaustausch über die JavaScript-DOM-API:active{
            background-color: gray;
        }
        .guessp #guess{
            width: Wissensaustausch über die JavaScript-DOM-API0%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            border: Wissensaustausch über die JavaScript-DOM-APIpx solid rgb(Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-API);
            border-radius: Wissensaustausch über die JavaScript-DOM-APIpx;
            text-indent: 0.6em;
            outline: none;
        }
        .guessp #number{
            width: Wissensaustausch über die JavaScript-DOM-API0%;
            text-align: right;
        }
        .guessp #in {
            width: 70%;
            margin-left: Wissensaustausch über die JavaScript-DOM-API%;
            text-align: left;
        }
        .cnt, .ret{
            width: Wissensaustausch über die JavaScript-DOM-API00%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            text-align: center;
        }
        .rev{
            width: Wissensaustausch über die JavaScript-DOM-API00%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            text-align: center;
        }
        .rev #bWissensaustausch über die JavaScript-DOM-API{
            margin: Wissensaustausch über die JavaScript-DOM-APIpx;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            width: Wissensaustausch über die JavaScript-DOM-API00px;
            background-color: rgb(Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00,Wissensaustausch über die JavaScript-DOM-API00);
            color: aliceblue;
            border: 0cm;
            border-radius: Wissensaustausch über die JavaScript-DOM-APIpx;
        }
        .rev #bWissensaustausch über die JavaScript-DOM-API:active{
            background-color: gray;
        }
        .ret, .cnt{
            width: Wissensaustausch über die JavaScript-DOM-API00%;
            height: Wissensaustausch über die JavaScript-DOM-API0px;
            display: flex;
            justify-content:center;
        }
        .guessp #messr, .guessp #messc {
            width: Wissensaustausch über die JavaScript-DOM-API0%;
            text-align: right;
        }
        .guessp #result, .guessp #count{
            width: 70%;
            text-align: left;
            margin-left: Wissensaustausch über die JavaScript-DOM-API%;
        }


    </style>

    <hwissensaustausch die javascript-dom-api>猜数字游戏</hwissensaustausch>über die JavaScript-DOM-API>
    <p>
        <span>要猜的数字:</span>
        <span>
            <input die javascript-dom-api-wissensaustausch javascript-dom-api00>
            <button die javascript-dom-api>我就要猜它</button>
        </span>
    </p>
    
    <p>
        <span>结果:</span>
        <span>你还没有猜哦！</span>
    </p>
    <p>
        <span>次数:</span>
        <span>0</span>
    </p>
    <p>
        <button die javascript-dom-api>
            开始/重新开始猜数字        </button>
    </p>


    <script>

    </script>

Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-APIWissensaustausch über die JavaScript-DOM-APIüber die JavaScript-DOM-API>

目标页面

Wissensaustausch über die JavaScript-DOM-API.Wissensaustausch über die JavaScript-DOM-API

JavaScript代码：

//获取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];//用户点击表白将表白记录显示在表白按钮下面let record = [];let i = 0;loveBtn.onclick = function() {
    //Wissensaustausch über die JavaScript-DOM-API.获取表白内容
    let inputs = document.querySelectorAll("input");
    let from = inputs[0].value;
    let to = inputs[Wissensaustausch über die JavaScript-DOM-API].value;
    let message = inputs[Wissensaustausch über die JavaScript-DOM-API].value;
    //Wissensaustausch über die JavaScript-DOM-API.如果有一项内天为空，不处理
    if (from == Wissensaustausch über die JavaScript-DOM-API9;Wissensaustausch über die JavaScript-DOM-API9; || to == Wissensaustausch über die JavaScript-DOM-API9;Wissensaustausch über die JavaScript-DOM-API9; || message == Wissensaustausch über die JavaScript-DOM-API9;Wissensaustausch über die JavaScript-DOM-API9;) {
        return;
    }
    //Wissensaustausch über die JavaScript-DOM-API.汇总表白语言
    let n = adv.length;
    let index = (Math.floor(Math.random() * Wissensaustausch über die JavaScript-DOM-API000) + Wissensaustausch über die JavaScript-DOM-API) % n;
    let romAdv = adv[index];
    let loveMess = from + romAdv + "对" + to + "说" + message;
    record[i] = "留言" + (i+Wissensaustausch über die JavaScript-DOM-API) + ":" + loveMess;
    //Wissensaustausch über die JavaScript-DOM-API.新建结点，插入表白记录
    let p = document.createElement("p");
    p.innerHTML = record[i];
    p.className = Wissensaustausch über die JavaScript-DOM-API9;ohWissensaustausch über die JavaScript-DOM-API9;;
    let container = document.querySelector(".container");
    container.appendChild(p);
    i++;
    //Wissensaustausch über die JavaScript-DOM-API.表白完，清空输入框
    for (let i = 0; i 页面代码：
nbsp;html>
    
    
    
    Wissensaustausch über die JavaScript-DOM-API
    
    
        "真的是"Wissensaustausch über die JavaScript-DOM-APIüber die JavaScript-DOM-API>
        
输入后点击提交, 会将信息显示在表白按钮下方
        这是一个正经的Wissensaustausch über die JavaScript-DOM-API，这真的不是一个Wissensaustausch über die JavaScript-DOM-API
        
        
            是谁:
            <input>
        
        
            向谁:
            <input>
        
        
            说:
            <input>
        
        
            
        
    
    
    
Nach dem Login kopieren

实际Wissensaustausch über die JavaScript-DOM-API：

Wissensaustausch über die JavaScript-DOM-API

【相关推荐：javascript视频教程、web前端】

Das obige ist der detaillierte Inhalt vonWissensaustausch über die JavaScript-DOM-API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!