一篇博客带你学会JavaScript（前后端必会、二万字笔记）

本文链接：https://blog.csdn.net/Cosmoshhhyyy/article/details/137612828

script 标签

src

和scc一样可以内嵌也可以外src外引。
一般是推荐外引。

<script src="idx.js"></script>

defer 延迟加载

等html都加载完再执行，就不用把script放到下面了。

<script src="idx.js" defer></script>

基本语法

定义变量与使用变量

变量类型分为两大类：基本类型和复合类型。

基本类型

基本类型分为五大类：数值类型、字符串类型、布尔类型、undefined类型、null类型。

var a = 10.7
var b = 'ssdfsdfsd'
var c = false
var d // undefined
var e = document.getElementById("xx1") // 找不到id为xx1的元素时  null

console.log(a)
console.log(b)
console.log(c)
console.log(d)
console.log(e)

在这里插入图片描述

typeof 查看变量类型

typeof 作为运算符 typeof() 作为方法。
作用是一样的。

console.log(typeof(a))
console.log(typeof(b))
console.log(typeof c)
console.log(typeof d)
console.log(typeof e)

在这里插入图片描述

复合类型

符合类型分为三种：数组类型、对象类型、函数类型。

数组类型定义

与java数组的区别：1、数组长度可变 2、没有越界 3、不用同类型

var arr = [34, 56, 78, 90, "xx", undefined, false, null, [45, 67]]
arr.push(80)
console.log(arr)
console.log(arr.length)
console.log(arr[2])

在这里插入图片描述

对象类型定义

var obj = {
    name: "xx",
    age: 31, 
    sex: "男", 
    banks: ["中国银行","建设银行", "工商银行"],
    wife: {
        name: "yy",
        age: 20,
        sex: "女",
        banks: ["平安银行", "工行"]
    },
    children: [{
        name: "zz",
        age: 2
        },
        {
            name: "aa",
            age: 1
        }
    ]
}

console.log(obj.name)
console.log(obj.banks[1])
console.log(obj.children[1].name)

在这里插入图片描述

当我们想要一个变量作为变量，而不是obj中的属性时，用如下访问方法：

console.log(obj["name"])

for (var  key in obj) {
    console.log(obj[key])
}

函数

定义函数

// 命名函数
function test(a, b){
    console.log("我是个函数1")
}

// 匿名函数
var f = function(a, b){
    console.log("我是个函数2")
}

在这里插入图片描述

使用函数

1、基本使用函数名加()

test(5, 6)

2、函数整体作为值来使用

setInterval(test, 1000)

在这里插入图片描述

3、函数返回值作为值来使用

function test(a, b){
    console.log("我是个函数1")
    return 8
}
var a = test();
console.log(a)

在这里插入图片描述

DOM 操作

DOM（Document Object Model）：文档对象模型

作用：增、删、改、查。

查找

根据属性查找

下边的演示都是基于如下html。

<body>
    <div id="xx1"></div>
    <div class="xx2">1</div>
    <div class="xx2">2</div>
    <p class="xx4">1</p>
    <p class="xx4">2</p>
</body>

getElementById() 以id来查找元素

var xx1 = document.getElementById("xx1")
console.log(xx1)

在这里插入图片描述

getElementsByClassName() 以类名查找
注意：元素class名可以相同，若有多个会返回一个数组，而id有多个相同的只会返回第一个。

var xx2 = document.getElementsByClassName("xx2");
console.log(xx2)
console.log(xx2[0])
console.log(xx2[1])

在这里插入图片描述

getElementsByTagName() 以标签来查找元素

同样也要注意多个标签相同的情况。

var xx3 = document.getElementsByTagName("p")
console.log(xx3)

在这里插入图片描述

querySelector() 选择器来查找元素（也就是css中的那个）
注意：只能返回第一个复合条件的。

var xx4 = document.querySelector(".xx4")
console.log(xx4)

在这里插入图片描述

