cari

Rumah >hujung hadapan web >tutorial js >Perkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript

WBOY
WBOYke hadapan
2022-06-29 15:10:352174semak imbas

Artikel ini membawakan anda pengetahuan yang berkaitan tentang javascript Terutamanya ia mengatur isu berkaitan yang berkaitan dengan perbincangan silang pengetahuan DOM API, termasuk memilih teg halaman, mengendali atribut teg halaman, dll. Mari kita lihatnya. bersama-sama, saya harap ia akan membantu semua orang.

Perkongsian pengetahuan API DOM JavaScript

[Cadangan berkaitan: tutorial video javascript, bahagian hadapan web]

Perkongsian pengetahuan API DOM JavaScript perkongsian pengetahuan pengetahuan API DOM JavaScript>Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Pilih tag halaman pengetahuan API DOM JavaScript>

Dalam DOM, objek global halaman dokumen, fungsi querySelector dan querySelectorAll dalam digunakan untuk memilih elemen Tujuan dicapai dengan menghantar CSS pemilih. Julat pilihan ialah Pemilih yang wujud sebelum fungsi ini tidak ditemui dan nilai pulangan ialah null. 

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

Perkongsian pengetahuan API DOM JavaScript

Jika terdapat berbilang teg yang dipilih pada halaman, hanya teg yang muncul pada halaman untuk kali pertama akan dipilih.

Perkongsian pengetahuan API DOM JavaScript
Jika anda ingin memilih semua elemen ini, anda perlu menggunakan fungsi querySelectorAll.

Penggunaan adalah sama seperti querySelector. 

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

Fungsi ini akan mengembalikan objek yang serupa dengan tatasusunan Penggunaannya adalah sama seperti tatasusunan, tetapi sebagai tambahan, pasangan nilai kunci boleh ditambah.
Perkongsian pengetahuan API DOM JavaScript
Kembangkan elemen dalam tatasusunan dan anda akan menemui banyak atribut, yang kesemuanya merupakan sifat asli DOM.

Perkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Atribut teg halaman operasipengetahuan API DOM JavaScript>Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Peristiwapengetahuan API DOM JavaScript>

Banyak kod JS dicetuskan melalui "peristiwa". pergerakan tetikus, menatal tetikus, input papan kekunci, pengubahsuaian saiz penyemak imbas, dll. semuanya akan menjana peristiwa.

Tiga elemen acara:

  1. Sumber acara, elemen HTML yang menjana acara.
  2. Jenis acara, seperti pergerakan tetikus, klik tetikus, perubahan saiz tetingkap, dsb.
  3. Kaedah pengendalian acara, apakah kod js yang perlu dilaksanakan apabila peristiwa itu berlaku.

Contohnya, kod operasi acara klik: 

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

Buah berangan dan kesan larian:
Perkongsian pengetahuan API DOM JavaScript

Gambar menunjukkan dll. Walau bagaimanapun, cara penulisan yang setara akan menjadikan struktur kod HTML lebih rumit, jadi cara penulisan pertama dalam rajah lebih disyorkan.

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Dapatkan klasifikasi elemen pengetahuan API DOM JavaScript>

elemen operasi: kandungan elemen

  • .
  • Atribut unsur. Gaya elemen
  • .

Pertama sekali, untuk memanipulasi kandungan elemen, anda boleh menggunakan atribut innerHTML untuk mendapatkan kandungan di dalam teg. 

//Perkongsian pengetahuan API DOM JavaScript.选中标签let var_name = document.querySelector();//Perkongsian pengetahuan API DOM JavaScript.获取内容let content = var_name.innnerHTML;//Perkongsian pengetahuan API DOM JavaScript.修改内容var_name.innerHTML = 修改内容;

Chestnut:

Perkongsian pengetahuan API DOM JavaScript
Kesan:
Perkongsian pengetahuan API DOM JavaScript
Kami mendapati bahawa elemen yang sama semuanya dilipat dan keluar, kami boleh klik pada Pembangun Gunakan bar tetapan alat untuk menetapkan output pengembangan.

