【JS提升】标签的属性与特性、Math方法

一、标签的属性与特性

（1）属性与特性的区别

<input type="text" id="username" value="张三" data="zhangsan">

标签本身就有的属性就叫做特性，自定义的属性就是非特性

var oInput = document.getElementById('username');
console.log(oInput.type); // text
console.log(oInput.id); //  username
console.log(oInput.value); // 张三
console.log(oInput.data); // undefined 

oInput.type = 'password'
oInput.value = '李四';

点语法无法访问、修改、增加非特性，而特性是可以的

dom对象和标签有着映射关系，所以通过dom对象的点能访问到标签里面的属性

（2）修改、增加、访问非特性

setAttribute既可修改非特性，又可修改特性

 // 修改非特性
oInput.setAttribute('data', 'lisi');
console.log(oInput.getAttribute('data'));
// 修改特性
oInput.setAttribute('type', 'password');

二、Math方法

（1）随机数

Math.random(); 随机取[0, 1)

示例1：取区间的随机数

// [10 40) -> 40 - 10 = 30 -> 30 * Math.random()[0, 1) -> 10 + [0, 30)
console.log(10 + (40 - 10) * Math.random());

示例2：抽奖

// 0-100  100 * Math.random();
var x = 100 * Math.random();
if (x <= 1) {
    console.log('一等奖');
} else if (x <= 3) {
    console.log('二等奖');
} else if (x <= 5) {
    console.log('三等奖');
} else {
    console.log('感谢您的参与');
}