querySelectorAll() 选择器来查找元素（与上面不同的是，可以查找多个）
注意：与 getElementsByClassName() 不同的是，只有一个符合时，也是返回的数组。（记住它返回的一定是数组即可）

var xx5 = document.querySelectorAll(".xx4")
console.log(xx5)

在这里插入图片描述

例子点击背景变色

第一种：点第二个的时候前一个点的不会消失

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="xx">hello</div>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
</body>
    <script>
        var h = document.querySelectorAll(".xx")

    for (var i = 0; i < h.length; i++){
        h[i].onclick = function() {
            this.style.background = "red"
        }
    }
    </script>
</html>

第二种：点第二个的时候前一个点的会消失

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="xx">hello</div>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
    <h3 class="xx">hello</h3>
</body>
<script>
    var h = document.querySelectorAll(".xx")

    for (var i = 0; i < h.length; i++){
        h[i].onclick = function() {
            for (var j = 0; j < h.length; j++){
                h[j].style.background = "none"
            }
            this.style.background = "red"
        }
    }
</script>
</html>

根据元素之间的关系查找：

比较简单，就不再每个都写用法了。
最后给出一个例子，就能明白了。

parentNode 获取当前节点父亲节点

parentElement 与上相同

childNodes 获取当前节点的所以孩子节点（包括文本节点，空白也算，可以通过nodeType过滤）

children 获取当前的所以孩子节点（只包括元素节点）

previousSibling 获取当前节点上一个节点（注意文本节点出存在）

previoudElementSibling 获取当前节点上一个元素节点

nextSibling 获取当前节点的下一个节点（注意文本节点的存在）

nextElementSibling 获取当前节点的下一个元素节点

firstChild 获取当前节点的第一个孩子节点（注意文本节点的存在）

firstElementChild 获取当前节点的第一个元素孩子节点

lastChild 取当前节点的最后一个孩子节点（注意文本节点的存在）

lastElementChild 取当前节点的最后一个元素孩子节点

例子点击切换

在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="idx.css">
    <script src="idx.js" defer></script>
</head>
<body>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    
</body>
</html>

css:

*{
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
}
.container {
    width: 50vh;
}
.container .tab {
    display: flex;
    justify-content: space-between;
}
.container .tab li{
    list-style: none;
    padding: 10px;
    color:blue;
    border: 1px solid red;
    text-align: center;
    border-bottom: 1px solid white;
}
.container .tab .cur{
    position: relative;
    font-weight: 600;
    top: 1px;
}

.container .tabBody{
    padding: 10px;
    border: 1px solid red;
    height: 100px;
}
.container .tabBody div{
    background: pink;
    display: none;
}
.container .tabBody div:nth-child(1) {
    display: block;
}

js:

var li_list = document.querySelectorAll(".container .tab li")
var div_list = document.querySelectorAll(".container .tabBody>div")
for (var i = 0; i < li_list.length; i++){
    li_list[i].onclick = function() {
        var idx = this.getAttribute("index")

        for (var j = 0; j < li_list.length; j++){
            li_list[j].className = "";
        }

        this.className = "cur"

        for (var k = 0; k < div_list.length; k++){
            if (k == idx){
                div_list[k].style.display = "block"
            } else {
                div_list[k].style.display = "none"
            }
        }
    }
}

若有多个tab，为了互不影响:

在这里插入图片描述

css 文件与上面同，不再给出。
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="idx.css">
    <script src="idx.js" defer></script>
</head>
<body>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
    <div class="container">
        <ul class="tab">
            <li class="cur" index="0">新闻动态</li>
            <li index="1">学术研究</li>
            <li index="2">人才招聘</li>
        </ul>
        <div class="tabBody">
            <div>新闻动态内容</div>
            <div>学术研究内容</div>
            <div>人才招聘内容</div>
        </div>
    </div>
</body>
</html>

js:

var container_list = document.querySelectorAll(".container")

