01、奇葩for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奇葩for循环</title>
</head>
<body>
</body>
</html>
<script>
/*
*/
// 正常 for循环的写法
for(let i=0;i<10;i++){
console.log(i);
}
// 没有初始值
let k = 0;
for(;k<10;k++){
console.log(k);
}
// 没有初始值和判断是否满足循环条件
// 如果 for 循环中没有判断条件,那么他的判断条件在循环内部,并且需要开发者手动书写跳出循环的操作,因为不会主动跳出循环
let m = 0;
for(;;m++){
// code
if(m<10){
console.log(m);
}else{
break;
}
}
// 没有初始值,没有判断条件,没有递增
let n = 0;
for(;;){
if(n<10){
console.log(n);
n++; //递增
}else{
break;
}
}
</script>
02、文档流写入和元素写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档流写入和元素写入</title>
<style>
* {
margin: 0;
padding: 0;
}
.cell {
width: 50px;
height: 50px;
background: #04be02;
margin: 20px;
}
.wp{
width: 200px;
height: 200px;
background: #f60;
margin: 30px 10px;
}
</style>
</head>
<body>
<div class="wp" id="aa"></div>
<div class="wp" id="bb">
<h1>中午吃啥</h1>
<h2>米饭</h2>
<h2>面条</h2>
</div>
</body>
</html>
<script>
/*
把元素直接写入文档流 使用
document.write(str)
1. 会把内容渲染到body
2. str 可以是标签,也可以是本文内容
3. 后面写入的东西不会覆盖前面写入的内容
*/
document.write('<h1>秦琼</h1>')
document.write('<h1>秦琼</h1>')
document.write('<h1>秦桧</h1>')
document.write('<div class="cell"></div><div class="cell"></div><div class="cell"></div>')
/*
innerHTML
他是dom元素的一个属性,可以通过 innerHTML 设置和获取元素的内容
特点:
1.后写入的内容会覆盖之前写入的内容
2.可以写入标签,也可以写入文本
设置内容
dom.innerHTML = '内容' 如果内容是html结构,可以被渲染成html
获取内特
dom.innerHTML 获取到了dom元素中的html结构
innerText 他是dom元素的一个属性,可以通过 innerText 设置和获取元素的文本内容
特点:
1. 后面写入的内容会覆盖前面写入的内容
2. 设置的时候如若是html结构,html结构不会被渲染,会原样写入
和 dom.innerHTML 一样也可以设置和获取内容
注意 获取的结果 会 过滤掉标签名,只会显示文本内容
*/
let aa = document.getElementById('aa')
aa.innerHTML += '铁木真';
aa.innerHTML += ' 术赤';
aa.innerHTML += ' <h1>察合台</h1>';
console.log(bb.innerHTML);
console.log(bb.innerText);
bb.innerText = '<h1>周末吃顿好的</h1>';
bb.innerText = '<h1>周末吃顿红烧大肠</h1>';
</script>
03、元素中的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环嵌套</title>
<style>
* {
margin: 0;
padding: 0;
}
.wp {
margin: 10px;
width:40px;
height:40px;
border-radius:50%;
background:rgb(172, 0, 164);
display: inline-block;
}
table{
margin: 20px;
}
</style>
</head>
<body>
</body>
</html>
<script>
/*
循环嵌套
*/
// 外层控制的是行
for(let i=0;i<=10;i++){
// 内层控制的是列
for(let k=0;k<=i;k++){
document.write(k);
}
document.write('<br/>');
}
// 双重for循环绘制
for(let d=0;d<5;d++){
for(let h=0;h<5;h++){
document.write('<div class="wp"></div>')
}
document.write('<br/>');
}
for(let d=0;d<6;d++){
for(let h=0;h<d;h++){
document.write('<div class="wp"></div>')
}
document.write('<br/>');
}
document.write('<div class="wp2">');
document.write('<span>袁洪</span>');
document.write('</div>');
// 创建表格
document.write('<table border=1 width="600">');
for(let i=0;i<10;i++){
document.write('<tr>');
for(let j=0;j<10;j++){
document.write('<td>'+j+'</td>');
}
document.write('</tr>');
}
document.write('</table>');
//九九乘法表
document.write('<table border=1 width="600">');
for(let i=1;i<=9;i++){
document.write('<tr>');
for(let j=1;j<=9;j++){
if(j<=i){
document.write('<td>'+j+'x'+i+'='+(j*i)+'</td>');
}else{
document.write('<td></td>');
}
}
document.write('</tr>');
}
document.write('</table>');
</script>
04、随机数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机数</title>
<style>
* {
margin: 0;
padding: 0;
}
.cc {
width: 2000px;
display: flex;
justify-content: center;
border: 1px #f00 solid;
/* align-items: center; */
}
.zz {
width: 50px;
height: 50px;
background: #f00;
margin: 15px;
/* display: inline-block; */
}
</style>
</head>
<body>
</body>
</html>
<script>
/*
数学方法
Math.floor() 向下取整
Math.ceil() 向上取整
Math.round() 四舍五入
Math.random() 随机数,返回的是 [0,1) 的值
*/
document.write( Math.random()+'<br/>' );
document.write( Math.random()*100+'<hr/>' );
// 0-100整数
let num = Math.floor( Math.random()*101 )
document.write( num +'<br/>' );
// [40,60]之间数
document.write( Math.floor( Math.random()*21+40 ) +'<hr/>' );
/*
[m,n]之间的随机整数
Math.floor( Math.random()*(n-m+1))+m;
*/
// 随机输出 10个 [20,70] 之间的整数
for(let i=1;i<=10;i++){
document.write( Math.floor( Math.random()*51+20 ) +'<br/>' );
}
let sum=0 , abc=10 , sd=100 ;
/*
for循环,如果他的判断条件具有多个,如下,具有 i<6,j<20 两个条件,那么只有最后一个条件起到了判断条件的作用,其他判断条件作废
*/
for(let i=0,j=0;i<6,j<20;i++,j++){
sum = i+j;
}
document.write( sum +'<hr/>' )
//
</script>
课前练习
01、兔子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>兔子</title>
</head>
<body>
</body>
</html>
<script>
// 有一对幼兔,幼兔一个月长成小兔,小兔一个月长成成兔
// 初始幼兔的对数
let you = 1;
// 初始小兔的对数
let small = 0;
// 初始成兔的对数
let old = 0;
for(let i=1;i<=10;i++){
if(i==1){
small = you;
}else{
// 小兔长大成老兔
old += small;
// 幼兔长大成小兔
small = you;
// 如果有老兔,老兔生幼兔
you = old;
}
}
console.log( you,small,old );
</script>
02、三和七
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3和7</title>
</head>
<body>
<input type="text" id="val"> <br>
<button id="btn">能被3和7整除的数的和为</button> <br>
<input type="text" id="val2">
</body>
</html>
<script>
let val = document.getElementById('val');
let val2 = document.getElementById('val2');
let bth = document.getElementById('btn');
let sum=1;
btn.onclick = function(){
let v1 = Number( val.value);
let sum=0;
for(let i=1;i<=v1;i++ ){
if(i%3==0 && i%7==0){
sum+=i;
}
}
console.log(sum);
val2.value = (sum);
}
</script>
03、打印整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打印整数</title>
</head>
<body>
<input type="text" id="val"> <br>
<input type="text" id="val2"> <br>
<button id="btn">打印</button> <br>
<input type="text" id="val3">
</body>
</html>
<script>
let val = document.getElementById('val');
let val2 = document.getElementById('val2');
let val3 = document.getElementById('val3');
let btn = document.getElementById('btn');
btn.onclick = function(){
let v1 = Number(val.value);
let v2 = Number(val2.value);
let min = v1>=v2?v2:v1;
let max = v1>=v2?v1:v2;
let sum;
for(let i=min;i<=max;i++){
console.log(parseInt(i));
}
}
</script>
04、猴子吃桃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猴子吃桃</title>
</head>
<body>
</body>
</html>
<script>
let t = 1;
for(let d=1;d<7;d++){
t=(t+1)*2;
}
console.log(t);
</script>
05、小朋友年龄
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小朋友年龄</title>
</head>
<body>
</body>
</html>
<script>
/*
*/
let age = 3;
for(let i=1;i<5;i++){
age+=2;
}
console.log( age );
</script>