• JS(二)

    2.定时器相关

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<h1>0h1>
<h2>0h2>
<script>
    // 开启定时器
    setInterval(f,1000);
    let count=0;
    let h1 = document.querySelector("h1");
    function f() {
        count++;
        h1.innerText=count;
    }
    //通过匿名方法开启定时器
    let timer=setInterval(function () {
        console.log(count);
        if(count==5){
            //停止定时器
            clearInterval(timer);
        }
    },100)/*100毫秒打印一次count的值*/
    //开启只执行一次的定时器
    setTimeout(function () {
        let h2 = document.querySelector("h2");
        h2.innerText="时间到!";
    },3000)
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

    3.页面相关

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text">
<input type="button" value="按钮"onclick="f()">
<script>
    function f() {
        //通过选择器得到文本框对象
        let i = document.querySelector("input");
        //创建h1
        let h1 = document.createElement("h1");
        //设置显示的内容为文本框的值
        h1.innerText=i.value;
        //把h1添加到body里面
        document.body.append(h1);

        //创建图片标签
        let img = document.createElement("img");
        img.src="../imgs/a.jpg";
        document.body.append(img);
    }
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

    4.图片练习

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" placeholder="请输入添加图片的数量" id="i1">
<input type="button" value="帅哥" onclick="f(1)">
<input type="button" value="美女" onclick="f(2)">
<hr>
<script>
    function f(x){
    let imgName=x==1?"../imgs/a.jpg":"../imgs/b.jpg";
    //得到文本框
        let i1 = document.querySelector("#i1");
        for(let i=0;i<i1.value;i++){
            //创建图片标签
            let img = document.createElement("img");
            img.src=imgName;
            img.width=100;//设置宽度
            //添加到body里面
            document.body.append(img);
        }
    }
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

    5.员工列表练习

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" placeholder="员工姓名" id="i1">
<input type="text" placeholder="员工工资" id="i2">
<input type="text" placeholder="员工工作" id="i3">
<input type="button" value="添加" onclick="f()">
<table border="1">
    <caption>员工列表caption>
    <tr>
        <th>姓名th>
        <th>工资th>
        <th>工作th>
    tr>
table>
<script>
    function f() {
        //1.创建tr
        let tr = document.createElement("tr");
        //2.创建3个td
        let nameTd = document.createElement("td");
        let salaryTd = document.createElement("td");
        let jobTd = document.createElement("td");
        //3.得到3个文本框并把3个文本框的值给到3个td
        nameTd.innerText=i1.value;
        salaryTd.innerText=i2.value;
        jobTd.innerText=i3.value;
        //4.把td装进tr
        tr.append(nameTd,salaryTd,jobTd);
        //5.得到table 并把tr装进table
        let table = document.querySelector("table");
        table.append(tr);
    }
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

    6.自定义对象

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table border="1">
    <caption>商品列表caption>
    <tr>
        <th>商品标题th>
        <th>商品价格th>
        <th>商品销量th>
    tr>
table>
<script>
    //实例化对象 空对象
    let p1={};
    //动态给实例化完成的对象添加属性和方法
    p1.name="张三";
    p1.age=20;
    p1.run=function () {
        console.log(this.name+":"+this.age);
    }
    //调用方法
    p1.run();

    //实例化自带属性和方法的对象
    let p2={
        name:"李四",
        age:18,
        run:function () {
            console.log(this.name+":"+this.age);
        }
    }
    p2.run();
    //通过数组装对象的方式封装 列表数据
    let arr=[{title:"小米手机",price:4000,saleCount:200},
        {title: "李宁篮球鞋",price: 500,saleCount: 1200},
        {title: "统一方便面",price: 5,saleCount: 300}]
    //遍历数组 把数据展示到页面中
    for (let product of arr){
        //创建行
        let tr = document.createElement("tr");
        let titleTd = document.createElement("td");
        let priceTd = document.createElement("td");
        let saleCountTd = document.createElement("td");
        titleTd.innerText=product.title;
        priceTd.innerText=product.price;
        saleCountTd.innerText=product.saleCount;
        //把3个td装进tr
        tr.append(titleTd,priceTd,saleCountTd);
        //把tr装进table
        let table=document.querySelector("table");
        table.append(tr);
    }

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

    7.综合练习

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<table border="1">
    <caption>个人信息caption>
    <tr>
        <td>照片:td>
        <td id="head_td">td>
    tr>
    <tr>
        <td>名字:td>
        <td id="name_td">td>
    tr>
    <tr>
        <td>年龄:td>
        <td id="age_td">td>
    tr>
    <tr>
        <td>好友:td>
        <td id="friend_td">td>
    tr>
table>
<input type="button" value="请求数据" onclick="f()">
<script>
    function f() {
        //准备数据
        let person={url:"../imgs/a.jpg",name:"苍老师",age:18,friend:["克晶姐","传奇哥","我"]}
        //把对象中的数据展示到页面中
        // let name_td = document.querySelector("name_td");
        name_td.innerText=person.name;
        age_td.innerText=person.age;
        //创建图片 把对象中的图片路径设置给图片标签 并添加到td里面
        let img = document.createElement("img");
        img.src=person.url;
        img.width=100;
        head_td.append(img);
        //创建ul和li添加到td中
        let ul = document.createElement("ul");
        // 遍历数组
        for(let name of person.friend){
            //创建li
            let li = document.createElement("li");
            li.innerText=name;
            //把li添加到ul里面
            ul.append(li);
        }
        //把ul装进td
        friend_td.append(ul);
    }
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

    8 HelloVueCDN和本地

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    <h1>{{info}}h1>
div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">script>


<script>
    //创建Vue对象
    let v=new Vue({
        el:"body>div",//设置Vue框架管理范围
        data:{
            info:"Hello Vue!"
        }
    })
    setTimeout(function () {
        v.info="值变了!"
    },3000)
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

    9.文本相关指令

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    {变量}}:插值,让此处的文本内容和变量进行绑定，不依赖于标签-->
    {{msg}}
    <p>{{msg}}p>
    <h1>{{msg}}h1>
    
    <h1 v-text="msg">h1>
    
    <p v-html="msg">p>
div>
<script src="js/vue.min.js">script>
<script>
    new Vue({
        el:"body>div",
        data:{
            msg:"文本相关文本相关>"
        }
    })
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

    10.属性绑定

    在这里插入图片描述

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>
    
    <a :href="url">超链接1a>
    
    <a v-bind:href="url">超链接2a>
    <img :src="imgName" alt="">
    <input type="text" :value="info">
div>
<script src="js/vue.min.js">script>
<script>
    let v=new Vue({
        el:"body>div",
        data:{
            url:"http://www.baidu.com",
            imgName:"../imgs/a.jpg",
            info:"属性绑定"
        }
    })
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
  • 相关阅读:
    APP破解去广告
    7 C控制语句：分支和跳转
    Android 12 Bluetooth Open[1]
    UVA-1374 旋转游戏 题解答案代码 算法竞赛入门经典第二版
    systemVerilog验证中的program块
    LLM-阿里云 DashVector + ModelScope 多模态向量化实时文本搜图实战总结
    DS二叉树的存储
    使用Linux Tc实现入向和出向限速
    mqtt的nginx和websocket部署
    【 InnoDB Cluster 】安装部署 MySQL Router
  • 原文地址：https://blog.csdn.net/longgetaotao_06/article/details/126590775