for (var h = 0; h < container_list.length; h++){
    var item_li_list = container_list[h].querySelectorAll(".container .tab li")
    for (var i = 0; i < item_li_list.length; i++){
        item_li_list[i].onclick = function() {
            var cur_li_list = this.parentNode.children

            for (var j = 0; j < cur_li_list.length; j++){
                cur_li_list[j].className=""
            }

            this.className = "cur"

            var cur_div_list = this.parentNode.parentNode.querySelectorAll(".tabBody>div")
            var idx = this.getAttribute("index")
            for (var k = 0; k < cur_div_list.length; k++){
                if (k == idx){
                    cur_div_list[k].style.display = "block"
                } else {
                    cur_div_list[k].style.display = "none"
                }
            }
        }
    }
}

修改和获取

innerHTML 非表单控件，只包含html
innerText 非表单控件，只包含纯文本
value 表单控件

例子获取输入框内容修改其他标签内容

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js:

var container = document.querySelector(".container")
var ipt = document.querySelector(".ipt")
var sbt = document.querySelector(".sbt")

sbt.onclick = function() {
    var txt = ipt.value
    container.innerHTML = txt
}

修改属性

获取到之后，直接加.需要修改的元素进行修改即可。（只能修改它本身有的属性自定义的不写）
setAttribute(“属性”) 与上不同的是可以获取自定义的属性。
注意在修改style中内容，名字规律是把css中—去掉，后面字母换成大写即可。（如：t.style.borderRadius）

增加

步骤一：创建或复制元素
创建 createElement
复制 cloneNode(boolean) true 深度复制（只复制一层） false 浅复制（就复制最外层）
步骤二：添加属性
步骤三: 添加到以有元素中追加 appendChild
元素3.insertBefore(元素1，元素2) 在元素3中的元素2之前插入
扩展：替换元素 replaceChild

例子基本使用方法

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js：

var div = document.createElement("div") // 创建
div.innerHTML = "<h3>我是 创建 添加的</h3>"  

var container = document.querySelector(".container")
container.appendChild(div) // 添加

var newcontainer = container.cloneNode(true)  // 克隆
newcontainer.innerHTML = "<h3>我是 克隆 添加的</h3>"
container.appendChild(newcontainer)

var ipt = document.querySelector(".ipt")

var newipt = document.createElement("div")
newipt.innerHTML = "<h3>我是 替换 的</h3>"  
document.querySelector("body").replaceChild(newipt, ipt) // 替换

console.log(document.querySelector("body")) // 打印一下，看结构

js之前的结构：

在这里插入图片描述

js之后的结构：

在这里插入图片描述

删除

removeChild 删除一个子节点。返回删除的节点。

例子点击按钮把输入框删除

在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="test.js" defer></script>
</head>
<body>
    <div class="container">
        abcd
    </div>
    <input type="text" class="ipt">
    <input type="button" value="修改" class="sbt">
</body>
</html>

js:

var ipt = document.querySelector(".ipt")
var sbt = document.querySelector(".sbt")  
var body = document.querySelector("body")

sbt.onclick = function() {
    body.removeChild(ipt) // 删除ipt
}

事件传播

事件冒泡（dubbed bubbling）：当一个元素接收到事件的时候，会把他接收到的事件传给自己的父级，一直到 window （注意这里传递的仅仅是事件，例如click、focus等等这些事件，并不传递所绑定的事件函数。）

事件捕获（event capturing）：当鼠标点击或者触发dom事件时（被触发dom事件的这个元素被叫作事件源），浏览器会从根节点 =>事件源（由外到内）进行事件传播。
其实就是一个是由内向外，一个是由外向内传播。

addEventListener 事件监听，控制捕获阶段默认false，冒泡监听，true捕获。
event.stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。

下面基于如下例子举例：
注意传播方向，响应顺序。

在这里插入图片描述

<body>
    <div class="div1">
        div1
        <div class="div2">
            div2
            <div class="div3">
                div3
            </div>
        </div>
    </div>
</body>

冒泡：
默认就是冒泡的。

var div1 = document.querySelector(".div1")
var div2 = document.querySelector(".div2")
var div3 = document.querySelector(".div3")

div1.onclick = function() {
    console.log("div1")
}

