1. 同步和异步
<script>
// 同步:当上一次任务完成之后 才继续完成下面的任务
console.log("123");
console.log("456");
console.log("789");
// 异步:多次任务,同时进行
</script>
2. 定时器
2.1 setTimeout()
-
setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。
<script> // setTimeout 经过指定时间执行function中的代码 // 第一个参数是回调函数 // 第二个参数是一个毫秒数 setTimeout(function () { // 5秒钟之后执行该代码 console.log(123); }, 5000); </script>
2.2 setInterval()
-
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
<script> // setInterval 每隔一段时间执行某个操作 setInterval(function () { // 每隔2秒钟执行一次该代码 console.log(123); }, 2000); </script>
2.3 clearInterval()
-
显示当前时间 ( setInterval() 函数会每秒执行一次函数,类似手表)。使用 clearInterval() 来停止执行。
<script> // 清除计时器 var i = 0; var timer = setInterval(function () { i++; console.log(i); if (i >= 10) { // 清除计时器 clearInterval(timer); } }, 2000); </script>
3. 通过 JS 创建元素
<script>
// 创建img
var img = document.createElement("img");
img.src = "./img/1.jpg";
// 给创建的元素添加属性
// 相当于 <img id="image" />
img.setAttribute("id", "image");
// 相当于 <img class="a" />
// img.setAttribute('class','a')
// 只有该元素固有的属性 才可以进行属性添加 其他的只能使用setAttribute
img.className = "a";
// 将img放到body中
document.body.appendChild(img);
// 创建文本节点
var text = document.createTextNode("hello world");
document.body.appendChild(text);
</script>
4. 将创建的元素放在容器中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box {
width: 500px;
height: 500px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var box = document.getElementById("box");
for (var i = 0; i < 10; i++) {
var p = document.createElement("p");
var text = document.createTextNode("hello world");
p.appendChild(text);
box.appendChild(p);
}
</script>
</html>