Perkongsian pengetahuan API DOM JavaScript
Di atas kami meletakkan teks dalam tag yang dipilih Bagaimana jika ia bukan teks? Malah, ia adalah sama dengan andaian tag senarai diletakkan di dalam, hasil yang diperoleh adalah kod HTML tag di dalamnya.
Perkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Ubah suai elemen pengetahuan API DOM JavaScript>

Kami juga boleh mengubah suai kandungan HTML, seperti menukar senarai kepada tajuk.

Perkongsian pengetahuan API DOM JavaScript
Kesan:
Perkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript Kaunterpengetahuan API DOM JavaScript>

Berdasarkan pengetahuan mendapatkan dan mengubah suai elemen, kita boleh melaksanakan kaunter mudah, idea asasnya ialah:

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

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

Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
我们来丰富一下，加一个按钮，可以完成减的功能。

页面Perkongsian pengetahuan API DOM JavaScript：

    <style>
        #screen{
            width: 88px;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            text-align: center;
            line-height: Perkongsian pengetahuan API DOM JavaScript0px;
            border-radius: Perkongsian pengetahuan API DOM JavaScriptpx;

            background-color: rgb(Perkongsian pengetahuan API DOM JavaScript00, Perkongsian pengetahuan API DOM JavaScript00, Perkongsian pengetahuan API DOM JavaScript00);
        }
        #plus, #sub{
            width: Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScriptpx;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            border-radius: Perkongsian pengetahuan API DOM JavaScript0px;
            margin-top: Perkongsian pengetahuan API DOM JavaScriptpx;
            border: 0px;

            background-color: rgb(Perkongsian pengetahuan API DOM JavaScript80, Perkongsian pengetahuan API DOM JavaScript00, Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript);
        }
    </style>
    <p>
        0    </p>
    <button>计数+Perkongsian pengetahuan API DOM JavaScript</button>
    <button>计数-Perkongsian pengetahuan API DOM JavaScript</button>

    <script>

    </script>

JavaScriptPerkongsian pengetahuan API DOM JavaScript：

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

Perkongsian pengetahuan API DOM JavaScript：

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

页面Perkongsian pengetahuan API DOM JavaScript：

    <input>
    <button>+Perkongsian pengetahuan API DOM JavaScript</button>

    <script>

    </script>

JavaScriptPerkongsian pengetahuan API DOM JavaScript:

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

Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript点击图片切换pengetahuan API DOM JavaScript>

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

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

  1. 获取img元素。
  2. Perkongsian pengetahuan API DOM JavaScriptonclick。
  3. 点击事件的细节就是判断路径是否包含ee，包含就将src属性换成./樱花.png，反过来，判断路径是否包含樱花，包含就将src属性换成./jee.png
  4. 可以使用indexOf方法判断是否包含某个字符串。

JavaScriptPerkongsian pengetahuan API DOM JavaScript：

let img = document.querySelector("img");img.onclick = function() {
    console.log(img.src);
    if (img.src.indexOf("ee") >= 0) {
        img.src = Perkongsian pengetahuan API DOM JavaScript9;./樱花.pngPerkongsian pengetahuan API DOM JavaScript9;;
    } else if (img.src.indexOf("樱花")) {
        img.src = Perkongsian pengetahuan API DOM JavaScript9;./jee.pngPerkongsian pengetahuan API DOM JavaScript9;
    }}

页面Perkongsian pengetahuan API DOM JavaScript：

    <style>
        img {
            height: Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript0px;
        }
    </style>
    <img  alt="Perkongsian pengetahuan API DOM JavaScript" >

    <script>

    </script>

Perkongsian pengetahuan API DOM JavaScript：
jsPerkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
具体哪些属性可以修改，我们可以使用console.dir函数来获取某个元素DOM API能够操作的全部属性。

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.6暂停/播放切换pengetahuan API DOM JavaScript>

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

实现逻辑和切换逻辑是差不多的，具体看Perkongsian pengetahuan API DOM JavaScript吧：