div2.onclick = function() {
    console.log("div2")
}

div3.onclick = function() {
    console.log("div3")
}

此时点击div3。

在这里插入图片描述

捕获：

var div1 = document.querySelector(".div1")
var div2 = document.querySelector(".div2")
var div3 = document.querySelector(".div3")

div1.addEventListener("click", function() {
    console.log("div1")
}, true)

div2.onclick = function() {
    console.log("div2")
}

div3.onclick = function() {
    console.log("div3")
}

在这里插入图片描述

定时器

周期定时器

var timer = setInterval(函数, 间隔[毫秒]) 周期定时器
clearInterval 清除周期定时器
三种写法：

var i = 0
function fun() {
    console.log(i++)
}
setInterval("fun()", 1000) // 写法1

setInterval(fun, 1000) // 写法2

setInterval(function() { // 写法3
    console.log(i++)
}, 1000)

在这里插入图片描述

例从 start 到 10 每隔1s输出

在这里插入图片描述

var i = 0

function f(start) {
    if (i == 11) {
        clearInterval(timer)
        return
    }
    if (i)
    {
        console.log(i++)
        return
    }

    i = start
}

var timer = setInterval(function(){
    f(6)
}, 1000)

延迟定时器

var timer = setTimeout(函数, 间隔) 延迟定时器
clearTimeout(timer) 清楚延迟定时器
用法与周期定时器相似。
可以递归调用 延迟定时器来模拟周期定时器

杂记

getAttarbute 获取属性
onmouseenter 鼠标进入
onmouseleave 鼠标离开
Math.round(r.value) 四舍五入
isNaN 判断是否是一个不是数的值
dir 获取元素
confirm 询问，返回bool
trim() 去掉字符串首尾的空格
substring 截取只能正数
slice 可以负数

例子

菜单下拉框

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="idx2.css">
    <script src="idx2.js" defer></script>
</head>
<body>
    <div class="menuBox">
        <ul class="menu">
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="">学校简介</a></li>
                    <li><a href="">学校章程</a></li>
                    <li><a href="">历任领导</a></li>
                    <li><a href="">现任领导</a></li>
                    <li><a href="">校园风光</a></li>
                </ul>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="">学校简介</a></li>
                    <li><a href="">学校章程</a></li>
                    <li><a href="">历任领导</a></li>
                    <li><a href="">现任领导</a></li>
                </ul>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="">学校简介</a></li>
                    <li><a href="">学校章程</a></li>
                </ul>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="">学校简介</a></li>
                    <li><a href="">学校章程</a></li>
                    <li><a href="">历任领导</a></li>


                </ul>
            </li>
            <li>
                <a href="#">学校概况</a>
                <ul>
                    <li><a href="">学校简介</a></li>
                    <li><a href="">学校章程</a></li>
                    <li><a href="">历任领导</a></li>
                    <li><a href="">现任领导</a></li>
                    <li><a href="">校园风光</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

css:

*{
    margin: 0;
    padding: 0;
    transition: height 1.5s;
}
.menuBox {
    display: flex;
    justify-content: center;
    background: #c44569;
}

.menu {
    width:1000px;
    justify-content: space-between;
    align-items: center;
    display: flex;

}
.menuBox .menu li{
    list-style-type: none;
    padding:10px;
}
.menuBox .menu li a{
    color:white;
    text-decoration: none;
}

.menuBox .menu>li ul li{
    background: #f3a683;
}
.menuBox .menu>li ul li:hover {
    background: #e17055;
}
.menuBox .menu>li ul {
    position:absolute;
    width:120px;
    left:-18px;
    top:40px;
    height: 0;
    overflow: hidden;
}
.menuBox .menu>li{
    position: relative;
    text-align: center;
   
}

.menuBox .menu>li>a {
    font-weight: 1000;
}

js:

var f_li_list = document.querySelectorAll(".menu>li")

