web前端之JS基础

本文详细介绍了JavaScript的基础知识,包括变量的声明与赋值、常量的使用、数据类型的判断与转换、运算符的应用、分支语句(if、switch)、循环结构(while、for)、数组操作、函数的定义与调用、参数传递、默认值、递归、以及字符串和对象的处理。此外,还涵盖了数组遍历、对象的增删改查和定时器的使用。
摘要由CSDN通过智能技术生成

web前端之JS基础

day-5

一、JS

1、js初级体验

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>js初体验</title>
</head>
<body>
  <button>点击我变成粉色</button>
  <script>
    let btn=document.querySelector('button')
    btn.addEventListener('click',()=>{
      btn.style.backgroundColor='pink'
    })
  </script>
</body>
</html>

在这里插入图片描述

2、js引入方式

(1)内部引入

<script>
   prompt('请输入您的年龄:')
</script>

(2)外部引入

在该文件外部准备以.js结尾的文件

<script src="(以.js结尾的文件名)"></script>

3、输入输出语句

(1)输入语句

prompt('请输入您的密码:')

(2)输出语句

a,打印到页面------->可以识别标签

document.write('你们真是小天才')
document.write('<strong>你们真是小天才</strong>')

b,输出到控制台

console.log('我现在要在控制台输出')

二、变量

1、变量

类似于盒子,是用于储存数据段容器,但数据本身不是变量

2、变量的声明方式

结构:let 变量名

let语句声明一个块级作用域的局部变量,并可以初始化为一个值(可选)。

注:let声明变量时不能重复声明,即同一个变量名只能声明一次。

例:let age

3、变量赋值

例:
age = prompt('请输入您的年龄:')    ----->让用户自己输入变量
age = 33                           ----->直接给变量赋值

4、变量的初始化

let uname = prompt('请输入您的用户名:')
console.log(uname)

5、同时定义多个变量(不建议)

let uname = 'zs',age =21     ------>同时定义uname和age
console.log(uname,age)

6、变量命名规范

(1)、有效符号构成(大小写字母、数字、下划线、$)

(2)、关键字、保留字不能用于变量命名

(3)、不以数字开头

(4)、尽量使用有意义的变量名

(5)、驼峰命名法 例:userName

7、let和var的区别

let :同一变量只能声明一次

var :同一变量可以声明多次

三、const常量

常量是块级范围的,非常类似用 let 语句定义的变量。但常量的值是无法(通过重新赋值)改变的,也不能被重新声明。

常量名大写(便于与变量作区分)

四、类型

1、数据类型

js是弱数据类型语言,只有赋值之后,才知道是什么数据类型。

例:
let uname=21
unme='wawa'
console.log(typeof(uname))

2、基本数据类型–数字类型

<script>
    let a = 21           ---->初始定义a
    let b = 33           ---->初始定义b
    console.log(a)       ---->在控制台输出a
    console.log(a+2)     ---->在控制台输出a+2
    console.log(a+b)     ---->在控制台输出a+b
    console.log(a-b)     ---->在控制台输出a-b
    console.log(a*b)     ---->在控制台输出a*b
    console.log(a/b)     ---->在控制台输出a/b
    console.log(a%2)     ---->在控制台输出a对2取余
</script>

3、字符串类型

let uname1='nishidashazhi'
console.log(typeof(uname1))   ----->typeof是查看该数据是什么数据类型

a、字符串拼接用+

let a = +prompt("请输入num1")
let b = +prompt("请输入num2")
console.log(a + b)

b 、alert 警示框

alert(a+b)         ----->直接在页面弹出警示框显示a+b的值

c、模板字符串

let uname = prompt("请输入名字:")
let age = prompt("请输入年龄:")

d、复合输出

document.write(`你叫${uname},今年${age}岁了`)      ---->同时在页面输出名字和年龄

4、布尔类型(< > ·····)

