JS_Math对象_日期对象_function randomfn-CSDN博客

本文链接：https://blog.csdn.net/ysj94s7/article/details/122967570

本文介绍了JavaScript中的ES5新增方法，包括forEach、map等，并探讨了严格模式和ASCII中文编码。接着讲解了字符串的一些不常用方法如includes、concat。此外，深入讨论了Math对象中的各种数学运算方法，如pow、max、min等。同时，展示了如何生成随机颜色和模拟双色球抽奖。最后，讲解了日期对象的使用，包括获取当前时间、格式化日期和实现倒计时功能。

摘要由CSDN通过智能技术生成

01-复习
ES5新增方法
- forEach map filter some every indexOf
严格模式
- 'use strict' 代码规范
ASCII中文位置
- 4e00 - 9fa5 0x 表示16进制
字符串常用方法
- indexOf lastIndexOf split slice replace toUpperCase toLowerCase

钱币格式字符串转对象对象转字符串

02-字符串不常用方法
不太常用
- includes concat substring charAt charCodeAt search match
<script>
// 不太常用
// - includes concat substring charAt charCodeAt search match

var str = 'hello qianfeng'

// includes
// - 查找：返回布尔值
// console.log(str.includes('o')) // true
// console.log(str.includes('c')) // false

// concat
// - 连接字符串
// console.log(str.concat('abc'))
// console.log(str + 'abc')

// substring
// - 复制: 第一个参数是开始位置，第二个参数是结束位置
// console.log(str.substring(1, 5))

// charAt
// - 查找下标返回对应的字符串
// console.log(str.charAt(4))

// charCodeAt
// - 查找下标返回对象的ascii码
// console.log(str.charCodeAt(4))

// search
// - 搜索
// console.log(str.search('o'))

// match
// - 匹配配合正则使用匹配成功返回一个新数组
console.log(str.match('o'))
</script>

03-Math对象
Math
- 数学方法
// pow
// - 幂
// console.log(Math.pow(2, 10))

// max
// - 最大值
// console.log(Math.max(12, 5, 7, 99, 103, 1))

// min
// - 最小值
// console.log(Math.min(12, 5, 7, 99, 103, 1))

// sqrt
// - 开平方
// console.log(Math.sqrt(10))

// abs
// - 绝对值
// console.log(Math.abs(-5))

// floor
// - 向下取整
// console.log(Math.floor(12.9)) // 12
// console.log(Math.floor(-12.9)) // 13

// ceil
// - 向上取整
// console.log(Math.ceil(12.9)) // 13
// console.log(Math.ceil(-12.9)) // 12

// round
// - 四舍五入
// console.log(Math.round(12.9)) // 13
// console.log(Math.round(-12.5)) // -12

// PI
// - 圆周率
// console.log(Math.PI)

// random
// - 随机数
// - 重复几率，中彩票的60倍
// - 0 - 1
// - 0有可能出现， 1永远不会出现 0.999999999999999
// console.log(Math.random())
// console.log(Math.random() * 10)
// console.log(parseInt(Math.random() * 10))
15 - 25之间随机数
function randomFn(n, m) {
// n = 15
// m = 25
return parseInt(Math.random() * (m - n) + n)
}

var n = randomFn(15, 25)
console.log(n)

04-蹦迪（随机颜色）
<script>
document.body.style.background = 'rgb(' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ',' + parseInt(Math.random() * 256) + ')'
</script>

05-双色球
页面刷新触发随机数字
<style>
body {
display: flex;
}

p {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid red;
line-height: 30px;
text-align: center;
color: red;
margin: 10px;
}

#blue {
border-color: blue;
color: blue;
}
</style>
</head>

<body>
<p id="txt1">1</p>
<p id="txt2">1</p>
<p id="txt3">1</p>
<p id="txt4">1</p>
<p id="txt5">1</p>
<p id="txt6">1</p>
<p id="blue">1</p>
<script>
function randomFn(n, m) {
return parseInt(Math.random() * (m - n) + n)
}

function toDou(n) {
return n < 10 ? '0' + n : n
}

var arr = []

while (arr.length < 6) {
var n = randomFn(1, 34)
if (arr.indexOf(n) === -1) {
arr.push(n)
}
}

txt1.innerHTML = toDou(arr[0])
txt2.innerHTML = toDou(arr[1])
txt3.innerHTML = toDou(arr[2])
txt4.innerHTML = toDou(arr[3])
txt5.innerHTML = toDou(arr[4])
txt6.innerHTML = toDou(arr[5])

blue.innerHTML = toDou(randomFn(1, 17))
</script>
</body>

05-双色球2
点击事件触发随机数字
<style>
body {
display: flex;
}

p {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid red;
line-height: 30px;
text-align: center;
color: red;
margin: 10px;
}