for (var i = 0; i < f_li_list.length; i++) {
    f_li_list[i].onmouseenter = function() {
        if (this.querySelector("ul")) {
            var s_li_list = this.querySelectorAll(".menuBox .menu>li ul li")
            console.log(s_li_list)

            var h = 0
            // 计算高度总和
            for (var j = 0; j < s_li_list.length; j++) {
                h += s_li_list[j].clientHeight
            }
            
            this.querySelector("ul").style.height = h + 'px'
        }
    }
}

for (var i = 0; i < f_li_list.length; i++) {
    f_li_list[i].onmouseleave = function() {
        if (this.querySelector("ul")) {
            this.querySelector("ul").style.height = "0"
        }
    }
}

输入行列生成表格

比较简陋，主要是对js的练习。

在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="idx.js" defer></script>
    <style>
        .tab{

            border: 1px solid black;
        }
        .tab td{
            width: 80px;
            height: 60px;
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    行：<input type="text" class="row">
    列：<input type="text" class="col">
    <input type="button" value="提交" class="sbt">
    <table class="tab"></table>
</body>
</html>

js:

var r = document.querySelector(".row")
var c = document.querySelector(".col")
var sbt = document.querySelector(".sbt")

sbt.onclick = function() {

    var r_cnt = Math.round(r.value) // 获取行个数
    var c_cnt = Math.round(c.value)  // 获取列个数
    // console.log(r_cnt) 
    // console.log(c_cnt)

    
    // 不是整数退出  
    if (!Number.isInteger(r_cnt)){
        alert("行 输入的不是整数，请重新输入")
        return 
    }
    if (!Number.isInteger(c_cnt)){
        alert("列 输入的不是整数，请重新输入")
        return 
    }

    var tab = document.querySelector(".tab")
    // console.log(tab)

    var html = ""
    
    for (var i = 0; i < r_cnt; i++){ // 加行
        html += "<tr>"
        for (var j = 0; j < c_cnt; j++){ // 加列
            html +="<td>hello</td>"
        }
        html += "</tr>"
    }
    // console.log(html)
    tab.innerHTML = html // 添加
}

删除对应单元格

在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="idx.js" defer></script>
</head>
<body>
    行：<input type="text" class="row">
    列：<input type="text" class="col">
    <input type="button" value="提交" class="sbt">
    <table class="tab" cellpadding="40" border="1">
        <tr>
            <td>1, 1</td>
            <td>1, 2</td>
            <td>1, 3</td>
            <td>1, 4</td>
            <td>1, 5</td>
            <td>1, 6</td>
        </tr>
        <tr>
            <td>2, 1</td>
            <td>2, 2</td>
            <td>2, 3</td>
            <td>2, 4</td>
            <td>2, 5</td>
            <td>2, 6</td>
        </tr>
        <tr>
            <td>3, 1</td>
            <td>3, 2</td>
            <td>3, 3</td>
            <td>3, 4</td>
            <td>3, 5</td>
            <td>3, 6</td>
        </tr>
        <tr>
            <td>4, 1</td>
            <td>4, 2</td>
            <td>4, 3</td>
            <td>4, 4</td>
            <td>4, 5</td>
            <td>4, 6</td>
        </tr>
        <tr>
            <td>5, 1</td>
            <td>5, 2</td>
            <td>5, 3</td>
            <td>5, 4</td>
            <td>5, 5</td>
            <td>5, 6</td>
        </tr>
        <tr>
            <td>6, 1</td>
            <td>6, 2</td>
            <td>6, 3</td>
            <td>6, 4</td>
            <td>6, 5</td>
            <td>6, 6</td>
        </tr>
    </table>
</body>
</html>

js:

var r = document.querySelector(".row")
var c = document.querySelector(".col")
var sbt = document.querySelector(".sbt")

sbt.onclick = function() {

    var r_num = Math.round(r.value) // 获取行个数
    var c_num = Math.round(c.value)  // 获取列个数
    // console.log(r_num)
    // console.log(c_num)

    // 不是数退出  
    if (isNaN(r_num)){
        alert("行 输入的不是数字，请重新输入")
        return 
    }
    if (isNaN(c_num)){
        alert("列 输入的不是数字，请重新输入")
        return 
    }
    // 超过范围退出
    if (r_num > 6){
        alert("输入的 行 过大，请重新输入")
        return
    }
    if (c_num > 6){
        alert("输入的 列 过大，请重新输入")
        return
    }
    var tr_list = document.querySelectorAll(".tab tr")
    // console.log(tr_list)
    // console.log(tr_list[r_num - 1])

    var td_list = tr_list[r_num - 1].querySelectorAll(".tab tr td")
    // console.log(td_list)
    // console.log(td_list[c_num - 1])

    var empty = document.createElement("td")
    empty.innerHTML = "空"
    empty.style.border = "0"
    empty.style.textAlign = "center"
    // console.log(kk)

    tr_list[r_num - 1].replaceChild(empty, td_list[c_num - 1])
}

例子修改、添加、删除、标记大一统

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="idx.js" defer></script>
    <style>
        /* *{
            padding: 0;
            margin: 0;
        } */
        body{
            height: 100vh;
            display: flex;
            justify-content: center;

            background: #f1f2f6;
        }
        .box{
            width:600px;
            background: #f1f2f6;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box .title{
            margin: 10px;
            width:600px;
            display: flex;
        }
        .box .title .txt{
            width:300px;
            height: 30px;
            border: 1px solid #0984e3;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            flex-grow: 7;
        }
        .box .title .sbt{
            width: 100px;
            height: 34px;
            border: 1px solid #0984e3;
            border-top-right-radius: 5px;
            border-bottom-right-radius: 5px;
            flex-grow: 3;
            font-weight: bold;
            color:#0984e3;
            font-size: 16px;
            cursor: pointer;
        }
        tr td{
            padding:10px 30px;
            text-align: center;
        }
        .tab{
            width:600px;
            margin: 10px;
        }
        .tab tr:nth-child(1){
            background: #0984e3;
            color:white;
            font-weight: bold;
        }
        .tab tr td:nth-child(1){
            width:70%;
        }
        .tab>tr:nth-child(even){
            background: #dfe4ea;
        }
        .tab>tr:nth-child(odd){
            background: #ced6e0;
        }
        .tab tr td input{
            margin: 2px 8px;
            cursor: pointer;
            background: #0984e3;
            color:white;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="title">
            <input type="text" name="" id="" class="txt" value="">
            <input type="button" value="添加" class="sbt">
        </div>
        <table class="tab" border="1">
            <div class="head">
                <tr>
                    <td>内容</td>
                    <td>操作</td>
                </tr>
            </div>
        </table>
    </div>
</body>
</html>

js:

var sbt = document.querySelector(".sbt")
var tb = document.querySelector(".box .tab")
// console.log(sbt)

var flag = 0 // 记录是修改还是添加
var flag2 = 0 // 记录是否已经标记
var pre; // 记录需要修改的tr


sbt.onclick = function() {
    
    var txt = document.querySelector(".txt") // 获取框内的内容
    // console.log(txt.value)

    // 修改按钮
    if (flag == 1){
        var tt = pre.querySelector("td:nth-child(1)") // 需要改的地方
        // console.log(tt)
        tt.innerHTML=txt.value
        flag = 0
        sbt.value="添加"
        txt.value=""
        return
    }

    
    // 添加按钮
    var add_tr = document.createElement("tr")
    add_tr.innerHTML = '<td flag2="0">' + txt.value + '</td>' + '<td><input type="button" value="标记" class="sg"><input type="button" value="修改" class="mf"><input type="button" value="删除" class="dt"></input></td>'
    tb.appendChild(add_tr)

    var temp_value = txt.value
    txt.value = ""
    
    // 获取按钮
    var mf = add_tr.querySelector(".mf") // modify
    var dt = add_tr.querySelector(".dt") // delete
    var sg = add_tr.querySelector(".sg") // sign

    // 修改 
    mf.onclick = function() {
        // console.log(mf)
        pre = add_tr
        var sign_flag = pre.firstElementChild.getAttribute("flag2")
        // console.log(tr)

        if (sign_flag == 1){
            alert("已经标记，不能修改")
            return
        }
        var t = mf.parentElement.parentElement.parentElement.parentElement.querySelector(".title .txt")
        t.value = temp_value
        sbt.value="修改"
        flag = 1

    }

    // 删除
    dt.onclick = function() {
        var sign_flag = add_tr.firstElementChild.getAttribute("flag2")
        console.log(sign_flag)
        if (sign_flag == 0) {
            alert("未标记，不能删除")
            return
        }
        // console.log(dt)
        var t = dt.parentElement.parentElement.parentElement.removeChild(dt.parentElement.parentElement)
    }

    // 标记
    sg.onclick = function() {
        // console.log(sg)
        var t = dt.parentElement.parentElement.querySelector("td:nth-child(1)")
        if (t.style.textDecoration == "line-through"){
            t.style.textDecoration = ""
            t.setAttribute("flag2", 0)
        }else {
            t.style.textDecoration = "line-through"
            t.setAttribute("flag2", 1)
        }
        console.log(t) // 标记后
    }
}

定时器圆的旋转开始与停止

在这里插入图片描述

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="idx.js" defer></script>
    <style>
        body{
            width:100vh;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .rad {
            width:20vh;
            height: 20vh;
            background: linear-gradient(blue, pink,green);
            border-radius: 100%;
        }
        .ipt{
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="rad">

    </div>
    <div class="ipt">
        <input type="button" value="开始" class="start">
        <input type="button" value="停止" class="stop">
    </div>
</body>
</html>

js:

var start = document.querySelector(".start")
var stop = document.querySelector(".stop")
var rad = document.querySelector(".rad") // 圆

// console.log(start)
// console.log(stop)
// console.log(rad)

var d = 0;
function rot(){ // 旋转
    d += 1
    d %= 360
    // console.log(d)
    rad.style.transform = "rotate(" + d + "deg)"
}

var flag = 0
var tt
start.onclick = function() { // 开始
    if (tt){ // 防止多次
        clearInterval(tt)
    }
    tt = setInterval(rot, 10)
    flag = 1
}

stop.onclick = function() { // 停止
    clearInterval(tt)
    flag = 0
}

转账，渐变的金额

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="idx.js" defer></script>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        body{
            height: 100vh;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    </style>
</head>
<body>
    <div>
        <span class="mny">0</span><span>元</span>
    </div>
    <div>
        <input type="text" value="" class="ipt">
        <input type="button" value="转账" class="sbt">
    </div>
</body>
</html>

var ipt = document.querySelector(".ipt")
var sbt = document.querySelector(".sbt")
var mny = document.querySelector(".mny")

// console.log(ipt)
// console.log(sbt)

sbt.onclick = function() {
    var res_mny = parseInt(ipt.value) + parseInt(mny.innerHTML)

    var timer = setInterval(function(){
        mny.innerHTML = parseInt(mny.innerHTML) + 1
        if (parseInt(mny.innerHTML) == res_mny) clearInterval(timer)

    },10)
}

定时器滚动

在这里插入图片描述
动图有点大，不知道上传成功没有。

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box{
            height:600px;
            background-color: pink;
        }
        .main{
            width:1200px;
            height: 100%;
            background: blue;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }
        .img_box{
            position: absolute;
            width:100%;
            display: flex;
            justify-content: center;
            left:800px
        }
        .main .img_box img{
            width:1200px;
            height: 600px;
        }
    </style>
    <script src="idx.js" defer></script>
</head>
<body>
    <div class="box">
        <div class="main">
            <div class="img_box">
                <img src="img/1.jpg" alt="">
                <img src="img/2.jfif" alt="">
                <img src="img/3.jfif" alt="">
            </div>
        </div>
    </div>
</body>
</html>

js:

var img_box = document.querySelector(" .img_box")
console.log(img_box)


var i = 800;
setInterval(function(){
    img_box.style.left= i + "px"
    i--
    if (i < -800) i = 800
},5)