本文目录一览：
请问如何使用原生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/n/280556.html
微信扫一扫 
支付宝扫一扫 