目录
一、循环练习
1.1 取款机案例
// 准备一个总的金额
let sum = 1000
while (true) {
let op = +prompt (`
请选择您的操作：
1.取款
2.存款
3.查看余额
4.退出
`)
// 如果用户输入的 4，则退出循环，break
if (op === 4) {
break
}
// 根据输入做操作
switch (op) {
case 1:
let qu = +prompt('取款')
sum = sum - qu
break
case 2:
let cun = +prompt('存款')
sum = sum + cun
break
case 3:
alert(`您的余额是${sum}`)
break
}
} 1.2 九九乘法表
<style>
span{
display: inline-block;
height: 25px;
line-height: 25px;
width: 100px;
padding: 5px 10px;
/* text-align: left; */
border: 1px solid #000;
margin: 2px;
border-radius: 5px;
box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
}
</style>
</head>
<body>
<script>
for (let i = 1; i <= 9; i++) {
for(let j = 1; j <= i; j++){
document.write(`<span>${j} * ${i} = ${i * j}</span>`)
}
// 进行换行显示
document.write('<br>')
}
</script>1.3 根据数据生成柱形图
结构样式创建如下代码：
使用一个box 盒子，设置左及下边框，然后添加四个子元素，每个元素包含span和h4，使用flex布局使得div在box中沿x轴平分剩余空间，y轴与底部对齐排列，然后也为div设置flex布局，使得，span和h4分散在div两端。
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
margin: 50px auto;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -10px;
}
</style>
</head>
<body>
<div class="box">
<div style="height: 123px;">
<span>123</span>
<h4>第1季度</h4>
</div>
<div style="height: 156px;">
<span>156</span>
<h4>第2季度</h4>
</div>
<div style="height: 120px;">
<span>120</span>
<h4>第3季度</h4>
</div>
<div style="height: 210px;">
<span>210</span>
<h4>第4季度</h4>
</div>
</div> 
最终代码：
<style>
* {
padding: 0;
margin: 0;
}
.box {
display: flex;
width: 700px;
height: 300px;
border-left: 1px solid pink;
border-bottom: 1px solid pink;
flex-direction: row;
justify-content: space-around;
align-items: flex-end;
text-align: center;
}
.box > div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between;
}
.box div span {
margin-top: -20px;
}
.box div h4 {
width: 70px;
margin-bottom: -35px;
margin-left: -10px;
}
</style>
</head>
<body>
<script>
let arr = []
// 1.四次弹窗效果
for (let i = 1; i <= 4; i++) {
arr.push(prompt(`请输入第${i}季度的数据`))
}
// 盒子开头
document.write(`<div class="box">`)
// 盒子中间 利用循环的形式 跟数组有关系
for (let i = 0; i < arr.length; i++) {
document.write(`
<div style="height: ${arr[i]}px;">
<span>${arr[i]}</span>
<h4>第${i + 1}季度</h4>
</div>
`)
}
// 盒子结尾
document.write(`</div>`)
</script>
</body>1.4 冒泡排序
// 转为升序排列
let arr = [5, 4, 3, 2, 1]
for (let i = 0; i < arr.length - 1; i++) {
for (let j = 0; j < arr.length - i - 1; j++) {
// 开始交换，前提是前一个数大于后一个数才交换
if (arr[j] > arr[j + 1]) {
// 交换两个变量
let temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
console.log(arr);1.5 找到数组中某个元素的下标，没有就打印-1
找出数组中 元素为10的下标，有则打印该下标，没有则打印-1
注意，可以设置储存结果的变量值为-1，有该元素时该变量值变为该元素的下标
arr = [88,20,30,100,50]
let re = -1 //用于储存结果，默认没有
for (let i = 0; i < arr.length; i++) {
if (arr[i] === 10) {
re = i //如果找到就把当前索引号赋值给re, 如果没有找到，则默认是-1
break //找到就退出
}
}
console.log(re);1.6综合大练习
注意因为无效不放入数组，故可以根据数组的长度来判断循环终止条件
// 定义空数组
let arr = []
while (arr.length < 5) {
// 输入年龄
let age = +prompt('输入第${arr.length + 1}个有效年龄(0-100)')
// 判断是否有效
if (age >= 0 && age <= 100) {
// 添加到数组中
arr.push(age)
}
}
console.log(arr);
let total = 0
let max = arr[0]
let min = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr[i] >= 18) {
console.log(`成年人的年龄有${arr[i]}`);
}
arr [i] > max ? max = arr[i] : max
arr [i] < min ? min = arr[i] : min
total += arr[i]
}
let ave = total / arr.length
console.log(`总年龄为${total}，平均年龄为${ave}`);
console.log(`最大值为${max}，最小值为${min}`);二、函数
2.1 转换时间案例
//用户输入
let second = +prompt('请输入秒数')
// 封装函数
function getTime(t) {
// 转换
let hour = parseInt(t / 60 / 60 % 24)
let minu = parseInt(t / 60 % 60)
let sec = parseInt(t % 60)
// 补0
hour = hour < 10 ? '0' + hour : hour
minu = minu < 10 ? '0' + minu : minu
sec = sec < 10 ? '0' + sec : sec
return `转换之后为${hour}小时${minu}分钟${sec}秒`
// console.log(`${t}转换为${hour}小时${minu}分${sec}秒`);
}
let str = getTime(second)
console.log(str);三、对象
1. 遍历数组对象
表格结构及样式代码：
<style>
table {
width: 600px;
text-align: center;
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid #ccc;
}
caption {
font-size: 18px;
margin-bottom: 10px;
font-weight: 700;
}
table tr {
height: 40px;
cursor: pointer;
}
table tr:first-child {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
<td>男</td>
<td>河北省</td>
</tr>
</table>最终渲染的 js 代码：
<body>
<h2>学生信息</h2>
<p>将数据渲染到页面中...</p>
<table>
<caption>学生列表</caption>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>家乡</th>
</tr>
<!-- script写到这里 -->
<script>
// 数据准备
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
]
// 渲染页面
for (let i = 0; i < students.length; i++) {
document.write(`<tr>`)
document.write(`<td>${i + 1}</td>`)
for (let k in students[i]) {
document.write(`<td>${students[i][k]}</td>`);
}
document.write(`</tr>`)
}
// 表格结尾
document.write(`</table>`)
</script>2. 猜数字游戏
需求：程序随机生成1 ~ 10 之间的一个数字，用户输入一个数字
(1). 如果大于该数字，就提示，数字猜大了，继续猜
(2). 如果小于该数字，就提示，数字猜小了，继续猜
(3). 如果猜对了，就提示，猜对了，程序结束
// 随机生成一个数字1 ~ 10
function getRandom (N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}
let random = getRandom(1, 10)
// 需要不断
while (true) {
// 用户输入一个值
let num = +prompt('请输入你猜的数字')
// 判断输出
if (num > random) {
alert('数字猜大了')
}else if (num < random) {
alert('数字猜小了')
}else if (num === random) {
alert('猜对了')
break
}
}设定指定次数的若未猜对时，也退出循环，且弹出次数已经用完。
function getRandom (N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}
let random = getRandom(1, 10)
let flag = true //开关变量
// 设定三次，三次没猜对就直接退出循环
for (let i = 1; i <= 3; i++) {
// 用户输入一个值
let num = +prompt('请输入你猜的数字')
// 判断输出
if (num > random) {
alert('数字猜大了')
}else if (num < random) {
alert('数字猜小了')
}else if (num === random) {
flag = false
alert('猜对了')
break //退出循环
}
}
if (flag) {
alert('次数已经用完了')
}3. 生成随机颜色
// 自定义随机颜色函数
function getRandomColor(flag = true) {
if (flag) {
// 如果为 true 则返回#ffffff
let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']
let color = '#'
// 利用 for循环随机抽6次，累加到color里面
for (let i = 0; i < 6; i++) {
// 每次要随机从数组里面抽取一个
let random = Math.floor(Math.random() * arr.length)
color += arr[random]
}
return color
} else {
// 否则是false ,则返回rgb(0,0,0)
let r = Math.floor(Math.random() * 256)
let g = Math.floor(Math.random() * 256)
let b = Math.floor(Math.random() * 256)
return `rgb(${r}, ${g}, ${b})`
}
}
// 调用函数 getRandomColor(布尔值)
console.log(getRandomColor(false))
console.log(getRandomColor())
console.log(getRandomColor(true))4. 学成在线页面渲染案例
标题标签有自己的padding，margin，故css初始化是非常必要的（* { padding: 0; margin: 0;}）
注意在渲染时，图片路径src="images/course01.jpg"改为src=${data[i].src} 不需要加引号，因为data[i].src数据中包含了引号，但图片提示文字title 需要用双引号包起来 title="${data[i].title}"，不包的话，只会显示该对象属性中空格前的内容，因为该属性内容可能包含空格
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- 4. box核心内容区域开始 -->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<ul class="clearfix">
<!-- <li>
<a href="#">
<img src="images/course01.jpg" alt="">
<h4>
Think PHP 5.0 博客系统实战项目演练
</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</a>
</li> -->
<script>
// 数据
let data = [
{
src: 'images/course01.jpg',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.jpg',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.jpg',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.jpg',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.jpg',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.jpg',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.jpg',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.jpg',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
for (let i = 0; i < data.length; i++) {
document.write(`
<li>
<a href="#">
<img src=${data[i].src} alt="" title="${data[i].title}">
<h4>
${data[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>
</a>
</li>`)
}
</script>
</ul>
</div>
</div>
</body>
934
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
