电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

js實現有趣的倒計時效果

瀏覽:90日期:2024-04-07 17:10:51

js有趣的倒計時小案例,供大家參考,具體內容如下

js實現有趣的倒計時效果

代碼:

<!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; }.wrap { overflow: hidden; width: 500px; height: 500px; background-color: #eeeeee; margin: 0 auto; }h2 { margin-top: 20px; text-align: center; color: #fff; }input { width: 70px; }.ipt { text-align: center; margin-top: 50px; }.run { width: 100px; height: 100px; background-color: #000; text-align: center; line-height: 100px; color: #fff; font-size: 30px; border-radius: 50%; margin: 30px auto 0; }.juli { text-align: center; margin-top: 30px; }.sytime { text-align: center; margin-top: 60px; font-size: 25px; color: #fff; }.sytime span { font-size: 30px; color: red; }.juli span { font-size: 18px; color: red; } </style></head> <body> <div class='wrap'> <h2>倒計時</h2> <!-- 表單 --> <div class='ipt'> 請輸入: <input type='text'>年<input type='text'>月<input type='text'>日 </div> <!-- 開始按鈕 --> <div class='run'>開始</div> <!-- 距離時間 --> <p class='juli'>現在距離-<span class='julitime'>0000</span>-還剩:</p> <!-- 剩余時間 --> <div class='sytime'> <span>00</span>天 <span>00</span>小時 <span>00</span>分 <span>00</span>秒 </div> </div> <script> // 獲取元素 // 表單 var ipt = document.getElementsByTagName(’input’); // 按鈕 var btn = document.getElementsByClassName(’run’)[0]; // 距離年份 var julitime = document.getElementsByClassName(’julitime’)[0]; // 倒計時 var sytime = document.getElementsByClassName(’sytime’)[0]; var time = sytime.getElementsByTagName(’span’); console.log(ipt, btn, julitime, time); var timerId = null; // 點擊事件 btn.onclick = function() { if (ipt[1].value > 12 || ipt[2].value > 30) {alert(’月份要小于12且日要小于30’);return; } else if (ipt[0].value.trim() == ’’ || ipt[1].value.trim() == ’’ || ipt[2].value.trim() == ’’) {alert(’內容不能為空’);return; } timerId = setInterval(countTime, 1000); } function countTime() { // 獲取輸入年份 var ipty = ipt[0].value; // 獲取輸入月份 var iptm = ipt[1].value; // 獲取輸入日份 var iptd = ipt[2].value; // console.log(ipty, iptm, iptd); var str = ipty + ’-’ + iptm + ’-’ + iptd; // console.log(str); // 賦值給距離時間 julitime.innerHTML = str; // 當前距離1970,1,1毫秒數 var nowDate = +new Date(); // 輸入時間距離1970,1,1毫秒數 var inputFr = +new Date(ipty + ’-’ + iptm + ’-’ + iptd)// 未來減去現在 秒數 var times = (inputFr - nowDate) / 1000; var d = parseInt(times / 60 / 60 / 24) //天 d = d < 10 ? ’0’ + d : d; var h = parseInt(times / 60 / 60 % 24) //時 h = h < 10 ? ’0’ + h : h; var m = parseInt(times / 60 % 60); //分 m = m < 10 ? ’0’ + m : m; var s = parseInt(times % 60); //秒 s = s < 10 ? ’0’ + s : s; // console.log(d, h, m, s); time[0].innerHTML = d; time[1].innerHTML = h; time[2].innerHTML = m; time[3].innerHTML = s; } </script></body> </html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 瑞典Blueair空气净化器租赁服务中心-专注新装修办公室除醛去异味服务! | IPO咨询公司-IPO上市服务-细分市场研究-龙马咨询 | 全钢实验台,实验室工作台厂家-无锡市辰之航装饰材料有限公司 | 无锡市珂妮日用化妆品有限公司|珂妮日化官网|洗手液厂家 | 广域铭岛Geega(际嘉)工业互联网平台-以数字科技引领行业跃迁 | 破碎机锤头_耐磨锤头_合金锤头-鼎成机械一站式耐磨铸件定制服务 微型驱动系统解决方案-深圳市兆威机电股份有限公司 | 电镀电源整流器_高频电解电源_单脉双脉冲电源 - 东阳市旭东电子科技 | 泰安塞纳春天装饰公司【网站】 | 青州开防盗门锁-配汽车芯片钥匙-保险箱钥匙-吉祥修锁店 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 北京租车公司_汽车/客车/班车/大巴车租赁_商务会议/展会用车/旅游大巴出租_北京桐顺创业租车公司 | 冷却塔改造厂家_不锈钢冷却塔_玻璃钢冷却塔改造维修-广东特菱节能空调设备有限公司 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 高楼航空障碍灯厂家哪家好_航空障碍灯厂家_广州北斗星障碍灯有限公司 | OLChemim试剂-ABsciex耗材-广州市自力色谱科仪有限公司 | IHDW_TOSOKU_NEMICON_EHDW系列电子手轮,HC1系列电子手轮-上海莆林电子设备有限公司 | 奥运星-汽车性能网评-提供个性化汽车资讯| 热处理温控箱,热处理控制箱厂家-吴江市兴达电热设备厂 | 纯水设备_苏州皙全超纯水设备水处理设备生产厂家 | 湖南自考_湖南自学考试 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 油液红外光谱仪-油液监测系统-燃油嗅探仪-上海冉超光电科技有限公司 | 期货软件-专业期货分析软件下载-云智赢 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 胶原检测试剂盒,弹性蛋白检测试剂盒,类克ELISA试剂盒,阿达木单抗ELISA试剂盒-北京群晓科苑生物技术有限公司 | 杜康白酒加盟_杜康酒代理_杜康酒招商加盟官网_杜康酒厂加盟总代理—杜康酒神全国运营中心 | 非小号行情 - 专业的区块链、数字藏品行情APP、金色财经官网 | 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | 1000帧高速摄像机|工业高速相机厂家|科天健光电技术 | 筛分机|振动筛分机|气流筛分机|筛分机厂家-新乡市大汉振动机械有限公司 | 电动葫芦|手拉葫芦|环链电动葫芦|微型电动葫芦-北京市凌鹰起重机械有限公司 | 游动电流仪-流通式浊度分析仪-杰普仪器(上海)有限公司 | 挤出熔体泵_高温熔体泵_熔体出料泵_郑州海科熔体泵有限公司 | 网站seo优化_seo云优化_搜索引擎seo_启新网络服务中心 | 搜木网 - 木业全产业链交易平台,免费搜货、低价买货! | 常州减速机_减速机厂家_常州市减速机厂有限公司 | 拉伸膜,PE缠绕膜,打包带,封箱胶带,包装膜厂家-东莞宏展包装 | 纸布|钩编布|钩针布|纸草布-莱州佳源工艺纸布厂 | 上海律师事务所_上海刑事律师免费咨询平台-煊宏律师事务所 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 |