(三) 日期对象常用方法和插件

最新推荐文章于 2022-08-01 14:55:37 发布

超级小丑_Supclown

最新推荐文章于 2022-08-01 14:55:37 发布

阅读量338

点赞数

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/m0_57860459/article/details/122257211

版权

这篇博客介绍了JavaScript中创建和操作日期对象的方法，包括通过不同参数创建日期、常用的日期方法，如getFullYear、getMonth等。还展示了如何格式化日期、比较日期以及使用moment.js库进行日期处理。此外，文章还涉及Math对象的常用方法，如随机数生成，并给出了实际应用场景，如生成指定范围内的随机数和处理手机号码显示。最后，文章提到了用户输入手机号码的验证，确保输入是11位数字并展示验证码发送提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建日期对象
日期常用方法
日期函数应用
日期函数库 moment.js

1.创建日期的三种方法

<script>
  // 方式1: 无参数
  var date = new Date();
  console.log('date',date);

  // 方式2: 参数为日期数字字符串
  var date2 = new Date('2020-12-12 00:00:00');
  console.log('date2',date2);

  // 方式3: 参数为数字0, 表示1970-01-01:8:00:00
  var date3 = new Date(0);
  console.log('date3',date3);

  // 方式4: 参数为距离1970年的毫秒数, 1970-01-02
  var date4 = new Date(86400000); 
  console.log('date4',date4);
  // 2021-12-26
  var date5 = new Date(1640506912716);  
  console.log('date5',date5);
</script>

2.日期常用方法

new Date()
getFullYear()
getMonth() + 1
getDate()
getHours()
getMinutes()
getSeconds()
getDay()
getTime()
Date.now()

var date = new Date();
var Y = date.getFullYear(); // 年
var M = date.getMonth(); // 月份
var D = date.getDate(); // 日
var h = date.getHours(); // 时
var m = date.getMinutes(); // 分
var s = date.getSeconds(); // 秒
var d = date.getDay(); // 星期
var time = date.getTime(); // 1970到现在的毫秒数
var time2 = Date.now(); // 同上
console.log('年',Y);
console.log('月',M+1);
console.log('日',D);
console.log('时',h);
console.log('分',m);
console.log('秒',s);
console.log('星期',d);
console.log('毫秒数',time);
console.log('毫秒数',time2);

3. 日期函数应用

1.格式化日期

/**
 * str可以是日期字符串,可以是毫秒数, 可以不传
 */
function formatDate(str) {
  var date;
  if (!str) {
    date = new Date();
  } else {
    date = new Date(str);
  } 
  var Y = date.getFullYear();
  var M = date.getMonth()+1;
  var D = date.getDate();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  M = M<10?`0${M}`:M;
  D = D<10?`0${D}`:D;
  h = h<10?`0${h}`:h;
  m = m<10?`0${m}`:m;
  s = s<10?`0${s}`:s;
  return `${Y}年${M}月${D}日 ${h}:${m}:${s}`
}
var date1 = formatDate();  // 不传参数
console.log('date1',date1);
var date2 = formatDate('2020-11-11 11:11:11');  // 传日期字符串
console.log('date2',date2);

2.比较日期(年纪越小,毫秒数越大)

var oDate = new Date('2001-10-06');
var yDate = new Date('2001-11-17');
console.log(oDate-yDate); // -3628800000

4.日期函数库

<!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>
  <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
</head>
<body>
  <script>
    var date1 = moment('2001-11-17').format('YYYY-MM-DD HH:mm:ss'); 
    document.write('陈*元的生日是: '+date1);

    var date2 = moment().add(3, 'days').format('MM-DD');
    document.write('<br/>')
    document.write('三天后是: '+date2);
  </script>
</body>
</html>

应用 :在页面上绑定一个点击事件,用来每天打卡, 用户点击打卡按钮, 若点击时间是每天的8:55(不包含)-9:00(包含), 弹出迟到, 若点击时间是9:00(不包含)之后, 弹出严重迟到

<!DOCTYPE html>
<html lang="en">

<body>  
	<button onclick="sign()">打卡</button>
	 
	<script> 
		function sign() {
			var date = new Date();
			// 获取今天的日期
			var today = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
			// 创建2021-12-28 8:55:00日期对象
			var date1 = new Date(today + ' 8:56:00');
			// 创建2021-12-28 9:00:00日期对象
			var date2 = new Date(today + ' 9:01:00');
			if(date-date2>=0) {
				alert('严重迟到');
			} else if (date-date1 >= 0) {
				alert('迟到');
			} else {
				alert('准时到')
			}
		}
	</script>
</body> 
</html>

(四) Math 对象

常用方法

Math.round(x) // 四舍五入
Math.abs(x) // 求 x 的绝对值
Math.floor(x) // 向下取整
Math.ceil(x) // 向上取整
Math.random() // 随机数
其它:正弦、余弦、平方根...

相关方法

toFixed(x) 保留x位小数
parseInt 把小数变整数

应用 : 封装一个函数, 每运行一次就返回一个某个范围内的随机数(比如5-20);

<!DOCTYPE html>
<html lang="en">

<body> 
	<input type="text" id="inp1"> -
	<input type="text" id="inp2">
	<button onclick="madeNum()">生成随机数</button>
	<p class="num"></p>

	<script>
		// 生成随机数的方法
		function madeNum() {
			var min = document.querySelector('#inp1').value;
			var max = document.querySelector('#inp2').value;
			var num = Math.random() * (max - min) + min*1;
			num = Math.ceil(num);
			document.querySelector('.num').innerText = num;
		}
	</script>
</body> 
</html>

// 纯js
<script>
function madeNum(min,max) { 
    var num = Math.random() * (max - min) + min*1;
    num = Math.ceil(num); 
    return num;
}

var res1 = madeNum(2,10);
var res2 = madeNum(100,200);
console.log(res1);
console.log(res2);
</script>

2.将字符串 "13800000000" 变成"138****0000"

<!DOCTYPE html>
<html lang="en"> 
<body>  
	<input type="text" maxlength="11"> <button onclick="sliceStr()">改变</button>
	<p class="tel"></p>
	 <script>
		 function sliceStr() {
			 // 获取手机号码
			var phone = document.querySelector('input').value;
			// 截取前三位
			var str1 = phone.substr(0,3);
			var str2 = phone.slice(-4);
			var str = str1 + '****' + str2;
			document.querySelector('.tel').innerHTML = str;
		 }
	 </script>
</body> 
</html>

3.用户输入手机号码后,点击获取验证码, 弹出"验证码已发送到尾号为xxxx(4位)的手机上, 请注意查收"

把用户输入的内容前后去空格
检查用户输入的是否是11位的数字

<!DOCTYPE html>
<html lang="en">
<head> 
	<title>Document</title>
</head>
<body>
	<input placeholder="请输入手机号码"/> <button onclick="checkTel()">获取验证码</button>
 
	<script>
		function checkTel() {
			var tel = document.querySelector('input').value;
			// trim去掉前后空格
			tel = tel.trim();
			if (tel.length !== 11) {
				alert('请输入正确的手机号码')
			} else {
				alert(`验证码已发到尾号为${tel.slice(-4)}的手机号码上`);
			}
		}
	</script>
</body>
</html>