一、循环
一、while
<script>
// 循环语句可以使代码重复执行
// 1、while
// while(条件){
// 重复执行的代码
// }
let i = 5
while(i > 0){
console.log('一直执行')
// i--
i = i - 1
}
i = 4
i = 3
i = 2
i = 1
i = 0
// 如果将上述代码中的i--拿掉，那么永远死循环
// 想办法让i<=0,比如i = -1，让死循环停下来
// 在写循环注意的3个要素
// 1、起始值
// 2、终止值
// 3、变化值
let j = 5
while(j<0){
j = j -1
}
let t = 0
while(t<10){
// t=t+2
console.log('执行了几次')
t += 2
}
// t=0
// t=2
// t=4
// t=6
// t=8
// t=10 //不执行
// 练习：在页面中输出十遍"卢灵秋"
let x = 0
while(x<10){
document.write("键盘敲烂")
document.write("<br>")
x++
}
</script>
1、练习：输出1-100
<script>
// 1、构造一个100次的循环
// a)起始 b)终止 c)变化量
let i = 1
while(i<=100){
console.log(i)
i += 1
}
</script>
2、练习：输出1-100之间的偶数和
<script>
// 计算1-100之间的偶数和
// 1、while
let i = 1
let s = 0
while (i <= 100) {
if (i % 2 == 0) {
s = s + i
}
i++
}
console.log(s)
// 2、for
let sum2 = 0
for (let j = 1; j <= 100; j++) {
if (j % 2 == 0) {
sum2 += j
}
}
console.log(sum2)
// 3、do while
let sum3 = 0
let k = 1
do {
if (k % 2 == 0) {
sum3 += k
}
k++
} while (k <= 100)
console.log(sum3)
</script>
3、扩展break、continue
<script>
let i = 0
while(i<10){
// 使用continue时需要将变化量提前
// i++
if(i===3){
// continue (本次循环不再执行)
//本次循环后面的代码就不再执行
break //终止本次循环
}
i++
console.log(i)
}
</script>
<script>
// 一直出弹窗
// let love =prompt("你爱我吗？")
let i = 0
while(i<100){
let str = prompt("你爱我吗")
if(str === '爱'){
break
}
i++
}
// 计算1-10之间的偶数和
let j = 1
let s = 0
while(j<=10){
j++//如果使用continnue时，一定要将变化量提前
if(j%2!==0){
continue //本次循环后面的代码不再执行
}
s += i
}
console.log(s)
</script>
二、for
1、for循环
<script>
// for
// 区别：语法格式不同
// for(起始值;终止值;变化量){
// 此处代码会一直执行
// }
// let i = 0
// while(i10){i+=2}
// 示例
for(let i=0;i<10;i+=2){
console.log('代码重复执行了')
}
//在控制台打印1-100
for(let a=1;a<=100;a++){
console.log(a)
}
</script>
2、嵌套for循环
<script>
for(let i=0;i<3;i++){
document.write(`第$ 天`)
document.write('<br>')
for(let j=0;j<5;j++){
document.write(`记住第$ 个单词`)
document.write('<br>')
}
}
</script>
练习1:
99乘法表
style>
table{
border-collapse: collapse;
width: 500px;
text-align: center;
}
td{
border: 1px solid black;
}
</style>
</head>
<body>
<script>
// td、tr按着html语法是不是要放在table
document.write('<table>')
for(let i=1;i<=9;i++){
document.write('<tr>')
for(let j=1;j<=i;j++){
document.write(`<td>${j}*${i}</td>`)
}
document.write('</tr>')
}
document.write('</table>')
</script>
练习2：
打印5行5列小星星
<script>
for(let i =0;i<5;i++){
for(let j =0;j<5;j++){
document.write('*')
}
document.write('<br>')
}
</script>
二、数组
一、数组遍历
<script>
// 1、定义一个数组
let numbers = [1,2,34,5]
// 定义变量存求和结果
let s = 0
// 2、先把数组中的每个元素获取到，通过数组遍历实现
for(let i=0;i<4;i++){
// console.log(numbers[i])
// 3、求和
s += numbers[i]
}
console.log(`数组中所有数字的和为：${s}`)
// 平均数
console.log(`数组中所有平均数为${s / 4}`)
// 知道数组的长度
let arr = [1,2,3,4]
console.log(arr.length)
// 谁大保留谁
// 求数组的最大值和最小值
let nums = [1,2,3,4,5]
let maxNumber = null
for(let i=0;i<nums.length;i++){
if(nums[i] > maxNumber){
maxNumber = nums[i]
}
}
console.log(maxNumber)
</script>
二、数组的操作
1、数组的添加
<script>
let arr = [1,2,3,4]
arr.push(6)
console.log(arr)
// 数组的单元不是一成一变的，是可以进行操作了！！
// 1、增加
// a)push向数组的【结尾】添加一个新的单元
let numbers = [1,2,3,4,5]
numbers.push(11)
console.log(numbers)
// b)unshift向数组【开头添加一个新单元】
numbers.unshift('a')
console.log(numbers)
</script>
2、数组的删除
<script>
let heros = ['张飞', '小乔','嫦娥','虞姬']
//2、删除
//a) pop 删除数组的最后一个单元
heros.pop()
console.log(heros)
//b) shift 删除数组的第一个单元
heros.shift()
console.log(heros)
//c) splice既能删除，还能添加，还能修改！
// 也可以删除某个任意单元
// heros.splice(索引值，单元个数)
// 索引值指从哪里开始删 heros.splice(2)
// splice(2,2)
heros.splice(1,1)
console.log(heros)
//d) splice还可以对数组单元进行修改
// heros.splice(1,2,替换元素,替换元素)
heros.splice(1,2,'曹操','鲁班')
console.log(heros)
</script>
3、利用js生成柱状图
<style>
.box {
width: 1200px;
height: 200px;
margin: 200px auto;
border: 1px solid #2ddc3e;
position: relative;
}
.one {
background-color: pink;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<!-- <div class="box">
<div class="one" style="width: 40px; left: 100px; height: 80%; background-color: blue;"></div>
<div class="one" style="width: 40px; left: 200px; height: 60%; background-color: red;;"></div>
<div class="one" style="width: 40px; left: 300px; height: 40%; background-color: green;"></div>
</div> -->
<script>
// 需求：允许用户控制柱子的数量，均分柱子的宽度
// 要求1：柱子数量不限定
// 要求2：柱子高度不限定：0-200之间
// 要求3：颜色不确定：rgb(255,255,255)
// 2、让用户输入4个数字，定义一个空数组，让它来保存用户输放的数字
let arr = []
for(let i=0;i<4;i++){
// 总共会收到4个结果，如何保存
let tmp = prompt('请输入1个数字:')
arr.push(tmp)
}
console.log(arr)
document.write('<div class="box">')
// 3、将数组中的数据放到div/之间去，又得对数组进行遍历
for(let t=0;t<arr.length;t++){
// 有4个数据，就会有4个柱子
// 数组的长度决定了柱子的个数
// console.log(arr[t]) 每个单元
// t*100
// t=0 0*100
// t=1 1*100
// ...
// t=3 3*100
document.write(`<div class="one" style="left:${t*100}px;width:40px;height:${arr[t]}px"></div>`)
}
document.write('</div>')
// 1、动态的通过 js 来生成 html 标签
// document.write('<div class="box">')
// 生成柱状图盒子
// let h=100
// for (let i = 0; i < 4; i++) {
// document.write(`<div class="one" style="left:${h}px; width: 40px; height:${arr[i]}px"></div>`)
// h += 100
// }
// document.write('</div>')
</script>
</body>
\
