原生JS实例整理

JS能做什么

1，js改变html内容

<p id='prog'>改变文本</p>
<button type='button' onclick="document.getElementById('prog').innerHTML='js可以改变html内容'">按钮</button>

2，js改变html属性

<input id='prog1' type="text" value='old' />
		<button type='button' onclick=" document.getElementById('prog1').value = 'new'">按钮</button>

3，js改变css样式

<p id='prog1'>改变属性</p>
<button type='button' onclick=" document.getElementById('prog1').style.color = 'red'">按钮</button>

4，js显示和隐藏元素

<button type='button' onclick=" document.getElementById('prog3').style.display = 'none'">隐藏</button>
<p id='prog3'>隐藏和显示html元素</p>
<button type='button' onclick=" document.getElementById('prog3').style.display = 'block'">显示</button>

5，js更改本身

<button onclick="this.innerHTML=Date()">时间是？</button>

6，js调用函数

<button onclick="displayDate()">时间是？</button>
<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>

7，\ 用来给字符串换行

<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello \
Kitty";
</script>

8，js浮点运算不是100%精确

<p id="demo1"></p>
<script>
var x = 0.2 + 0.1; //结果为： 0.30000000000000004
document.getElementById("demo1").innerHTML = "0.2 + 0.1 = " + x;
</script>

9，让浮点运算精确的方法（乘10再除10）

<p id="demo3"></p>
<p id="demo4"></p>
<script>
var x = 0.2 + 0.1;
document.getElementById("demo3").innerHTML = "0.2 + 0.1 = " + x;
var y = (0.2*10 + 0.1*10) / 10;
document.getElementById("demo4").innerHTML = "0.2 + 0.1 = " + y;
</script>

10，js做乘法除法减法时会将字符串转数字，加法不会

"100" * "10" // 1000
"100" / "10" // 10
"100" - "10" // 90
"100" + "10" // 10010

11，非数字的字符串经过减，乘，除，会变为NaN

"100" * "big" // NaN
"100" / "big" // NaN
"100" - "big" // NaN
"100" + "big" // 100big

12，被0除会生成Infinity

var x = 2/0; // Infinity
var y = -2/0; // -Infinity

13，数字的toString()方法可以返回不同进制的数字字符串（取决参数）

var num = 99;
num.toString(10);  // 99
num.toString(16);  // 63
num.toString(8);  // 143
num.toString(2);  // 1100011

14，数字可以是对象，但是不要这么做，因为new一个对象的成本更高，而且比较时会出现问题

var x = 500;        // x 是数字
var y = new Number(500);  // y 是对象
var z = new Number(500);  // z 是对象
x == y; // true
x === y; // false
x == x // true
x === x // true
y == y;  // true
y === y; // true
y == z; // false
y === z; // false

**15，数字强转 **

  Number(true); // 1
  Number(false); // 0
  Number("10"); // 10
  Number("  10"); // 10
  Number("10  "); // 10
  Number(" 10  "); // 10
  Number("10.33"); // 10.33
  Number("10,33"); // NaN
  Number("10 33"); // NaN
  Number("John"); // NaN
  
  parseInt("10"); // 10
  parseInt("10.33"); // 10
  parseInt("10 6"); // 10
  parseInt("10 years"); //  10
  parseInt("years 10"); // NaN

16，js数学 Math模块

Math.PI  // 3.141592653589793
Math.round(4.4); // 四舍五入取整 4
Math.pow(8,2); // 幂 64    8**2 = 64
Math.abs(-4.4); // 绝对值 4.4
Math.ceil(4.4); // 向上取整 5
Math.floor(4.7); // 向下取整 4
Math.max(0, 150, 30, 20, -8, -200); // 返回参数列表的最大值，150 是参数列表，传个数组无效
Math.min(0, 150, 30, 20, -8, -200); // 返回参数列表的最小值 -200

17，js随机数

Math.random(); // [0,1) 小数
Math.floor(Math.random() * 10); // [0,9] 整数
Math.floor(Math.random() * 10) + 1; // [1,10] 整数

18，js日期

Date(); // Sun Mar 29 2020 21:12:09 GMT+0800 (中国标准时间)
var d = new Date();
d.getFullYear(); // 2020
d.getTime(); // 1585487590776
d.setFullYear(2020); // 设置年份
d.getDay(); // 周名作为数字返回 0-6

20，js通过索引向数组末尾添加元素(非push)

var lst = [1，2，3，4，5，6];
lst[lst.length] = 7; // 1，2，3，4，5，6，7

21，高索引的元素可以在数组中创建未定义的“孔”

var lst = [1，2，3，4，5，6]; //数字长只有 5
lst[8] = 9; // 1，2，3，4，5，6，undefined，undefined，9