<!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <title>js实现倒计时</title>

    <style>

        div{

         position:absolute;

         width:400px;

         height:50px;

         left:50%;

         top:50%;

     }

 span {

       text-align: center;

       font-size:40px;

 }

    </style>

   </head>

   <body>

     <div id="container">

       <span id="demo"></span>

     </div>

   </body>

 <script>

 function clock(mytime){

     //设置要倒计时的时间

     var stime=new Date(mytime).getTime();

   // 获取目前的时间

     var ntime=new Date().getTime();

     var dtime=stime-ntime;

     if(dtime>0){//可以在此处设置闹钟

     var days = Math.floor(dtime / (1000 * 60 * 60 * 24));

     var hours = Math.floor((dtime% (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

     var minutes = Math.floor((dtime % (1000 * 60 * 60)) / (1000 * 60));

     var seconds = Math.floor((dtime % (1000 * 60)) / 1000);

     document.getElementById("demo").innerHTML = days +"天" +hours +"时" + minutes +"分" +seconds +"秒";

     }

   else{//闹钟好了

     var div=document.getElementById("container");

     var audio=document.createElement("audio");

     div.appendChild(audio);

     audio.src="喜相逢.mp3";

     audio.loop="loop";

     audio.autoplay="autoplay";

   }

 }

 //重复调用

 setInterval(clock,1000)

 </script>

 </html>

JavaScript 倒计时器，闹钟功能的更多相关文章

  1. 【JavaScript】分秒倒计时器

    一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完毕使button变成不可点击状态 详细效果例如以下图.为了说明问题.调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把wi ...

  2. 多线程之倒计时器CountDownLatch和循环栅栏CyclicBarrier

    1.倒计时器CountDownLatch CountDownLatch是一个多线程控制工具类.通常用来控制线程等待,它可以让一个线程一直等待知道计时结束才开始执行 构造函数: public Count ...

  3. [FPGA]Verilog实现可自定义的倒计时器(24秒为例)

    目录 想说的话... 样例_边沿检测计数器 代码讲解 仿真演示 拓展_自定义倒计时数和倒计时间隔 代码讲解 仿真演示 总结 实例_24秒倒计时器 想说的话... 本次实现的是一个24秒倒计时器,功能顾 ...

  4. Java基础教程：多线程基础（5）——倒计时器(CountDownLatch)

    Java基础教程:多线程基础(5)——倒计时器(CountDownLatch) 引入倒计时器 在多线程协作完成业务功能时,有时候需要等待其他多个线程完成任务之后,主线程才能继续往下执行业务功能,在这种 ...

  5. 线程工具类 - CountDownLatch(倒计时器)

    CountDownLatch官方文档 一.原理 CountDownLatch是一个非常实用的多线程控制工具类.Count Down在英文中意为倒计时,Latch意为门闩,可以简单的将CountDown ...

  6. Android AlarmManager类的应用（实现闹钟功能）

    1.AlarmManager,顾名思义,就是“提醒”,是Android中常用的一种系统级别的提示服务,可以实现从指定时间开始,以一个固定的间隔时间执行某项操作,所以常常与广播(Broadcast)连用 ...

  7. Android 实现闹钟功能

      原文地址:Android 实现闹钟功能作者:Android_Learners 一.手机闹钟主要用到了AlarmManager类,AlarmManager类提供了访问系统定时服务的途径,开发人员可以 ...

  8. AlarmManager类的应用（实现闹钟功能）

    1.AlarmManager,顾名思义,就是“提醒”,是Android中常用的一种系统级别的提示服务,可以实现从指定时间开始,以一个固定的间隔时间执行某项操作,所以常常与广播(Broadcast)连用 ...

  9. 使用javascript实现的一些功能

    原文:使用javascript实现的一些功能 今天学习了javascript中的事件,已经接近尾声,可以说明天跨入jquery的学习啦,学习了一周的javascript,感觉还没有掌握其中学习的微妙之 ...

随机推荐

  1. 基于.NET平台常用的框架技术整理

    个人整理 部分收藏于:http://www.cnblogs.com/hgmyz/p/5313983.html 自从学习.NET以来,优雅的编程风格,极度简单的可扩展性,足够强大开发工具,极小的学习曲线 ...

  2. url传递中文的解决方案总结

    File文件控件,选中文件(图片,flash,视频)即立即预览显示 .Net刷新页面的几种方式 Attributes.Add用途与用法(C#) url传递中文的解决方案总结 byte[] bytes ...

  3. jquery常规选择器再学习_1123

    jquery选择器基本模拟css语法来获取元素: 1 常规选择器 id 常见的元素标签 class 2 进阶选择器 组合选择器 常规选择器多个组合在一起 通配符选择器 * ,通常用于局部环境下 后代选 ...

  4. Aspose.Cells相应操作及下载

    Aspose.Cells相应操作 1,上传 1.1 Workbook Workbook workBook = new Workbook(); 属性: 名称 值类型 说明 Colors Color[] ...

  5. vue抽取公共方法———方法一

    方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...

  6. Deepin for Linux 下串口调试交换机

    最近因工作需要,在淘宝购买了一条宇泰的串口线:USB to RS232 之所以选择这款,主要是它支持 Windows.Linux.mac Linux机是Deepin for Linux,算是国产比较好 ...

  7. CentOS7 PXE安装批量安装操作系统

    1.安装相关软件 yum -y install tftp-server httpd dhcp syslinux 2.配置DHCP cp /usr/share/doc/dhcp-4.2.5/dhcpd. ...

  8. zip---解压缩文件

    zip命令可以用来解压缩文件,或者对文件进行打包操作.zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件. 语法 zip(选项)(参数) 选项 -A:调整可执行的自 ...

  9. POJ——T3160 Father Christmas flymouse

    Time Limit: 1000MS   Memory Limit: 131072K Total Submissions: 3496   Accepted: 1191 缩点,然后每个新点跑一边SPFA ...

  10. 洛谷 P1732 [TJOI2011]序列

    P1732 [TJOI2011]序列 题目描述 一指数列A={a1, a2, …, an},根据数列A计算数列B={b1, b2, …, bn},其中: 求\sum\limits^n_{i=1} b_ ...