jq实现倒计时功能

效果如下:

在这里插入图片描述

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jq实现倒计时功能</title>
</head>
<body>
<span class="tit">倒计时:</span>
<div id="countdown">
    <span class="time-item">0</span>
    <span></span>
    <span class="time-item">0</span>
    <span></span>
    <span class="time-item">0</span>
    <span></span>
    <span class="time-item">0</span>
    <span></span>
</div>

<script src="jquery.js"></script>	
<script>	

countDown('2022/12/30 23:59:59','#countdown')

function countDown(date,ele){
	// 天,时,分,秒
	var day = 0;
	var hour = 0;
	var minu= 0;
	var sec = 0;
	var timeStr = []

	var time_start = new Date().getTime()
	var time_end = new Date(date).getTime()

	var time_distance = time_end - time_start

	if(time_distance > 0){

		day = Math.floor(time_distance/86400000)
		time_distance -= day * 86400000

		hour = Math.floor(time_distance/3600000)
		time_distance -= hour * 3600000

		minu = Math.floor(time_distance/60000)
		time_distance -= minu * 60000

		sec = Math.floor(time_distance/1000)
		time_distance -= sec *1000


		timeStr.push(day,hour,minu,sec)

		for (let i = 0; i < timeStr.length; i++){
			if(timeStr[i] < 10){
				timeStr[i] = '0' + timeStr[i]
			} 
			$(ele).find(".time-item").eq(i).text(timeStr[i])
		}
		setTimeout(function(){
			countDown(date,ele)
		},1000)

	}
}

</script>

</body>
</html>

拓展:

Date的常用对象方法

方法描述
getFullYear()从 Date 对象以四位数字返回年份。
getMonth()从 Date 对象返回月份 (0 ~ 11)。
getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)。
getHours()返回 Date 对象的小时 (0 ~ 23)。
getMinutes()返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()返回 Date 对象的毫秒(0 ~ 999)。
getTime()返回 1970 年 1 月 1 日至今的毫秒数。

html:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>js的Date()对象</title>
</head>
<body>


<script src="jquery.js"></script>		

<script type="text/javascript">

	console.log('Date 对象:',new Date()) // Date 对象用于处理日期与时间。
	console.log('年:', new Date().getFullYear()) // 可返回一个表示年份的 4 位数字。
	console.log('月:', new Date().getMonth()+1) // getmonth()的返回值是 0(一月) 到 11(十二月) 之间的一个整数!获取的其实是索引值,他的值是从0开始的,所以要加1才会得到真正的月份。
	console.log('日:', new Date().getDate()) // 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
	console.log('星期:', new Date().getDay()) // 从 Date 对象返回一周中的某一天 (0 ~ 6)。
	console.log('小时:', new Date().getHours()) // 返回 Date 对象的小时 (0 ~ 23)。
	console.log('分钟:', new Date().getMinutes()) // 返回 Date 对象的分钟 (0 ~ 59)。
	console.log('秒:', new Date().getSeconds()) // 返回 Date 对象的秒数 (0 ~ 59)。
	console.log('毫秒:', new Date().getMilliseconds()) // 返回 Date 对象的毫秒(0 ~ 999)。
	console.log('1970 年 1 月 1 日至今的毫秒数:', new Date().getTime()) // 返回 1970 年 1 月 1 日至今的毫秒数。
</script>
</body>
</html>

输出如下:
在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
很高兴为您解答问题!要使用 jq 实现登录注册功能,您需要编写 JavaScript 代码来处理表单数据,然后使用 jq 发起 Ajax 请求将表单数据发送到后端。以下是一个简单的示例代码: HTML: ```html <form id="login-form"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <button type="submit">登录</button> </form> <form id="register-form"> <input type="text" name="username" placeholder="用户名"> <input type="password" name="password" placeholder="密码"> <input type="password" name="confirm-password" placeholder="确认密码"> <button type="submit">注册</button> </form> ``` JavaScript: ```javascript $(function() { // 登录 $('#login-form').submit(function(event) { event.preventDefault(); var username = $(this).find('input[name="username"]').val(); var password = $(this).find('input[name="password"]').val(); $.ajax({ url: '/login', method: 'POST', data: { username: username, password: password }, success: function(response) { // 处理登录成功后的逻辑 }, error: function() { // 处理登录失败后的逻辑 } }); }); // 注册 $('#register-form').submit(function(event) { event.preventDefault(); var username = $(this).find('input[name="username"]').val(); var password = $(this).find('input[name="password"]').val(); var confirmPassword = $(this).find('input[name="confirm-password"]').val(); if (password !== confirmPassword) { alert('两次输入的密码不一致'); return; } $.ajax({ url: '/register', method: 'POST', data: { username: username, password: password }, success: function(response) { // 处理注册成功后的逻辑 }, error: function() { // 处理注册失败后的逻辑 } }); }); }); ``` 这里我们使用了 jQuery 的 `ajax` 方法来发送表单数据,并且阻止了默认的表单提交行为(调用了 `preventDefault` 方法)。前端的代码已经实现了登录注册功能,接下来您需要在后端实现相应的接口来处理表单数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值