本文目錄一覽：
請問如何使用原生JS實現以下功能，以及他的思路是如何的
這個簡單，使用for循環就可以了。
!DOCTYPE html
html
head
meta charset=”utf-8″/
titletest/title
/head
body
div id=”box”00/div
script type=”text/javascript”
function liang(n){
var s = 1;
for(var i = 1; i = n; i++){
s *= i;
console.log(‘s==’, s);
}
return s;
}
var a = liang(6);
document.getElementById(‘box’).innerHTML = a;
/script
/body
/html
還有一個方法也可以：
function hermit(num){
if(num == 1 || num === 0){
return 1;
}else{
return (num * hermit(num -1));
}
}
var a = hermit(6);
document.getElementById(‘box’).innerHTML = a;
原生js操作DOM元素的一些使用
方法一：
使用DOM.setAttribute(“class”,”類名”)
方法二：
DOM.classList.add(“類名”)
方法一給DOM元素添加類名會覆蓋原有的類名
方法二 可以給DOM元素添加一個類名後 還可以在繼續給DOM元素添加新的類名 並且不會覆蓋已有的類名
概念：把要添加的節點添加到指定父級裏面的最後面，所以也叫追加。
使用方式：fatherdom.appendChild( insertdom )。
兼容性：所有瀏覽器都支持此方法。
概念：把要插入的節點添加到指定父級裏面的指定節點之前。
使用方式：fatherdom.insertBefore( insertdom，chosendom )。
兼容性：所有瀏覽器都支持此方法，但是值得注意的是，如果第二個參數節點不存在，在IE和Safari下會把要添加的節點使用appendChild()方法追加到指定父級中，而其他主流瀏覽器（Firefox、Chrome、Opera等）下會報錯，所以在插入節點的時候，需要先判斷第二個參數節點是否存在
效果
注意：很多人都認為設置disabled=”true”是為啟用，設置為「false」時為禁用，這是錯的。
使用原生JS操作網頁的幾個例子
原生js操作網頁
emmm
添加網頁元素
移除網頁元素
代碼
!DOCTYPE html
html lang=”en”
head
meta charset=”UTF-8″
titleTitle/title
/head
style
div{
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
}
/style
body
divdiv1/div
divdiv2/div
script
var div = document.createElement(“div”);
div.innerText = “這是使用js添加的元素”;
//添加一個div元素
document.body.appendChild(div);
alert(“3秒後移除div1”);
//移除html元素
setTimeout(function () {
var divList = document.getElementsByTagName(“div”);
divList[0].remove();
},3000);
/script
/body
/html
這兩個很基礎，其實所有其他js庫（jquery之類的）能做的事情原生js都能做。
如何用原生js編寫動列表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
html
head
titleJs動態生成表格/title
style type=”text/css”
table{font-size:14px;}
/style
/head
body
script language=”javascript”
function tableclick(name1,name2,name3){
Trow=name1.value;
Tcol=name2.value;
Tv=name3.value;
if ((Trow==””) || (Tcol==””) || (Tv==””)){
alert(“請將製作表格的條件填寫完整”);
}
else{
r=parseInt(Trow);
c=parseInt(Tcol);
Table1(r,c,Tv);
}
}
function tablevalue(a,ai,rows,col,str){
int1=a.length;
for (i=0;irows;++i){
for (j=0;jcol;++j){
if ((j==0)(ai=int1)){break;}
if (ai=int1){
str=str+”td scope=’col’ /td”;
}
else{
if (j==0){
str=str+”trth scope=’col’ “+(a[ai++])+”/th”;
}
else{
if (j==col-1){
str=str+”td scope=’col’ “+(a[ai++])+”/td”;
}
else{
str=str+”td scope=’col’ “+(a[ai++])+”/td”;
}
}
}
}
str=str+”/tr”;
}
return str;
}
function Table1(row,col,Str1){
var str=””;
a=new Array();
s=new String(Str1);
a=s.split(“#”);
int1=a.length;
ai=0;
if (col=int1){
str=str+”table width=’300′ border=’4′”;
for (i=0;icol;++i){
if (i==0){
str=str+”trth scope=’col’ “+(a[ai++])+”/th”;
}
else{
if (i==(col-1)){
str=str+”th scope=’col’ “+(a[ai++])+”/th/tr”;
}
else{
str=str+”th scope=’col’ “+(a[ai++])+”/th”;
}
}
}
if (int1col){
if (row1){
str=tablevalue(a,ai,row-1,col,str);
}
}
str=str+ “/table”;
aa.innerHTML=str;
}
}
/script
form name=”form1″ method=”post” action=””
pb行數：/b
input name=”name1″ type=”text” style=”width:40px” value=”4″
b列數：/b
input name=”name2″ type=”text” style=”width:40px” value=”4″
input type=”button” name=”Submit3″ value=”生成表格”
onClick=”tableclick(document.form1.name1,document.form1.name2,document.form1.name3)”/p
pb align=”top”表值：/b/p
p
input name=”name3″ wrap=”VIRTUAL” style=”width:520px ”
value=”COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3″
/p
/form
div id=”aa”/div
/body
/html
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/280556.html
微信掃一掃 
支付寶掃一掃 