JavaScriptPerkongsian pengetahuan API DOM JavaScript：

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

页面Perkongsian pengetahuan API DOM JavaScript：

    <input>

实现Perkongsian pengetahuan API DOM JavaScript：

Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript

Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.7全选/取消全选pengetahuan API DOM JavaScript>

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

实现的基本思路：

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

JavaScriptPerkongsian pengetahuan API DOM JavaScript：

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

    <input>胡桃 

    <input>可莉 

    <input>万叶 

    <input>心海 

    <input>锅巴 
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.8点击文字放大pengetahuan API DOM JavaScript>
DOM还可以修改style属性，下面来尝试运用选中元素与修改元素的知识，来实现点击文字放大的一个小案例。
因为CSS中不区分大小写，属性与变量的命名采用脊柱式命名，而JS中-不能用于变量的命名，为了能够将CSS属性与JS变量名匹配，JS使用驼峰的形式表示CSS的属性，例如font-size属性，对应JS的变量名为fontSize。
对于文字的放大，我们可以给文本所在的标签注册一个点击事件，每点击一次就将字体大小增大，即修改CSS的font-size属性。
JavaScriptPerkongsian pengetahuan API DOM JavaScript：
let p = document.querySelector("p");p.onclick = function() {
    //Perkongsian pengetahuan API DOM JavaScript.获取文字大小属性
    let wordsSize = parseInt(p.style.fontSize);
    console.log("修改前" + wordsSize);
    //Perkongsian pengetahuan API DOM JavaScript.修改文字大小
    wordsSize += Perkongsian pengetahuan API DOM JavaScript;
    //Perkongsian pengetahuan API DOM JavaScript.写回到属性
    p.style.fontSize = wordsSize + "px";
    console.log("修改后" + wordsSize);}
页面Perkongsian pengetahuan API DOM JavaScript：
    <p pengetahuan api dom javascript0px>
        我是一段文本    </p>
实现Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.9实现关灯/开灯（夜间/白间模式切换）pengetahuan API DOM JavaScript>
很多情况下一个个修改样式属性太麻烦了，我们也可以直接修改类属性来达到Perkongsian pengetahuan API DOM JavaScript，可以通过选中元素变量名.className来获取和修改类属性。
由于JavaScript里面的class是一个关键字，因此获取元素的class不能使用class，而需要使用className，多个class属性可以使用classList。
JavaScriptPerkongsian pengetahuan API DOM JavaScript：
let p = document.querySelector(Perkongsian pengetahuan API DOM JavaScript9;pPerkongsian pengetahuan API DOM JavaScript9;);let button = document.querySelector(Perkongsian pengetahuan API DOM JavaScript9;buttonPerkongsian pengetahuan API DOM JavaScript9;);button.onclick = function(){
    if (p.className == "light") {
        p.className = Perkongsian pengetahuan API DOM JavaScript9;blackPerkongsian pengetahuan API DOM JavaScript9;;
        button.innerHTML = Perkongsian pengetahuan API DOM JavaScript9;开灯Perkongsian pengetahuan API DOM JavaScript9;;
    } else if (p.className == Perkongsian pengetahuan API DOM JavaScript9;blackPerkongsian pengetahuan API DOM JavaScript9;) {
        p.className = Perkongsian pengetahuan API DOM JavaScript9;lightPerkongsian pengetahuan API DOM JavaScript9;;
        button.innerHTML = Perkongsian pengetahuan API DOM JavaScript9;关灯Perkongsian pengetahuan API DOM JavaScript9;;
    }}