#blue {
border-color: blue;
color: blue;
}
</style>
</head>

<input type="button" value="再来一注" id="btn">
<script>
function randomFn(n, m) {
return parseInt(Math.random() * (m - n) + n)
}

function toDou(n) {
return n < 10 ? '0' + n : n
}

function fn() {
var arr = []

while (arr.length < 6) {
var n = randomFn(1, 34)
if (arr.indexOf(n) === -1) {
arr.push(n)
}
}

txt1.innerHTML = toDou(arr[0])
txt2.innerHTML = toDou(arr[1])
txt3.innerHTML = toDou(arr[2])
txt4.innerHTML = toDou(arr[3])
txt5.innerHTML = toDou(arr[4])
txt6.innerHTML = toDou(arr[5])

blue.innerHTML = toDou(randomFn(1, 17))
}

fn()

btn.onclick = function () {
fn()
}
</script>
</body>

06-日期对象
用数字格式显示当前时间
<script>
// 日期对象
// - new Date()
// - 获取的本地电脑时间
// console.log(new Date())

// 2022/2/16
var now = new Date()

// 年
var year = now.getFullYear()

// 月 0 - 11
var month = now.getMonth() + 1

// 日
var day = now.getDate()

// 星期
var week = now.getDay()

// 时
var hours = now.getHours()

// 分
var m = now.getMinutes()

// 秒
var s = now.getSeconds()

// 毫秒 1000毫秒 = 1秒
var ms = now.getMilliseconds()

console.log(year + '年' + month + '月' + day + '日星期' + week + ' ' + hours + ':' + m + ':' + s + ' ' + ms)
</script>

06-日期对象2
用函数封装
<body>
<p id="txt"></p>
<script>
// 日期对象
// - new Date()
// - 获取的本地电脑时间
// console.log(new Date())

// 2022/2/16

setInterval(function () {
var now = new Date()

// 年
var year = now.getFullYear()

// 月 0 - 11
var month = now.getMonth() + 1

// 日
var day = now.getDate()

// 星期
var week = now.getDay()

// 时
var hours = now.getHours()

// 分
var m = now.getMinutes()

// 秒
var s = now.getSeconds()

// 毫秒 1000毫秒 = 1秒
var ms = now.getMilliseconds()

txt.innerHTML = year + '年' + month + '月' + day + '日星期' + week + ' ' + hours + ':' + m + ':' + s + ' '
}, 1000)
</script>
</body>

07-倒计时
<body>
<p id="txt"></p>
<script>
setInterval(function () {
// 未来时间
var target = new Date(2022, 4, 1, 0, 0, 0, 0)

// 当前时间
var now = new Date()

// 时间戳
// - 1970 1 1 0 0 0 格林威治时间北京事件和差8个小时
// - 毫秒数
// console.log(target.getTime())
// console.log(now.getTime())

var reduce = parseInt((target.getTime() - now.getTime()) / 1000)

// 1分钟 = 60秒
// 1小时 = 3600秒
// 1天 = 86400秒
// console.log(reduce)

// 天
var day = parseInt(reduce / 86400)

// 小时
var h = parseInt(reduce % 86400 / 3600)

// 分钟
var m = parseInt(reduce % 3600 / 60)

// 秒
var s = reduce % 60

txt.innerHTML = '距离5月1日还有:' + day + '天' + h + '小时' + m + '分钟' + s + '秒'
}, 1000)
</script>
</body>

08-中文日期格式
<script>
// 2022-2-16 14:23:30
// 二零二二年二月十六日十四时二十三分三十秒

var arr = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九', '十']

function formatYear(n) {
var a, b, c, d
a = parseInt(n / 1000)
b = parseInt(n / 100) % 10
c = parseInt(n / 10) % 10
d = n % 10
// console.log(arr[a] + arr[b] + arr[c] + arr[d])
return arr[a] + arr[b] + arr[c] + arr[d]
}
var cnYear = formatYear(2022)

// 其他数值
// - 月份日期小时分钟
// - 0 - 10
// - 11 - 19
// - 20 30 40 50
// - 21 - 29 31 - 39 41 - 49 51 - 59

function formatNumber(n) {
if (n <= 10) {
return arr[n]
} else if (n > 10 && n < 20) {
// 十几
return arr[10] + arr[n % 10]
} else if (n === 20 || n === 30 || n === 40 || n === 50) {
return arr[n / 10] + arr[10]
} else {
// 21
return arr[parseInt(n / 10)] + arr[10] + arr[n % 10]
}
}
var cnMonth = formatNumber(2)
var cnDay = formatNumber(16)
console.log(cnYear + '年' + cnMonth + '月' + cnDay + '日')
</script>