<script>
  console.log(3<5)
  console.log(typeof(3<5))
  console.log(undefined+1)   --->undefined  声明,未赋值
  console.log(null+1)   --->null:空(NaN = not a number)
</script>

五、显式转换

let c='200.456px'

1、整型输出

console.log(parseInt(c))

2、浮点型输出

  console.log(parseFloat(c))

六、运算符

1、赋值运算符

let a = 21               ---->给a赋值为21
a += 4    --->a = a + 4  在原来的值上加4
a *= 2    --->a = a * 2  在原来的值上乘2
a -= 3    --->a = a - 3  在原来的值上减3
a /= 2    --->a = a / 2  在原来的值上除2
a++   先赋值,在自增
++a   先自增,在赋值
a--   先赋值,在自减
--a   先自减,在赋值

2、比较运算符

>   <   >=   <=   ==    ====
==  (隐式转换)只比较数值,将字符串转换为数字类型后进行比较
===  既比较数字,也比较类型

3、逻辑运算符

&&--与    ||--或    !--非
&&--与:两真为真,一假则假
||--或:一真则真,全假则假

例:
<script>
    alert(4>3 && 3<5) 
    alert(4>3 || 3<5)
    alert(!true)
</script>

4、三元运算符

语法结构:判断条件 ? 条件成立时执行的语句 : 条件不成立时执行的语句

例:
age <= 18 ? alert('你不要乱跑') : alert('恭喜你,成年了')

七、分支语句

1、单分支语句

语法结构:if(条件){执行的代码}

例:
<!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>
  <script>
    let age=11
    if(age<18){
      document.write('你是未成年,不能乱跑')
    }
  </script>
</body>
</html>

在这里插入图片描述

2、双分支语句

语法结构:if(条件){执行的代码} else{执行的代码}

例:
<!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>
  <script>
    let age=+prompt('请输入您的年龄:')
    if(age<=18){
      alert('你是未成年,不要乱跑!')
    }
    else{
      alert('恭喜你,成年了。')
    }
  </script>
</body>
</html>

在这里插入图片描述

3、多分支语句

语法结构:

if(条件)
{
   执行的代码
}
else if(条件)
{
   执行的代码
}
else
{
   执行的代码
}
例:
  <script>
    let age = +prompt('请输入您的年龄:')
    if(age < 18)
    {
      alert('你是未成年,去学习吧')
    }
    else if(age <= 25)
    {
      alert('青春年华')
    }
    else
    {
      alert('好汉不提当年勇')
    }
  </script>

练习:

1、判断某一年份是否是闰年

<!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>
  <script>
    let year=prompt('请输入年份:')
    if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0){
      alert('该年份是闰年')
    }
    else{
      alert('该年份是平年')
    }
  </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

2、求最大值

<!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>
  <script>
    let a = +prompt('请输入num1:')
    let b = +prompt('请输入num2:')
    a>b ? alert(`最大值是:${a}`) : alert(`最大值是:${b}`) 
  </script>
</body>
</html>

在这里插入图片描述

3、数字补零

<!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>
  <script>
    let a = prompt('请输入一个num:')
    a >= 10 ? alert(a) : alert(0 + a)
  </script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

八、Switch语句

一个 switch 语句首先会计算其 expression。然后,它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句(使用 严格运算符 (en-US),===)并将控制权转给该子句,执行相关语句。(如果多个 case 与提供的值匹配,则选择匹配的第一个 case,即使这些 case 彼此间并不相等。)

如果没有 case 子句相匹配,程序则会寻找那个可选的 default 子句,如果找到了,将控制权交给它,执行相关语句。若没有 default 子句,程序将继续执行直到 switch 结束。按照惯例,default 子句是最后一个子句,不过也不需要这样做。

可选的 break语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若 break 被省略,程序会继续执行 switch 语句中的下一条语句。