页面Perkongsian pengetahuan API DOM JavaScript：
    <style>        
        p{
            width: Perkongsian pengetahuan API DOM JavaScript00px;
            text-align: center;
        }
        .light, .black{
            width: Perkongsian pengetahuan API DOM JavaScript00px;
            height: Perkongsian pengetahuan API DOM JavaScript00px;

            text-align: center;
            line-height: Perkongsian pengetahuan API DOM JavaScript00px;
            font-size: Perkongsian pengetahuan API DOM JavaScript0px;
        }

        button{
            width: Perkongsian pengetahuan API DOM JavaScript00px;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            font-size: Perkongsian pengetahuan API DOM JavaScript0px;
            background-color: rgb(Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00);
            border: 0cm;
            border-radius: Perkongsian pengetahuan API DOM JavaScript0px;
        }
        .light{
            background-color: aliceblue;
            color: black;
        }
        .black{
            background-color: black;
            color: aliceblue;
        }
    </style>
    <p>我是一段文本</p>
    <p>
        <button>关灯</button>
    </p>
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript操作页面结点pengetahuan API DOM JavaScript>Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript新增结点pengetahuan API DOM JavaScript>
除了修改元素的属性和内容，我们还可以在页面上添加元素，要添加元素，那就得先新建一个元素，并且还需要依赖一个父元素（已经创建好的），把这个新建的元素插入到父元素中就能实现元素的添加（依赖与DOM树），这个操作也被称为新增页面结点。
 新建元素：
let newp = document.createElement("元素标签");
补充元素内容：
newp.属性 = 值;
插入到DOM树:
选中的父元素.appendChild(创建的子元素);
实例：
 JavaScriptPerkongsian pengetahuan API DOM JavaScript：
let cnt = Perkongsian pengetahuan API DOM JavaScript;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++;}
页面Perkongsian pengetahuan API DOM JavaScript：
    <p></p>
    <button>新增节点</button>
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScript6
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript删除结点pengetahuan API DOM JavaScript>
删除结点就更容易了，在DOM树上删除结点就行。
删除结点：
获取到的父元素.removeChild(需要删除的子元素);
实例：
 JavaScriptPerkongsian pengetahuan API DOM JavaScript：
let cnt = Perkongsian pengetahuan API DOM JavaScript;let add = document.querySelector("#add");let parent = document.querySelector("#container");let arr = [];add.onclick = function() {
    let newp = document.createElement("p");
    arr[cnt-Perkongsian pengetahuan API DOM JavaScript] = 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-Perkongsian pengetahuan API DOM JavaScript]);
    } else {
        console.log( "该父元素已经没有元素可以删除了");
        cnt++;
    }}
