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

您的位置:首頁技術(shù)文章
文章詳情頁

js實(shí)現(xiàn)有趣的倒計(jì)時(shí)效果

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

js有趣的倒計(jì)時(shí)小案例,供大家參考,具體內(nèi)容如下

js實(shí)現(xiàn)有趣的倒計(jì)時(shí)效果

代碼:

<!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>倒計(jì)時(shí)</h2> <!-- 表單 --> <div class='ipt'> 請(qǐng)輸入: <input type='text'>年<input type='text'>月<input type='text'>日 </div> <!-- 開始按鈕 --> <div class='run'>開始</div> <!-- 距離時(shí)間 --> <p class='juli'>現(xiàn)在距離-<span class='julitime'>0000</span>-還剩:</p> <!-- 剩余時(shí)間 --> <div class='sytime'> <span>00</span>天 <span>00</span>小時(shí) <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]; // 倒計(jì)時(shí) var sytime = document.getElementsByClassName(’sytime’)[0]; var time = sytime.getElementsByTagName(’span’); console.log(ipt, btn, julitime, time); var timerId = null; // 點(diǎn)擊事件 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(’內(nèi)容不能為空’);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); // 賦值給距離時(shí)間 julitime.innerHTML = str; // 當(dāng)前距離1970,1,1毫秒數(shù) var nowDate = +new Date(); // 輸入時(shí)間距離1970,1,1毫秒數(shù) var inputFr = +new Date(ipty + ’-’ + iptm + ’-’ + iptd)// 未來減去現(xiàn)在 秒數(shù) 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) //時(shí) 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>

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: hc22_hc22价格_hc22哈氏合金—东锜特殊钢 | 联系我们老街华纳娱乐公司官网19989979996(客服) | 坏男孩影院-提供最新电影_动漫_综艺_电视剧_迅雷免费电影最新观看 | 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 校服厂家,英伦校服定做工厂,园服生产定制厂商-东莞市艾咪天使校服 | 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 塑胶地板-商用PVC地板-pvc地板革-安耐宝pvc塑胶地板厂家 | 400电话_400电话申请_866元/年_【400电话官方业务办理】-俏号网 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 | 北京百度网站优化|北京网站建设公司-百谷网络科技 | 吉祥新世纪铝塑板_生产铝塑板厂家_铝塑板生产厂家_临沂市兴达铝塑装饰材料有限公司 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 高压包-点火器-高压发生器-点火变压器-江苏天网 | 无痕胶_可移胶_无痕双面胶带_可移无痕胶厂家-东莞凯峰 | 太原装修公司_山西整装家装设计_太原室内装潢软装_肖邦家居 | 超声波分散机-均质机-萃取仪-超声波涂料分散设备-杭州精浩 | 钢板仓,大型钢板仓,钢板库,大型钢板库,粉煤灰钢板仓,螺旋钢板仓,螺旋卷板仓,骨料钢板仓 | 体检车_移动CT车_CT检查车_CT车_深圳市艾克瑞电气有限公司移动CT体检车厂家-深圳市艾克瑞电气有限公司 | 冷柜风机-冰柜电机-罩极电机-外转子风机-EC直流电机厂家-杭州金久电器有限公司 | 掺铥光纤放大器-C/L波段光纤放大器-小信号光纤放大器-合肥脉锐光电技术有限公司 | 找果网 | 苹果手机找回方法,苹果iPhone手机丢了找回,认准找果网! | 硫化罐_蒸汽硫化罐_大型硫化罐-山东鑫泰鑫智能装备有限公司 | FFU_空气初效|中效|高效过滤器_空调过滤网-广州梓净净化设备有限公司 | 厂房出租-厂房规划-食品技术-厂房设计-厂房装修-建筑施工-设备供应-设备求购-龙爪豆食品行业平台 | 伺服电机维修、驱动器维修「安川|三菱|松下」伺服维修公司-深圳华创益 | 防水套管厂家-柔性防水套管-不锈钢|刚性防水套管-天翔管道 | 爱佩恒温恒湿测试箱|高低温实验箱|高低温冲击试验箱|冷热冲击试验箱-您身边的模拟环境试验设备技术专家-合作热线:400-6727-800-广东爱佩试验设备有限公司 | 硅胶管挤出机厂家_硅胶挤出机生产线_硅胶条挤出机_臣泽智能装备 贵州科比特-防雷公司厂家提供贵州防雷工程,防雷检测,防雷接地,防雷设备价格,防雷产品报价服务-贵州防雷检测公司 | 蔡司三坐标-影像测量机-3D扫描仪-蔡司显微镜-扫描电镜-工业CT-ZEISS授权代理商三本工业测量 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 油液红外光谱仪-油液监测系统-燃油嗅探仪-上海冉超光电科技有限公司 | 海尔生物医疗四川代理商,海尔低温冰箱四川销售-成都壹科医疗器械有限公司 | 上海深蓝_缠绕机_缠膜机-上海深蓝机械装备有限公司 | 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 304不锈钢无缝管_不锈钢管厂家 - 隆达钢业集团有限公司 | 炭黑吸油计_测试仪,单颗粒子硬度仪_ASTM标准炭黑自销-上海贺纳斯仪器仪表有限公司(HITEC中国办事处) | 上海质量认证办理中心| 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 | 电动手术床,医用护理床,led手术无影灯-曲阜明辉医疗设备有限公司 | 国际线缆连接网 - 连接器_线缆线束加工行业门户网站 | 【灵硕展览集团】展台展会设计_展览会展台搭建_展览展示设计一站式服务公司 |