例:
let num = +prompt('请输入今天星期几了:')
    switch(num){
      case 1:
        alert('今天星期一')
        break;
      case 2:
        alert('今天星期二')
        break;
      case 3:
        alert('今天星期三')
        break;
      case 4:
        alert('今天星期四')
        break;
      case 5:
        alert('今天星期五')
        break;
      case 6:
        alert('今天星期六,可以休息咯')
        break;
      case 7:
        alert('今天星期天,今天继续休息哦')
        break;
      default:
        alert('你是外星人吗?一周只有七天都不知道。')
        break;
    }

九、While循环

while 语句可以在某个条件表达式为真的前提下,循环执行指定的一段代码,直到那个表达式不为真时结束循环。

语法结构:while(条件){ 执行的代码 }

注:while一定要有终止条件

例:计算1~100的累加和
let i = 0;
let sum = 0;
while(i < 101){
   sum += i;
   i++;
};
alert(sum);

十、for循环

for 语句用于创建一个循环,它包含了三个可选的表达式,这三个表达式被包围在圆括号之中,使用分号分隔,后跟一个用于在循环中执行的语句(通常是一个块语句)。

语法结构:for( ){ 执行的代码 }

例:
<script>
    for(let i = 1;i <= 10;i++){
      console.log('你真是个大聪明!')
    }
</script>

十一、循环嵌套

语法结构:

for(条件){
   for(条件){
     执行的代码;
   }
     执行的代码;
}
例:打印九九乘法表
<!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>
    span{
      display: inline-block;
      margin: 15px;
    }
  </style>
</head>
<body>
  <script>
    for(let i = 1;i < 10;i++){
      for(let j = 1;j <= i;j++){
        document.write(`<span>${j}*${i}=${j*i}</span>`);
      }
      document.write(`</br>`);
    }
  </script>
</body>
</html>

十二、continue、break

1、continue —>跳出当前循环

continue 声明终止当前循环或标记循环的当前迭代中的语句执行,并在下一次迭代时继续执行循环。

continue 语句可以包含一个可选的标号以控制程序跳转到指定循环的下一次迭代,而非当前循环。此时要求 continue 语句在对应的循环内部。

2、break —>跳出所有循环

break语句包含一个可选的标签,可允许程序摆脱一个被标记的语句。break语句需要内嵌在引用的标签中。被标记的语句可以是任何 语句;不一定是循环语句。

break 语句不能在 function 函数体中直接使用,break 语句应嵌套在要中断的当前循环、switch 或 label 语句中。

十三、循环加强

1、for in

for...in 语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。

for(let i in arr){
  console.log(arr[i]);
}

2、for of

