1.运用for 与 语句解决问题
求 2000-3000 内的所有闰年
*
* 逻辑:
* 1. 找到 2000~3000 所有的数字
* 2. 判断这个数字是不是闰年
新需求: 每 打印 4 次闰年, 换行一次
*
* 思路: 创建一个新的变量作为计数器
var sum = 0 // 作为计数器
for (var i = 2000
if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) {
// ' ' 有空格，将数隔开
document.write(i + ' ')
sum++ // 上述代码执行1次, 那么计数器 + 1
// if (sum === 4) {
// document.write('<br>')
// sum = 0 // 清零计数器, 方便开始新一轮的计算
// }
if (sum % 4 === 0) {
document.write('<br>')
}
}
}
有一个三位数
* 每个位置上的三次方之和 正好等于自身
*
* 帮我找出 所有的水仙花数
*
*
* 举例:
* 123
* 1 * 1 * 1 + 2 * 2 * 2 + 3 * 3 * 3 === 是否等于 123
* 如果等于 那么就是水仙花数
* 否则不是
*
*
* 逻辑:
* 1. 找到所有的 三位数 (100~999)
* 2. 找到某一个三位数的各个位置的值
* 3. 计算三个位置上各个数字的三次方之和
* 4. 对比 是否等于自身
*/
2.水仙花数
1. 找到所有的 三位数 (100~999)
for (var i = 100; i < 1000; i++) {
// console.log(i)
// 2. 找到某一个三位数的各个位置的值
var gew = i % 10
var shiw = parseInt(i / 10) % 10
var baiw = parseInt(i / 100)
求三位数的第一方法 var sum = gew * gew * gew + shiw * shiw * shiw + baiw * baiw * baiw
求三位数的第二方法 var sum = gew ** 3 + shiw ** 3 + baiw ** 3
// 4. 对比 是否等于自身
if (sum === i) {
console.log(i, '是一个水仙花数')
}
}
3.求两个数的最大公约数
/**
* 求两个数字的最大公约数
* 比如: 12 和 8
*
* 什么是约数?
* 能被这个数字整除 (余数为0)
*
*
* 12
* 1 √
* 2 √
* 3 √
* 4 √
* 5
* 6 √
* 7
* 8
* 9
* 10
* 11
* 12 √
*
*
* 8
* 1 √
* 2 √
* 3
* 4 √
* 5
* 6
* 7
* 8 √
*
* 12 的约数
* 1 2 3 4 6 12
* 8 的约数
* 1 2 4 8
*
*
* 1. 先找到 1~12 或者 1~8 的所有数字
* 2. 寻找 12 和 8 的公约数
* 3. 找到所有的公约数中 最大的
*
// num1 和 num2 是用户输入的两个数字
var num1 = 12
var num2 = 8
// num3 存储 num1 和 num2 中 最小的数字，用三元表达式
var num3 = num1 > num2 ? num2 : num1
// num4 用于存储最大的公约数
var num4 = 0
// 1. 先找到 1~12 或者 1~8 的所有数字, 为了性能更好, 我们这里选择的是 1~8 的所有数字
for (let i = num3; i >= 1; i--) {
// 2. 寻找 12 和 8 的公约数
if (num1 % i === 0 && num2 % i === 0) {
// console.log(i) // i 是 num1 和 num2 的公约数
// num4 = i // 这种书写方式存储的是最后一个 公约数, 不是最大公约数，因为i是递减，所以循环到最后 i是最小值
// 3. 找到所有的公约数中 最大的 ，因为当条件 num4 < i成立， num4 = i，但i是递减的，所以当 num4 < i， num4 = i第一次成立时， num4就是i的最大值
if (num4 < i) {
num4 = i
}
}
}
console.log('最大公约数: ', num4)
3.求 1~30 中的所有质数
*
* 如果你能够判断一个数字是不是质数, 那么你就能够完成上述案例
*
*
* 除了1和它本身, 没有能够整除的数字
*
* 7 (是质数)
* 1~7 (除了1和它本身 就剩下 2~6)
* 7 % 2 !== 0
* 7 % 3 !== 0
* 7 % 4 !== 0
* 7 % 5 !== 0
* 7 % 6 !== 0
*
* 8 (不是一个质数)
* 1~8 (除了1和它本身 就剩下 2~7)
* 8 % 2 === 0
* 8 % 3 !== 0
* 8 % 4 === 0
* 8 % 5 !== 0
* 8 % 6 !== 0
* 8 % 7 !== 0
*
* 9 (不是一个质数)
* 1~9 (除了1和它本身 就剩下 2~8)
* 9 % 2 !== 0
* 9 % 3 === 0
* 9 % 4 !== 0
* 9 % 5 !== 0
* 9 % 6 !== 0
* 9 % 7 !== 0
* 9 % 8 !== 0
*
* 假设 数字 为 n
* 1. 找到 2~n-1 的所有数字
* 2. 找有没有能够和 n 完成 整除的 数字
* 有 代表 不是质数
* 没有 代表 是质数
*/
// 当前案例为 判断一个数字是不是质数=============================================
// 假设 数字 为 n
var n = 6
var sum = 0 // 用于完成计数器, 当 for 循环内部的 if 语句 执行的时候, 会改变 sum 的值
// // 1. 找到 2~n-1 的所有数字
for (var i = 2; i < n; i++) {
// // 2. 找有没有能够和 n 完成 整除的 数字
if (n % i === 0) {
// // console.log(i, '当你看到我的时候 说明有一个数字能够和', n, '完成整除')
// // 当前 分支内 如何修改 sum 的值(修改为什么) 并不重要, 重要的是 不能等于 初始值
sum++
// // sum = 100
// // sum = true
// }
// }
// // 只要 当前 sum === 0 就证明 上述的 循环内的分支没有执行过
if (sum === 0) {
console.log(n, '是一个质数')
}
// =============================================================================
// 求 1~30 以内的所有质数
// 当前循环只是拿到了 1~30 的所有数字, 没有任何特殊含义, 但是这样写 会将 数字 1 也算作 质数
for (var n = 1; n < 31; n++) {
var sum = 0 // 用于完成计数器, 当 for 循环内部的 if 语句 执行的时候, 会改变 sum 的值 var sum = 0 必须在外循环里面，使得sum不断参与循环变为0，如果在外循环外面 sum 就会因为循环得到值不段变大让结果出错
// 1. 找到 2~n-1 的所有数字
for (var i = 2; i < n; i++) {
// 2. 找有没有能够和 n 完成 整除的 数字
if (n % i === 0) {
sum++
}
}
// 只要 当前 sum === 0 就证明 上述的 循环内的分支没有执行过
if (sum === 0) {
console.log(n, '是一个质数')
}
}
/**
* 循环嵌套 其实就是 在一个 for 循环中, 又书写了一个 for 循环
*
* 注意点就是 两个 循环 初始化的变量 不要相同
*/
内外双循环案例一
for (var j = 0; j < 5; j++) {
for (var i = 0; i < 5; i++) {
document.write(i)
}
document.write(' ') //有空格
//j先运行代表了大范围，代表组。i代表了小范围，j动一下，i就动一圈。这j代表了组，i代表了每组几个
内外双循环案例二
for (var j = 0; j < 5; j++) {
for (var i = 0; i < 5; i++) {
document.write('*')
}
document.write('<br>')
}
内外双循环案例三 三角形
三角形
* 第一行: 一列
* 第二行: 二列
* 第三行: 三列
* 以此类推.....
*/
for (var j = 0; j < 5; j++) {
for (var i =0; i <= j; i++) {
document.write('*')
}
document.write('<br>')
}
内外双循环案例三 九九算术乘法表
for (var j = 1
// 内层循环 决定 有多少 列
for (var i = 1
// 1 * 1 = 1 5 * 6 = 30
document.write(j, ' * ', i, ' = ', j * i + ' ')
}
document.write('<br>')
}
随机函数 ->
要求封装一个函数, 这个函数能够计算出一个 0~10 的随机整数
function fn() {
var num = Math.random()
num *= 10
num = Math.round(num)
return num
}
console.log(fn())
随机概率 这里调用 上面写的随机涵数
var obj = {}
for (var i = 1; i <= 11000; i++) {
var num = fn()
// // console.log(i, '===>', num)
if (obj[num] === undefined) {
obj[num] = 1
} else {
obj[num] += 1
}
}
console.log(obj)
// 随机概率 优化1
var obj = {}
for (var i = 1
var num = fn()
// if (obj[num] === undefined) {
if (!obj[num]) { // !obj[num] 这里是个表达式做判断 ，用!取相反布尔值 当 obj[num] === undefined 时 原本为假 用！则变为真 使得if条件成立
// obj[num] 是用对象取里面的属性名的值 又因为是从i = 1开始 obj[num]的值取不到零
// // 当前分支执行, 表明 num 内部存储的随机数字 是 第一次出现
obj[num] = 1
} else {
// // 当前分支执行, 表明 num 内部存储的随机数字 之前出现过
obj[num] += 1
}
}
console.log(obj)
// 随机概率 最终版本
var obj = {}
for (var i = 1; i <= 11000; i++) {
var num = fn()
// obj[num] 是表达式当他的值不是 undefined 条件1成立 否则 条件2成立
obj[num] = obj[num] ? obj[num] + 1 : 1
}
console.log(obj)
求两个的时间差
var tee = new Date()
var ter = new Date(2021, 8, 13, 12, 36)
var sr = tee - ter
console.log(sr)
console.log(Math.round(sr / 1000))
var st = Math.round(sr / 1000)
console.log(st / 31536000)
console.log(st % 31536000) 这个可求余下的月
var tgf = st % 31536000
console.log(tgf / 2592000)
console.log(tgf % 2592000)
var you = tgf % 2592000
console.log(you / 86400)
console.log(you % 86400)
var yi = you % 86400
console.log(yi / 3600)
console.log(yi % 3600)
var tt = yi % 3600
console.log(tt / 60)
var nb = tt / 60
console .log('差',Math.floor(st / 31536000)+'年',Math.floor(tgf / 2592000)+'月',Math.floor(you / 86400)+'天',Math.floor(yi / 3600)+'小时',Math.ceil(nb)+'分钟')
瀑布流
<!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;
}
.header,
.footer {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
height: 120px;
color: #fff;
}
.footer {
height: 300px;
}
ul,
li {
list-style: none;
}
ul {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
padding-top: 10px;
}
li {
width: 290px;
border: 1px solid #333;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
li>img {
width: 278px;
display: block;
}
.loadding {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
</style>
<div class="header">顶部导航</div>
<ul></ul>
<div class="loadding">
<img src="转存失败，建议直接上传图片文件 https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F42c725b3935a1ce3e32897b9995c1b6a2e921d335690-Ck6vZO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669994288&t=3e6b58c142daa3e4fef899cd7b6e9a0b" alt="转存失败，建议直接上传图片文件">
</div>
<div class="footer">底部导航</div>
<script src="./dm_list.js"></script>
<script>
var myUl = document.querySelector('ul')
var loadding = document.querySelector('.loadding')
var currentNum = 1
var pageSize = 8
var totalNum = Math.ceil(list.length / pageSize)
var flag = false
function bindHtml() {
var newArr = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)
var htmlStr = ""
for (var i = 0; i < newArr.length; i++) {
htmlStr += `
<li>
<img src="${newArr[i].pic}" alt="">
<p>${newArr[i].name}</p>
<p>城市: ${newArr[i].city}</p>
<p>地址: ${newArr[i].address}</p>
<p>价格: ${newArr[i].price}</p>
<p>时间: ${newArr[i].showTime}</p>
</li>
`
}
myUl.innerHTML = myUl.innerHTML + htmlStr
}
bindHtml()
window.onscroll = function () {
if (currentNum === totalNum) return
var docHeight = document.documentElement.scrollTop
var winHeight = document.documentElement.clientHeight
var ULTop = myUl.offsetTop
var ULHeight = myUl.offsetHeight
if (docHeight + winHeight <= ULTop + ULHeight) return
if (flag) return
flag = true
loadding.style.display = 'flex'
console.log('此时请求了 1 次新数据')
setTimeout(function () {
currentNum++
bindHtml()
loadding.style.display = 'none'
flag =false
}, 2000)
}
</script>
</body>
</html>
分页案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header,
.footer {
width: 1200px;
margin: 0 auto;
background-color: skyblue;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
height: 120px;
color: #fff;
}
.footer {
height: 300px;
}
ul,
li {
list-style: none;
}
ul {
width: 1200px;
display: flex;
flex-wrap: wrap;
margin: 0 auto;
justify-content: space-between;
padding-top: 10px;
}
li {
width: 290px;
border: 1px solid #333;
margin-bottom: 10px;
padding: 5px;
box-sizing: border-box;
}
li>img {
width: 278px;
display: block;
}
.pagination {
width: 1200px;
margin: 10px auto;
height: 50px;
display: flex;
align-items: center;
}
.pagination>.prev,
.pagination>.next {
width: 50px;
height: 30px;
cursor: pointer;
background-color: orange;
font-size: 24px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.pagination>.disable {
cursor: not-allowed;
background-color: #ccc;
}
.pagination>.total {
font-size: 30px;
font-weight: 700;
margin: 0 20px;
}
.pagination>select {
font-size: 22px;
padding-left: 20px;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="header">网页头部</div>
<div class="pagination">
<span class="prev"><</span>
<span class="total">1 / 100</span>
<span class="next">></span>
<select>
<option value="4">4</option>
<option value="8">8</option>
<option value="12">12</option>
<option value="16">16</option>
</select>
</div>
<ul>
</ul>
<div class="footer">网页底部</div>
<script src="./dm_list.js"></script>
<script>
var total = document.querySelector('.total')
var prev = document.querySelector('.prev')
var next = document.querySelector('.next')
var select = document.querySelector('select')
var currentNum = 1
var pageSize = 4
var totalNum = 0
function bindHtml() {
var newArr = list.slice((currentNum - 1) * pageSize, currentNum * pageSize)
var htmlStr = ""
for (var i = 0; i < newArr.length; i++) {
htmlStr += `
<li>
<img src="${newArr[i].pic}" alt="">
<p>${newArr[i].name}</p>
<p>城市: ${newArr[i].city}</p>
<p>地址: ${newArr[i].address}</p>
<p>价格: ${newArr[i].price}</p>
<p>时间: ${newArr[i].showTime}</p>
</li>
`
}
document.querySelector('ul').innerHTML = htmlStr
totalNum = Math.ceil(list.length / pageSize)
total.innerHTML = currentNum + '/' + totalNum
}
bindHtml()
prev.onclick = function () {
if (currentNum === 1) return
currentNum--
bindHtml()
}
next.onclick = function () {
if (currentNum === totalNum) return
currentNum++
bindHtml()
}
select.onchange = function () {
currentNum = 1
pageSize = select.value - 0
bindHtml()
}
</script>
</body>
</html>
