<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
div{
width:
60px;
height:
60px;
background:
red;
position:
absolute;
top:
0;
left:
0;
text-align:
center;
line-height:
60px;
color:
#fff;
}
</
style
>
<
script
>
window.
onload =
function(){
var
str =
"";
for(
var
i=
0;
i<
200;
i++){
str +=
'<input type = "button" value = "按钮" />';
}
document.
body.
innerHTML =
str;
// V字形
for(
var
i=
0;
i<
11;
i++){
document.
body.
innerHTML +=
"<div>"+
i+
"</div>";
}
var
adiv =
document.
getElementsByTagName(
"div");
for(
var
i=
0;
i<
6;
i++){
adiv[
i].
style.
left =
i*
60+
"px";
adiv[
i].
style.
top =
i*
60+
"px";
}
for(
var
i=
6;
i<
11;
i++){
adiv[
i].
style.
left =
i*
60+
"px";
adiv[
i].
style.
top = (
10-
i)*
60+
"px";
}
//逢10换行
for(
var
i=
0;
i<
20;
i++){
document.
body.
innerHTML +=
"<div>"+
i+
"</div>";
}
var
adiv =
document.
getElementsByTagName(
"div");
for(
var
i=
0;
i<
10;
i++){
adiv[
i].
style.
left =
10+
i*
70+
"px";
}
for(
var
i=
10;
i<
20;
i++){
adiv[
i].
style.
left =
10+(
i-
10)*
70+
"px";
adiv[
i].
style.
top =
70+
"px";
}
//for循环遍历2维数组、嵌套元素
var
oul =
document.
getElementById(
"list");
var
aul =
oul.
getElementsByTagName(
"ul");
for(
var
i=
0;
i<
aul.
length;
i++){
var
ali =
aul[
i].
getElementsByTagName(
"li");
for(
var
z=
0;
z<
ali.
length;
z++){
ali[
z].
style.
border =
"1px solid red";
}
}
//点击生成一组新闻
var
otext =
document.
getElementById(
"text");
var
obtn =
document.
getElementById(
"btn");
var
arr = [
"1. 如果您想学习 JavaScript，您可以学习本教程：了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。",
"2. 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程",
"3. JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。"
];
var
onoff =
true;
obtn.
onclick =
function(){
if(
onoff){
for(
var
i=
0;
i<
arr.
length;
i++){
otext.
innerHTML +=
"<li>"+
arr[
i]+
"</li>";
};
onoff =
false;
}
};
}
//jq方法点击生成一组新闻
$(
function(){
var
arr = [
"1. 如果您想学习 JavaScript，您可以学习本教程：了解 JavaScript 是如何与 HTML 和 CSS 一起工作的。",
"2. 如果在此之前您已经使用过 JavaScript，您也可以阅读本教程",
"3. JavaScript 一直在升级，所以我们需要时刻了解 JavaScript 的新技术。"
];
var
onoff =
true;
$(
"#btn").
click(
function(){
var
element=
"";
if(
onoff){
for(
var
i=
0;
i<
arr.
length;
i++){
element +=
"<li>"+
arr[
i]+
"</li>";
}
$(
"#text").
html (
element);
onoff =
false;
}
})
})
</
script
>
</
head
>
<
body
>
<
ul
id=
"list"
>
<
li
>
我的好友
<
ul
>
<
li
>张夏丽
</
li
>
<
li
>张丽
</
li
>
<
li
>夏丽
</
li
>
</
ul
>
</
li
>
<
li
>
我的坏友
<
ul
>
<
li
>孙丽
</
li
>
<
li
>赵龙
</
li
>
</
ul
>
</
li
>
</
ul
>
<
input
id=
"btn"
type=
"button"
value=
"自动生成5行"
/>
<
ul
id=
"text"
></
ul
>
</
body
>
</
html
>
转载请注明原文地址: https://www.6miu.com/read-82134.html
