发表于： 2023-02-14 20:20:50
0 143
今天的js知识点：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根据数据生成柱状图</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 30px auto;
width: 700px;
height: 100%;
display: flex;
/*justify-content: space-around : 在每行上均匀分配弹性元素。相邻元素间距离相同。
每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。*/
justify-content: space-around;
align-items: flex-end; /* 从底部开始对齐 */
border-left: 3px solid black;
border-bottom: 3px solid black;
/*flex-direction: column;*/
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
}
.box div span {
text-align: center;
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -5px;
}
/*#one {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #4f1;*/
/*}*/
/*#two {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #a41;*/
/*}*/
/*#three {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #849;*/
/*}*/
/*#four {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #0aa;*/
/*}*/
</style>
</head>
<body>
<div>
<span></span>
<h4></h4>
</div>
<script>
let arr = []
for(let i = 1; i <= 4; i++) {
// num = prompt(`请输入第${i}季度的数据：`)
// arr.push(num)
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>
<!--<div class="box">-->
<!-- <div id="one"></div>-->
<!-- <div id="two"></div>-->
<!-- <div id="three"></div>-->
<!-- <div id="four"></div>-->
<!--</div>-->
<!--<script>-->
<!-- let Data = []-->
<!-- let Div = []-->
<!-- let Name = ["one","two","three","four"]-->
<!-- for (let i = 0; i < 4; i++) {-->
<!-- /* 将每一季度的数据添加到Data数组中 */-->
<!-- Data.push(prompt(`请输入第${i+1}季度数据`))-->
<!-- /* 得到div的类名 */-->
<!-- Div[i] = document.getElementById(Name[i])-->
<!-- }-->
<!-- for (let i = 0; i < 4; i++) {-->
<!-- /* 给div设置高度，高度 = 当前季度数据的大小 */-->
<!-- Div[i].style.height = `${Data[i]}px`-->
<!-- /* 给div添加内容 */-->
<!-- Div[i].innerHTML = Data[i] + '<br>' + `第${i+1}季度`-->
<!-- }-->
<!--</script>-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
<style>
span {
display: inline-block;
padding: 5px 10px;
border: 1px solid #333333;
margin: 2px;
}
</style>
</head>
<body>
<script>
//声明函数
// function sayHi() {
// console.log(`hi`)
// }
// //调用函数
// sayHi()
// 99乘法案例
// for(let i = 1; i <= 9; i++) {
// //里层循环控制列数的星星
// for (let j = 1; j <= i; j++){
// document.write(`<span>${i}×${j} =${j * i}</span>`)
// }
// document.write(`<br>`)
// }
// for(let i = 1; i <= 9; i++) {
// //里层循环控制列数的星星
// for (let j = 1; j <= i; j++){
// document.write(`<span>${i}×${j} =${j * i}</span>`)
// }
// document.write(`<br>`)
// }
// 声明函数
// function sheet99() {
// for(let i = 1; i <= 9; i++) {
// //里层循环控制列数的星星
// for (let j = 1; j <= i; j++){
// document.write(`<span>${i}×${j} =${j * i}</span>`)
// }
// document.write(`<br>`)
// }
// }
// //调用
// sheet99()
// sheet99()
// sheet99()
//小案例
// 封装一个函数 计算两个数字的和
// function js() {
// let num1 = +prompt(`输入数字一：`)
// let num2 = +prompt(`输入数字二：`)
// alert(`它们和是${num1 + num2}`)
// }
// js()
// 封装一个函数 计算1-100之间所有的和
// function js100() {
// let num = 0
// for(let i = 0; i <= 100; i++) {
// num += i
// }
// console.log(num)
// }
// js100()
//函数存入参数
// function js100(a = 0,b = 0) {
// // 形参 形式上的参数
// let num = 0
// for(let i = a; i <= b; i++) {
// num += i
// }
// console.log(num)
// }
// js100(0,100) //调用的叫实参
// js100(0,1000)
//
// function js(x = 0, y = 0) {
// //参数的默认值
// document.write(x + y)
// }
// js(10,20)
//案例：学生的分数是一个数组，计算每个学生的总分
//1、封装一个求和函数
// function getArrSum(arr = []) {
// let sum = 0
// for (let i = 0; i < arr.length; i++) {
// sum += arr[i]
// }
// document.write(sum)
// }
//2、传递过去的参数 是一个数组
// getArrSum([1,2,3,4,5])
//3、函数内部遍历数组求和
// function getSum(x = 0, y = 0) {
// let sum = 0
// for(let i = x; i <= y; i++) {
// sum += i
// }
// console.log(sum)
// }
// // getSum(1,2)
// let num1 = +prompt('请输入第一个数')
// let num2 = +prompt('请输入第二个数')
// getSum(num1,num2)
//函数返回值 return 数据
// function fn() {
// return 20
// }
//
// console.log(fn())
//求和函数
function sum(x = 0, y = 0) {
return x + y
}
document.write(sum(10,20))
</script>
</body>
</html>
案例练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>根据数据生成柱状图</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 30px auto;
width: 700px;
height: 100%;
display: flex;
/*justify-content: space-around : 在每行上均匀分配弹性元素。相邻元素间距离相同。
每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。*/
justify-content: space-around;
align-items: flex-end; /* 从底部开始对齐 */
border-left: 3px solid black;
border-bottom: 3px solid black;
/*flex-direction: column;*/
}
.box>div {
display: flex;
width: 50px;
background-color: pink;
flex-direction: column;
justify-content: space-between; /* 均匀排列每个元素
首个元素放置于起点，末尾元素放置于终点 */
}
.box div span {
text-align: center;
margin-top: -20px;
}
.box div h4 {
margin-bottom: -35px;
width: 70px;
margin-left: -20px;
}
/*#one {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #4f1;*/
/*}*/
/*#two {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #a41;*/
/*}*/
/*#three {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #849;*/
/*}*/
/*#four {*/
/* width: 60px;*/
/* text-align: center;*/
/* background-color: #0aa;*/
/*}*/
</style>
</head>
<body>
<div>
<span></span>
<h4></h4>
</div>
<script>
let arr = []
for(let i = 1; i <= 4; i++) {
// num = prompt(`请输入第${i}季度的数据：`)
// arr.push(num)
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>
<!--<div class="box">-->
<!-- <div id="one"></div>-->
<!-- <div id="two"></div>-->
<!-- <div id="three"></div>-->
<!-- <div id="four"></div>-->
<!--</div>-->
<!--<script>-->
<!-- let Data = []-->
<!-- let Div = []-->
<!-- let Name = ["one","two","three","four"]-->
<!-- for (let i = 0; i < 4; i++) {-->
<!-- /* 将每一季度的数据添加到Data数组中 */-->
<!-- Data.push(prompt(`请输入第${i+1}季度数据`))-->
<!-- /* 得到div的类名 */-->
<!-- Div[i] = document.getElementById(Name[i])-->
<!-- }-->
<!-- for (let i = 0; i < 4; i++) {-->
<!-- /* 给div设置高度，高度 = 当前季度数据的大小 */-->
<!-- Div[i].style.height = `${Data[i]}px`-->
<!-- /* 给div添加内容 */-->
<!-- Div[i].innerHTML = Data[i] + '<br>' + `第${i+1}季度`-->
<!-- }-->
<!--</script>-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//求任意2个数中的最大值，并返回
// function getMax(x,y) {
// return x > y? x : y
// }
// document.write(getMax(5,2))
// 返回数组中的最大值 并返回
// function getArrValue(arr = []) {
// let max = arr[0]
// // 遍历比较
// for(let i = 1; i < arr.length; i++) {
// if (max < arr[i]) {
// max = arr[i]
// }
// }
// //返回值
// return max
// }
// console.log(getArrValue([1,3,10,7,9]))
// 返回数组中的最大值和最小值 并返回
// function getArrValue(arr = []) {
// let max = arr[0]
// let min = arr[0]
// // 遍历比较
// for(let i = 1; i < arr.length; i++) {
// //最大值
// if (max < arr[i]) {
// max = arr[i]
// }
// //最小值
// if (min > arr[i]) {
// min = arr[i]
// }
// }
// //返回 最大值跟最小值
// return [max , min]
// }
// let newArr = getArrValue([1,3,10,7,9])
// console.log(`数组的最大值是：${newArr[0]}`)
// console.log(`数组的最小值是：${newArr[1]}`)
//匿名函数
// let fn = function (x,y) {
// // console.log(`我是函数表达式`)
// console.log(x + y)
// }
// fn(1,2)
//立即执行函数
// (function (){
// console.log(11)
// })()
(function (x,y){
console.log(x + y)
})(2,3);
//第二种写法
(function (x,y){
console.log(x + y)
}(2,3));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//求任意2个数中的最大值，并返回
// function getMax(x,y) {
// return x > y? x : y
// }
// document.write(getMax(5,2))
// 返回数组中的最大值 并返回
// function getArrValue(arr = []) {
// let max = arr[0]
// // 遍历比较
// for(let i = 1; i < arr.length; i++) {
// if (max < arr[i]) {
// max = arr[i]
// }
// }
// //返回值
// return max
// }
// console.log(getArrValue([1,3,10,7,9]))
// 返回数组中的最大值和最小值 并返回
// function getArrValue(arr = []) {
// let max = arr[0]
// let min = arr[0]
// // 遍历比较
// for(let i = 1; i < arr.length; i++) {
// //最大值
// if (max < arr[i]) {
// max = arr[i]
// }
// //最小值
// if (min > arr[i]) {
// min = arr[i]
// }
// }
// //返回 最大值跟最小值
// return [max , min]
// }
// let newArr = getArrValue([1,3,10,7,9])
// console.log(`数组的最大值是：${newArr[0]}`)
// console.log(`数组的最小值是：${newArr[1]}`)
//匿名函数
// let fn = function (x,y) {
// // console.log(`我是函数表达式`)
// console.log(x + y)
// }
// fn(1,2)
//立即执行函数
// (function (){
// console.log(11)
// })()
(function (x,y){
console.log(x + y)
})(2,3);
//第二种写法
(function (x,y){
console.log(x + y)}(2,3));
//用户输入秒数，可以自动转换为时分秒 转换公式
// 小时 : h = parseInt(总数 / 60 /60 /24%)
// 分钟 : m = parseInt(总数 / 60 % 60)
// 秒数 : s = parseInt(总数 % 60)
let times = +prompt('请输入秒数：')
function fn() {
let h = parseInt(times / 60 /60 / 24)
let m = parseInt(times / 60 % 60)
let s = parseInt(times % 60)
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
document.write(`${times}秒的时间是${h}小时${m}分${s}秒`)
}
fn()
</script>
</body>
</html>
返回列表
评论