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>
<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>
<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>
08-中文日期格式2
<body>
<p id="txt"></p>
<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]
}
// 其他数值
// - 月份 日期 小时 分钟
// - 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]
}
}
setInterval(function () {
var now = new Date()
var cnYear = formatYear(now.getFullYear())
var cnMonth = formatNumber(now.getMonth() + 1)
var cnDay = formatNumber(now.getDate())
var cnH = formatNumber(now.getHours())
var cnM = formatNumber(now.getMinutes())
var cnS = formatNumber(now.getSeconds())
txt.innerHTML = cnYear + '年' + cnMonth + '月' + cnDay + '日' + ' ' + cnH + '时' + cnM + '分' + cnS + '秒'
}, 100)
</script>
</body>