搜索到
207
篇与
的结果
-
57、函数封装案例 copy <!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>Document</title> </head> <body> <script> // 1、求2个数的和 // function getSum(){ // let num1 = +prompt('请输入第一个数') // let num2 = +prompt('请输入第二个数') // console.log(num1 + num2) // } // getSum() // 2、求1~100之间所有数的和 function getSum(){ let sum = 0 for (let i = 1; i <= 100; i++){ sum += i } console.log(sum) } getSum() </script> </body> </html> -
56、函数的声明 <!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>Document</title> </head> <body> <script> // 1、函数的声明 function sayHi(){ console.log('hi') } // 2、函数调用 函数不调用，自己不执行 sayHi() sayHi() sayHi() </script> </body> </html>
-
55、体验函数99乘法表 <!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>Document</title> <style> span { display: inline-block; width: 100px; padding: 5px 10px; border: 1px solid pink; margin: 2px; border-radius: 5px; box-shadow: 2px 2px 2px rgba(255, 192, 203, .4); background-color: rgba(255, 192, 203, .1); text-align: center; color: hotpink; } </style> </head> <body> <script> // // 1. 外层循环控制行数 // for (let i = 1; i <= 9; i++) { // // 2. 里层循环控制列数 // for (let j = 1; j <= i; j++) { // document.write(`<span>${j} X ${i} = ${i * j}</span>`) // } // // 换行 // document.write('<br>') // } // // 1. 外层循环控制行数 // for (let i = 1; i <= 9; i++) { // // 2. 里层循环控制列数 // for (let j = 1; j <= i; j++) { // document.write(`<span>${j} X ${i} = ${i * j}</span>`) // } // // 换行 // document.write('<br>') // } // // 1. 外层循环控制行数 // for (let i = 1; i <= 9; i++) { // // 2. 里层循环控制列数 // for (let j = 1; j <= i; j++) { // document.write(`<span>${j} X ${i} = ${i * j}</span>`) // } // // 换行 // document.write('<br>') // } // 声明 function sheet99() { for (let i = 1; i <= 9; i++) { // 2. 里层循环控制列数 for (let j = 1; j <= i; j++) { document.write(`<span>${j} X ${i} = ${i * j}</span>`) } // 换行 document.write('<br>') } } // 调用 sheet99() sheet99() sheet99() sheet99() </script> </body> </html>
-
54、冒泡排序 <!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>Document</title> </head> <body> <script> let arr = [151,14,13,12,1] // arr.sort() //排序 // 降序 arr.sort(function (a,b){ return a - b }) // 升序 arr.sort(function (a,b){ return b - a }) console.log(arr) </script> </body> </html>
-
53、综合案例-根据数据生成柱形图素材 <!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>Document</title> <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> <script> // 1、四次弹框效果 // 声明一个新数组 let arr = [] for(let i = 1; i <= 4; i++){ // let num = prompt(`请输入第${i}季度的数据：`) // arr.push(num) arr.push(prompt(`请输入第${i}季度的数据：`)) } // console.log(arr) // 盒子开头 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> </html>