页面Perkongsian pengetahuan API DOM JavaScript：
    <p></p>
    <button>新增节点</button>
    
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScript7
Perkongsian pengetahuan API DOM JavaScript.综合案例pengetahuan API DOM JavaScript>Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript猜数字pengetahuan API DOM JavaScript>
目标页面
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript
猜数字的逻辑我就不赘述了，不过里面需要取随机数，我们可以通过js中的Math.random()函数来获取随机数，该函数生成随机数的范围是[0,Perkongsian pengetahuan API DOM JavaScript)区间内的一个小数，我们需要的是[Perkongsian pengetahuan API DOM JavaScript,Perkongsian pengetahuan API DOM JavaScript00]之间的整数，我们可以乘上Perkongsian pengetahuan API DOM JavaScript00后向下取整加一就能得到目标区间的数了，实现向下取整的函数是Math.floor(数字)。
然后前端页面部分是通过HTML加上CSS弹性布局实现的，交互通过JavaScript DOM实现，下面的Perkongsian pengetahuan API DOM JavaScript案例也是一样的，就不多说了。
JavaScriptPerkongsian pengetahuan API DOM JavaScript：
//获取元素let input = document.querySelector("#guess");let ret = document.querySelector("#result");let cnt = document.querySelector("#count");let guessBtn = document.querySelector("#bPerkongsian pengetahuan API DOM JavaScript");let flash = document.querySelector("#bPerkongsian pengetahuan API DOM JavaScript");//生成Perkongsian pengetahuan API DOM JavaScript-Perkongsian pengetahuan API DOM JavaScript00的随机数//floor表示只取浮点数整数部分let ansNumber = Math.floor(Math.random() * Perkongsian pengetahuan API DOM JavaScript00) + Perkongsian pengetahuan API DOM JavaScript;//实现按钮猜数字的点击事件guessBtn.onclick = function(){
    //输入框没有值，表示用户没有输入，不处理
    if(input.value == Perkongsian pengetahuan API DOM JavaScript9;Perkongsian pengetahuan API DOM JavaScript9;) {
        return;
    }
    let guessNumber = parseInt(input.value);
    if (guessNumber > ansNumber) {
        ret.innerHTML = "YO!猜大了！";
        ret.style.color = "red";
    } else if (guessNumber <p>页面Perkongsian pengetahuan API DOM JavaScript：</p><pre class="brush:php;toolbar:false">nbsp;html>
    <meta>
    <meta>
    <meta pengetahuan api dom javascript.0>
    <title>猜数字</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: aliceblue;
        }
        hPerkongsian pengetahuan API DOM JavaScript {
            width: Perkongsian pengetahuan API DOM JavaScript00%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            text-align: center;
            line-height: Perkongsian pengetahuan API DOM JavaScript0px;
            color: blueviolet;
            margin: Perkongsian pengetahuan API DOM JavaScript0px 0;
        }
        .guessp {
            width: Perkongsian pengetahuan API DOM JavaScript00%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            text-align: center;
            display: flex;
            justify-content: center;
        }
        .guessp #bPerkongsian pengetahuan API DOM JavaScript{
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            width: Perkongsian pengetahuan API DOM JavaScript0%;
            background-color: rgb(Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript);
            color: aliceblue;
            border: 0cm;
            border-radius: Perkongsian pengetahuan API DOM JavaScriptpx;
        }
        .guessp #bPerkongsian pengetahuan API DOM JavaScript:active{
            background-color: gray;
        }
        .guessp #guess{
            width: Perkongsian pengetahuan API DOM JavaScript0%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            border: Perkongsian pengetahuan API DOM JavaScriptpx solid rgb(Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScript);
            border-radius: Perkongsian pengetahuan API DOM JavaScriptpx;
            text-indent: 0.6em;
            outline: none;
        }
        .guessp #number{
            width: Perkongsian pengetahuan API DOM JavaScript0%;
            text-align: right;
        }
        .guessp #in {
            width: 70%;
            margin-left: Perkongsian pengetahuan API DOM JavaScript%;
            text-align: left;
        }
        .cnt, .ret{
            width: Perkongsian pengetahuan API DOM JavaScript00%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            text-align: center;
        }
        .rev{
            width: Perkongsian pengetahuan API DOM JavaScript00%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            text-align: center;
        }
        .rev #bPerkongsian pengetahuan API DOM JavaScript{
            margin: Perkongsian pengetahuan API DOM JavaScriptpx;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            width: Perkongsian pengetahuan API DOM JavaScript00px;
            background-color: rgb(Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00,Perkongsian pengetahuan API DOM JavaScript00);
            color: aliceblue;
            border: 0cm;
            border-radius: Perkongsian pengetahuan API DOM JavaScriptpx;
        }
        .rev #bPerkongsian pengetahuan API DOM JavaScript:active{
            background-color: gray;
        }
        .ret, .cnt{
            width: Perkongsian pengetahuan API DOM JavaScript00%;
            height: Perkongsian pengetahuan API DOM JavaScript0px;
            display: flex;
            justify-content:center;
        }
        .guessp #messr, .guessp #messc {
            width: Perkongsian pengetahuan API DOM JavaScript0%;
            text-align: right;
        }
        .guessp #result, .guessp #count{
            width: 70%;
            text-align: left;
            margin-left: Perkongsian pengetahuan API DOM JavaScript%;
        }


    </style>

    <hperkongsian pengetahuan api dom javascript>猜数字游戏</hperkongsian>pengetahuan API DOM JavaScript>
    <p>
        <span>要猜的数字:</span>
        <span>
            <input pengetahuan api dom javascript-perkongsian javascript00>
            <button pengetahuan api dom javascript>我就要猜它</button>
        </span>
    </p>
    
    <p>
        <span>结果:</span>
        <span>你还没有猜哦！</span>
    </p>
    <p>
        <span>次数:</span>
        <span>0</span>
    </p>
    <p>
        <button pengetahuan api dom javascript>
            开始/重新开始猜数字        </button>
    </p>


    <script>

    </script>
    
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScript
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScriptPerkongsian pengetahuan API DOM JavaScriptpengetahuan API DOM JavaScript>
目标页面
Perkongsian pengetahuan API DOM JavaScript.Perkongsian pengetahuan API DOM JavaScript
JavaScriptPerkongsian pengetahuan API DOM JavaScript：
//获取元素let loveBtn = document.querySelector("#submit");let adv = ["深情地", "温柔地", "随便地", "紧张地", "幽默地", "滑稽地", "开心地", ""];//用户点击表白将表白记录显示在表白按钮下面let record = [];let i = 0;loveBtn.onclick = function() {
    //Perkongsian pengetahuan API DOM JavaScript.获取表白内容
    let inputs = document.querySelectorAll("input");
    let from = inputs[0].value;
    let to = inputs[Perkongsian pengetahuan API DOM JavaScript].value;
    let message = inputs[Perkongsian pengetahuan API DOM JavaScript].value;
    //Perkongsian pengetahuan API DOM JavaScript.如果有一项内天为空，不处理
    if (from == Perkongsian pengetahuan API DOM JavaScript9;Perkongsian pengetahuan API DOM JavaScript9; || to == Perkongsian pengetahuan API DOM JavaScript9;Perkongsian pengetahuan API DOM JavaScript9; || message == Perkongsian pengetahuan API DOM JavaScript9;Perkongsian pengetahuan API DOM JavaScript9;) {
        return;
    }
    //Perkongsian pengetahuan API DOM JavaScript.汇总表白语言
    let n = adv.length;
    let index = (Math.floor(Math.random() * Perkongsian pengetahuan API DOM JavaScript000) + Perkongsian pengetahuan API DOM JavaScript) % n;
    let romAdv = adv[index];
    let loveMess = from + romAdv + "对" + to + "说" + message;
    record[i] = "留言" + (i+Perkongsian pengetahuan API DOM JavaScript) + ":" + loveMess;
    //Perkongsian pengetahuan API DOM JavaScript.新建结点，插入表白记录
    let p = document.createElement("p");
    p.innerHTML = record[i];
    p.className = Perkongsian pengetahuan API DOM JavaScript9;ohPerkongsian pengetahuan API DOM JavaScript9;;
    let container = document.querySelector(".container");
    container.appendChild(p);
    i++;
    //Perkongsian pengetahuan API DOM JavaScript.表白完，清空输入框
    for (let i = 0; i 
页面Perkongsian pengetahuan API DOM JavaScript：
nbsp;html>
    
    
    
    Perkongsian pengetahuan API DOM JavaScript
    
    

        "真的是"Perkongsian pengetahuan API DOM JavaScriptpengetahuan API DOM JavaScript>
        
输入后点击提交, 会将信息显示在表白按钮下方

        
这是一个正经的Perkongsian pengetahuan API DOM JavaScript，这真的不是一个Perkongsian pengetahuan API DOM JavaScript

        

        

            是谁:
            <input>
        

        

            向谁:
            <input>
        

        

            说:
            <input>
        

        

            
        

    
    
    
实际Perkongsian pengetahuan API DOM JavaScript：
Perkongsian pengetahuan API DOM JavaScript
【相关推荐：javascript视频教程、web前端】

Atas ialah kandungan terperinci Perkongsian pengetahuan API DOM JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Java JavaScript css html NULL math 字符串 class 字符串类型 JS console 对象 事件 dom innerHTML 选择器 input
Kenyataan：
Artikel ini dikembalikan pada:csdn.net. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat berbilang objek dalam JavaScript? Penjelasan terperinci tentang empat kaedahArtikel seterusnya：Bagaimana untuk membuat berbilang objek dalam JavaScript? Penjelasan terperinci tentang empat kaedah

Artikel berkaitan

Lihat lagi