for…of语句可迭代对象(包括 array,map,set,string,typedarray,arguments对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

for(let k of arr){
      console.log(k);
}

十四、数组

1、数组----有序的数据序列

(1)数组的声明方式:

let arr = ['dfg','rty','efv','xcvbbn','tgsuan',124,true]
   下标      0     1      2      3        4     5    6
查找输出目标:arr[索引下标]
例:alert(arr[5])

(2)构造函数

let arr = new Array()

(3)数字遍历

for(let i in arr){
  console.log(arr[i]);
 }

(4)数组的操作

a,通过索引下标给对应元素重新赋值

arr[1] = 'xian'
console.log(arr);

b,instanceof 判断类型

console.log(arr instanceof Array);

c,concat 合并数组

let arr2 = [1,2,3,4]
arr3 = arr.concat(arr2)
console.log(arr3);

(5)数组的常规操作

a,增

1、push -->在数组末尾添加
例:arr.push('苏苏')
2、unshift -->在数组首部添加
例:arr.unshift('susu')

b,删

1、shift  -->在数组首部删除
例:arr.shift()
2、pop  -->在数组尾部删除
例:arr.pop()
3、多数同时删除:    
splice(删除的起始位置,删除的个数)  
例:arr.splice(3,1)
4、在删除后添加某一元素:
splice(删除的起始位置,删除的个数,要添加的元素)  
例:arr.splice(3,1,susu)

c,拓展

1、输出时元素之间用什么连接
例:console.log(arr.join(`**`))
2、将数组元素反过来排列
例:console.log(arr.reverse())
3、截取数组的长度
例:console.log(arr.slice(3));

2、二维数组

<script>
    let student = [['jiangjia',23,'sing'],['susu',18,'dance']]
    for(let i in student){
      for(let j in student[j]){
        console.log(student[i][j]);
      }
    }
  </script>

student.length —>获取数组长度的

day-6

一、JS函数

1、函数

一般来说,一个函数是可以通过外部代码调用的一个“子程序”(或在递归的情况下由内部函数调用)。像程序本身一样,一个函数由称为函数体的一系列语句组成。值可以传递给一个函数,函数将返回一个值。在 JavaScript 中,函数是头等 (first-class)对象,因为它们可以像任何其他对象一样具有属性和方法。它们与其他对象的区别在于函数可以被调用。简而言之,它们是Function对象。

2、函数的调用

函数必须进行调用,才会执行。调用函数时,传递给函数的值被称为函数的实参(值传递),对应位置的函数参数名叫作形参。如果实参是一个包含原始值 (数字,字符串,布尔值) 的变量,则就算函数在内部改变了对应形参的值,返回后,该实参变量的值也不会改变。如果实参是一个对象引用,则对应形参会和该实参指向同一个对象

3、函数要有返回值,一定要添加return关键字,否则返回值为undefined。

例:
function getSum(){
  console.log(arguments);
  let sum = 0;
  console.log(age);
  for(let i in arguments){
      sum += arguments[i];
   }
   return sum;
}

4、arguments对象–是一个对应于传递给函数的参数的类数组对象。

接收所有实参,并保存到arguments数组里。

arguments对象是所有(非箭头)函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数,第一个参数在索引 0 处。

5、匿名函数

<!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>
  <script>
    function sayHi(fn){
      fn()
      console.log('nihao');
    }
    setInterval(function(){
      console.log('你真傻');
    },1000)
  </script>
</body>
</html>

6、函数表达式

声明:
let a = function(){
   console.log('jiangjia');
}
调用:
a()
立即执行函数:
(function(){console.log('susu');})()

7、箭头函数

setInterval(function(){
   console.log('i love you');
},1000)
上述函数也可如下表达:(用箭头=>)
setInterval(() => {
   console.log('i love you')
},1000)

二、传递

1、值传递

是指在调用函数时将实际参数复制一份传递到函数中,这样在函数中如果对参数进行修改,将不会影响到实际参数。

let a = 10;
let b = 20;
function change(x,y){
   x = 30;
   y = 50;
}
change(a,b);
alert(a + "--" + b);

2、引用传递—传递地址,发生改变

是指在调用函数时将实际参数的地址传递到函数中,那么在函数中对参数所进行的修改,将影响到实际参数。

let arr = [1,3,4,5];
  function change2(a){
  a.push(1000);
}
change2(arr);
alert(arr);

三、默认值参数

function getCir(r,PI = 3.14){     ----->这里的PI就是默认参数
   return PI*r*r;
}
let a = getCir(3);
console.log(a);

四、递归

浏览器的递归是有限制的,数字量不能太大。

n! ---->n的阶乘
function jiecheng(n){
   if(n === 1){
   	 return 1;
   }
   else{
     return n*jiecheng(n - 1);
   }
}
let a = jiecheng(9);
alert(a);

练习:递归求1-n的和

function sum(n){
 if(n <= 1){
   return 1;
  }else{
   return n + sum(n - 1);
  }
};
let b = sum(100);
alert(b);

五、数组遍历

<!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>
  <script>
    let arr = [1,2,3,4,5,6,7,8,9]
    for(let i = 0;i < arr.length;i++){
      console.log(arr[i]);
    }
    arr.forEach(function(e){
      console.log(e);
    })
  </script>
</body>
</html>

在这里插入图片描述

六、字符串的常见方法

<script>
    let str = new String()
    let str = '你是who?'
    console.log(str.split('w'));
    console.log(str.substring(2,4));
    console.log(str.startsWith('你'));
    console.log(str.endsWith('你'));
    console.log(str.includes('w'));
  </script>

split:split() 方法接受一个模式,通过搜索模式将字符串分割成一个有序的子串列表,将这些子串放入一个数组,并返回该数组。

substring:substring() 方法返回一个字符串在开始索引到结束索引之间的一个子集,或从开始索引直到字符串的末尾的一个子集。

startsWith:startsWith() 方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回 truefalse

endsWith:endsWith() 方法用于判断一个字符串是否以指定字符串结尾,如果是则返回 true,否则返回 false

includes:includes() 方法执行区分大小写的搜索,以确定是否可以在一个字符串中找到另一个字符串,并根据情况返回 truefalse

七、对象

1、定义:对象是无序的数据集合

例:
<!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>
  <script>
    //对象:无序的数据集合
    let obj = {
      uname:'zhangfei',
      age:21,
      gender:'nan'
    };
    console.log(obj);
  </script>
</body>
</html>

在这里插入图片描述

2、对象的增删改查

let obj = {
  uname:'zhangfei',
  age:21,
  gender:'nan'
};

(1)对象的增加

语法结构:对象.新属性名

obj.sing = function(){
  console.log('sing~~');
};

(2)对象的删除

语法结构:delete 对象.属性名

delete obj.gender;

(3)对象的改

语法结构:对象.属性名

obj.uname = 'GGBond';

(4)对象的查找(两种方式)

1、obj.uname;     对象名.属性名
2、obj['age'];    对象名.['属性名']

3、对象的遍历

<!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>
  <script>
    let obj = {
      uname:'zhangfei',
      age:21,
      gender:'nan'
    };
    for (let k in obj){
      console.log(typeof(k));
      console.log(obj[k]);
    }
  </script>
</body>
</html>

在这里插入图片描述

4、数组对象

<!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>
  <script>
    let arrobj = [
      {
      uname:'zhangsan',
      age:22
      },
      {
      uname:'wangwu',
      age:18
      },
      {
        uname:'xiaohong',
        age:16
      }
    ]
    console.log(arrobj);
    for(let i = 0;i < arrobj.length;i++){
      for(let k in arrobj[i]){
        console.log(arrobj[i][k]);
      }
    }
  </script>
</body>
</html>

在这里插入图片描述

5、Math内置对象

(1)Math.ceil向上取整

console.log(Math.ceil(3.1415926));

(2)Math.floor 向下取整

console.log(Math.floor(3.1415926));

(3)Math.abs 取绝对值

console.log(Math.abs(-3.12));

(4)Math.pow 求幂次方

console.log(Math.pow(3.12,10));

(5)Math.sqrt 开平方

console.log(Math.sqrt(9));

(6)Math. 随机数(默认0~1)

console.log(Math.floor(Math.random()*10)+2);

6、日期内置对象

(1)获取年份

let year = date.getFullYear();

(2)获取月份

let month = date.getMonth()+1;

(3)获取日期

let day = date.getDate();

(4)获取时

let hh = date.getHours();

(5)获取分

let mm = date.getMinutes();

(6)获取秒

let ss = date.getSeconds();

(7)toFixed() 保留几位小数点,会进一位

let a = 3.123456
alert(a.toFixed(4))

练习:

<!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>
  <script>
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth()+1;
    let day = date.getDate();
    let hh = date.getHours();
    let mm = date.getMinutes();
    let ss = date.getSeconds();
    document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`);
  </script>
</body>
</html>

八、元素

1、获取元素的方法

前提设置:
<div>盒子</div>
  <ul>
    <li>1</li>
    <li class="two">2</li>
    <li>3</li>
    <li id="four">4</li>
</ul>

(1)通过css选择器获取(推荐)

const li2 = document.querySelector('.two');
                     ----->括号里('.字符串')

(2)document.querySelector 只会显示找到的第一个

const li = document.querySelector('li');

(3)document.querySelectorAll 将所有匹配的元素全部获取到,并存放到伪数组

const lis = document.querySelectorAll('li');       ----->lis就是伪数组
console.log(lis);

(4)其他

a、getElementsByTagName

返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection。整个文件结构都会被搜索,包括根节点。返回的 HTML 集合是动态的,意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()

例:console.log(document.getElementsByTagName('div'));

b、getElementById

返回一个匹配特定ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法。

例:console.log(document.getElementById('four'));

c、getElementsByClassName

返回一个包含了所有指定类名的子元素的类数组对象。当在 document 对象上调用时,会搜索整个 DOM 文档,包含根节点。你也可以在任意元素上调用**getElementsByClassName()**方法,它将返回的是以当前元素为根节点,所有指定类名的子元素。

例:
console.log(document.getElementsByClassName('two'));

2、修改元素的内容

前提设置:
<div class="one">我是一个即将被更改的盒子</div>
<div class="two">我是一个即将被更改的盒子</div>

(1)获取元素

const box1 = document.querySelector('.one');
const box2 = document.querySelector('.two');
console.log(box1);
console.log(box2);

(2)更改内容

box1.innerText = 'jiangjiang';
box2.innerHTML = `<h1>xiaohong<h1>`;
注:` `  :可以识别标签

3、修改元素属性

前提设置:
<img src="./image/1.jpg" alt="wuwu" title="哇呜"></br>
<input type="text" placeholder="wedjed" readonly>
<button disabled>同意该协议</button>

(1)获取元素

const img = document.querySelector('img')
const ipt = document.querySelector('input')

(2)改元素属性

img.src ="./image/2.jpg"
img.title = "美女"
ipt.type = "passwd"
ipt.placeholder = "请输入用户名:"
ipt.readOnly = false
btn.disabled = false

4、修改元素样式

前提设置:
<style>
    div.box1{
      width: 300px;
      height: 300px;
      background-color: rgb(255, 0, 43);
      font-size: 50px;
    }
</style>
 <div class="box1">11111</div>
 <div class="box2"></div>

(1)获取元素

const div = document.querySelector('.box1')
const box2 = document.querySelector('.box2')

(2)修改样式

div.style.width = '400px'
div.style.height = '400px'
div.style.fontSize = '16px'
div.style.backgroundColor = 'pink'

(3)通过js添加类名------className 会将原来的类名删除掉,不建议使用

box2.className = 'box1'

(4)补充

classList.add('类名')---->追加类
box2.classList.add('box1')
box2.classList.remove('box1')  ---->移除类
box2.classList.toggle('box1') ---->切换类:有则删除,没有则添加

九、定时器

1、setTimeout:某段代码或者函数在多久后执行

全局的 setTimeout() 方法设置一个定时器,该定时器在定时器到期后执行一个函数或指定的一段代码。

语法结构:setTimeout(函数或一段代码,延迟时间,实参……)

etTimeout(code||function,time(ms))
返回值是一个整数,代表定时器编码

例:
let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
console.log(timer)
let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)
console.log(timer2)

传递函数名

例:
let timer3 = setTimeout(fn, 3000)
function fn() {
    console.log('6666666')
}

拓展:定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境。

例:setTimeout(function () { obj.sum() }, 1000)

2、setInterval :间隔一段时间,将代码或者函数执行一次

WindowWorker接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段,在每次调用之间具有固定的时间间隔。

它返回一个interval ID,该 ID 唯一地标识时间间隔,因此你可以稍后通过调用 **clearInterval()**来移除定时器。

例:
let timer = setInterval(' console.log(\'6666666\')', 1000)
clearInterval(timer)
let timer2 = setInterval(function (a, b) {
    console.log(a + b)
}, 1000, 2, 3)
clearInterval(timer2)
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值