先简单一下这个计时器背景
 
大学时期打了几年的辩论赛。一直有这个情怀在。看到那些孩子们孩子用很多年前的计时软件。就考虑闲暇时做一个新的计时器。但首先存在一个问题。实现多功能的方法要不做成微信小程序。或者是做成web项目上传云服务器。但是考虑成本和维护。就先做一个不带数据库和后台的页面。赛制和环节通过点击之页面上的button组合需要的赛制环节模式。
 
需要说明的是
 
首先 这不是我的原生开发。这是我在gitee上拿到一个开源的项目 进行加工。优化了一下页面效果和逻辑。添加了一些逻辑。本来想用vue再加工一下。但是还要上班工作量大了点。下次周末再来优化。
 
先上几张截图
 

 
 
 
 
 
 
这里感谢下原作者
 

 首先作者是一名高中学生。这一点我真的佩服。虽然原作者只是用了jq 原生js 和bootstrap 。没用框架。但是作为一名还未读大学的孩子。确实能写到这种程度还是很佩服的。（我高中那会就会C语言的if和for）。当然这也不是这个孩子的原生开发。还有之前的作者MrAMS。一个github上的做作者。
 
还需要改进的地方
 
那确实太多了，比如计时的动画提示，还有赛制信息没做。准备加个后台存数据。之前原来版本用了perl更新数据。我觉得麻烦了点，改成了本地存储。但未来还是要用到数据库和后台的。等有空用vue改写一下。然后价格后台啥的，之前看到一个自带ai评分的一个项目。准备拿来一起试试。既然是为了情怀改写的代码，那当然有空要继续做下去
 
源码地址
 
有空会一直更新代码的 也欢迎曾经是辩手的程序员们一起加入进来。为了热爱 也为了情怀
 gitee源码地址，可以直接克隆下载
 或者复制该地址：https://gitee.com/beck0514001/my-demo-project/tree/debateTimer/

计时器和倒计时器的设计与实现
 
摘 要
 时间的观念在现在的时代越来越重要，考试要定时完成，炒菜做饭要计时完成，甚至连煮包泡面都要计时才能更加美味。制作计时器对我们越来越重要。
 
本计时器中的倒计时使用的for函数输出把时间用00:00:00这种格式输出，使用Sleep来让整个程序暂停一秒，来完成计时一秒的功能，然后用/r覆盖掉上一行输出一秒后的剩余倒计时，在倒计时变为00:00:00时，输出时间到并用/a响铃。计时器采用类似的计时方法，不一样的是这次使用system（“cls”）清屏，然后重新输出下一次时间，用函数kbhit确定是否有键盘敲击，如果有将其录入，当这个值和所确定的停止值相同时，将退出for函数，停止计时，并输出时间。
 
本程序的编写环境是VC++6.0，目前此程序实现了计时器和倒计时器的功能。每次只能执行一个功能。
 关键词： vc6.0，C语言，函数，计时器，倒计时器。
 
 
1 引言
 
1.1关于工程实践
 
在我看来，整个工程实践中是让我们了解程序设计的整个流程，以及怎么实现这项功能，如何利用所学的c语言知识，来完成一个属于自己的小程序，小软件，在其中遇到的问题将其总结，最后将成为很好的学习笔记。
 
1.2 课题背景
 
经过一个学期的C语言课程学习，我们已经掌握了基本的C语言编程，而如何使用这些编程知识，让其变得有用十分重要。于是我们想到了开发一个计时倒计时的小程序。
 
在人们生活中，时间是很重要的一种东西。无论什么都离不开时间。倒计时和计时更是如此。通过倒计时计算考试时间，计算煮饭煮菜的时间，通过计时计算跑步时间，计算做题讲课的时间。时间观念对我们来说越来越重要，制作计时器对我们也越来越重要，所以让我们来看看如何制作一个计时装置，即一个计时器和一个倒计时器。
 
2 需求分析
 
2.1程序目标
 
完成一个简单的计时器和倒计时器，要求实现最基本的计时和倒计时程序，当用户打开程序后通过提示输入数字1 2 3进行三种操作。
 
（1）输入数字1进行倒计时操作，通过输入00:00:00这种格式的时间倒计时，在时间到的时候提示“时间到！”，同时响铃。
 （2）输入数字2进行计时器操作，通过提示进入计时程序，并通过按Esc键停止计时，并输出计时时间。
 
2.2 开发环境及工具
 
2.2.1 运行环境
 
Windows10
 也可以在一台内存大于800k内存的位系统电脑运行。
 
2.2.2 编程软件介绍
 
Microsoft Visual C++60.：调用系统文件#include <stdio.h>实现输入输出、#include <stdlib.h>使用退出exit函数、#include <time.h>读取系统时间通过结构体time_t实现、#include <Windows.h>
 
3 系统总体结构设计
 
3.1 基本简介
 
本程序分为四个模块，除了程序的main函数以外，分别分为面板，计时和倒计时三部分。其中面板模块就是呈现给用户的主界面，计时模块负责实现记录在给定时间之间的时间长度，以及开始计时和结束计时的输入输出，而倒计时则是专门负责在倒计时的时间录入和时间到时的提示以及响铃。
 下面是程序流程图：
 
 
3.2 系统功能模块及设计
 
3.2.1 数据结构设计
 
主体程序中设计除了选择以外，输出“输入错误”的程序后可以重新输入选择。
 
 
3.2.2 面板模式介绍
 
进入程序后，输出：
 
“计时器&&倒计时器
 本程序是由网络空间安全学院学生工程实践研发
 ==== 计时方式 ====
 1. 倒计时器
 2. 计时器
 请输入你选择的代号：”
 
几行字样。
 
通过用户输入1 或 2来控制进入计时器还是倒计时器，如果用户不小心输入错误将提示“不好意思选错咯~”并在此进行选择，面板模块只是起到将其他模块链接起来的作用，在后期需要追加更多功能时也可以由面板模块连接。
 
3.2.3 倒计时器模块介绍
 
倒计时器将承担输入时间并进行倒计时的功能，用户将在此模块界面直接输入格式为“00:01:09”的时间进行倒计时，输入正确时间正确，将输出“倒计时开始！”，当时间变成“00:00:00”时，输出“时间到！”并响铃，之后按任意键退出程序。
 
3.2.4 计时器模块介绍
 
计时器将承担计算从用户输入开始标记到用户输入结束标记之间的时间的功能，用“计时时长为：00:00:05”的格式输出所计的时间。
 
4 系统详细设计与实现
 
4.1界面模块设计与实现
 
作为最简单的计时和倒计时程序，使用vc6.0的默认程序窗口。
 
4.2 模块设计与实现
 
4.2.1主体模块设计与实现
 
在主体之前定义其他模块的函数。通过while函数实现如果输入错误那么便接受用户的重新输入选择，通过switch函数选择进入计时器功能的函数还是倒计时器功能的函数。作为main函数，在之后追加函数或修改时更加容易。
 
4.2.2 面板模块设计与实现
 
进入程序后，由面板模块的函数通过printf函数输出边界图形字符以及欢迎界面，并介绍该程序选择方法（输入数字1 or 2）具体如下图。提示用户进行输入，之后通过while函数和switch函数进行选择。（while函数用于当输入错误时可以重新输入）
 
 
4.2.3 倒计时器模块的设计与实现
 
倒计时器的代码在面部模式的函数中，通过printf输出提示输入倒计时时间（格式：00:01:08），当输入正确后，输出“倒计时开始”并输出“00:01:08”格式一秒一秒减少的时间，当时间变为“00:00:00”时，响铃并输出“时间到！”三字。
 
 
4.2.4 计时器模块设计与实现
 
模块分为两部分，一部分在主体函数里通过输入选择计时模式开始计时，然后进入计时器函数，用Sleep和system（”cls”）和while循环通过（00:00:00）格式下秒数分钟数，进行计时，通过函数kbhit、if、getch停止计时跳出循环，完成计时。
 
 
5 系统测试与分析
 
5.1 测试
 
根据电脑所给的提示出现语法错误，缺少变量的定义大多的语法错误在通过书本或网络的参考下能够修改。主要是平时看书不仔细、不太注意而产生的。如没有注意具体数据使用。
 
5.2 调试过程中遇到的主要问题
 
if，while，switch三个循环中容易缺少括号，进行修改后括号更加容易出错。这直接导致在vc中编译时出现很多错误。
 time_t结构体出现在#include <time.h>头文件里。
 <conio.h>头文件用来 kbhit getch
 <Windows.h>头文件用来 sleep
 
结论
 
经过了四个星期的c语言程序设计终于在老师的细心指导和同学的热情帮助下基本完成了计时器和倒计时器的设计修改任务。
 程序设计期间，学习到很多课堂上没有的知识，还积累了很多实践经验，增强了动手能力和解决实际问题的能力。我通过网上查找到很多成功的关于计时器倒计时器的程序，通过对那些已经成功的程序进行分析找到自己的设计思路，制定设计流程。通过对网现存的计时器倒计时器的比对，我发现我自己做的程序显得十分简陋，但是这个程序也是我通过完整的设计流程设计出的程序。
 限于作者知识水平和经验有限，此程序还有许多有待完善和改正的地方，恳请各位老师和读者批评指正。
 
参考文献
 
[1] 黄明等.21世纪进阶辅导 C语言程序设计.大连理工大学出版社,2005
 [2] 马靖善等.C语言程序设计.清华大学出版社，2005
 
附录：
 
程序下载：
 
程序下载地址(exe)
 
代码
 
#include <stdio.h>

#include <stdlib.h>

#include <time.h>

#include<conio.h>//kbhit getch

#include <Windows.h>//用于sleep

int daojishi();

int jishiqi();

int main ()
{  
    int c;

	printf("╔╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╗\n");
	printf("╠                          ╣\n");
	printf("╠                          ╣\n");
	printf("╠                          ╣\n");
	printf("╠     计时器&&倒计时器     ╣\n");
	printf("╠                          ╣\n");
	printf("╠                          ╣\n");
	printf("╠                          ╣\n");
	printf("╚╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╝\n");

	
	printf("本程序是由网络空间安全学院学生工程实践研发\n");

    
	printf("====计时方式====\n");  
    
	printf("1. 倒计时器\n");  
    
	printf("2. 计时器\n");  

    
	printf("请输入你选择的代号：");  
    
	scanf("%d", &c);  


    while(c!=1&&c!=2){
	
	printf("不好意思选错咯~\n");
	
	printf("====计时方式====\n");  
    
	printf("1. 倒计时器\n");  

    printf("2. 计时器\n"); 
	
    printf("请输入你选择的代号：");

	scanf("%d", &c);
	}


	switch(c)  
    {  
    case 1: 
		 daojishi();

        break;
		
    case 2: 
			jishiqi();

        break; 
	
	}
    
	return 0;  

}




int daojishi()
 {
	int i,j,k;

	int hour=0,min=0,sec=0;


	printf("请输入倒计时时间（例如：01:26:30）：");


	scanf("%d:%d:%d", &hour, &min, &sec);


	if(hour>24 || hour<0 || min>60 || min<0 || sec>60 || sec<0)
	{

		printf("输入有误！\n");

		return 0;

	}	

	printf("倒计时开始！\n");



	for(i=hour; i>=0; i--)
	 {

		for(j=min; j>=0; j--)
		{
	
			for(k=sec; k>=0; k--)
			{

				printf("\r%02d:%02d:%02d", i, j, k);

				Sleep(1000);

			}

			sec = 59;

		}	

			min = 59;

	}

	printf("\a\n时间到!\n");//倒计时结束后响铃

	exit(0);

}



int jishiqi()
{
	
	int hour = 0, min = 0, sec = 0,n;    
	
	while (n!=32)
		{

			if(kbhit()){//键盘敲击 检查当前是否有键盘输入，如果有则赋值给n
			
			n=getch();
			
			while(n==32){
			
				exit(0);	
			}
		
		}
		

		Sleep(1000);//暂停1s        
	    
		system("cls");//清屏
        
		
		printf("╔╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╦╗\n");
		printf("╠                          ╣\n");
		printf("╠                          ╣\n");
		printf("╠                          ╣\n");
		printf("╠     计时器&&倒计时器     ╣\n");
		printf("╠                          ╣\n");
		printf("╠                          ╣\n");
		printf("╠                          ╣\n");
		printf("╚╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╩╝\n");
	
		
		printf("本程序是由网络空间安全学院学生工程实践研发\n");
		
		
		printf("====计时方式====\n");  
	    
		printf("1. 倒计时器");

		printf("\n");
	    
		printf("2. 计时器");  

		printf("\n");
		
		printf("请输入你选择的代号：2");

		printf("\n");
		
		printf("按空格停止计时");

		printf("\n");


	    sec++;      


	    if (sec == 60)
		{            
		
			min++;            
		   
			sec = 0;       
		}        
	    if (min == 60)
		{            
	
			hour++;            
		   
			min = 0;        
		}        
	    if (hour == 24)
		{            
		   
			hour = 0;        
		}        
	    
		printf("%02d:%02d:%02d\n", hour, min, sec); //%02d输出长度为2，不足2前面补0    
		
		
		if(kbhit()){//键盘敲击 检查当前是否有键盘输入，如果有则赋值给n
			
			n=getch();
			
			while(n==32){
			
				exit(0);	
			}
		
		}

	}

    return 0;
}

 

  
 
 
简介
 
打点计时器是高中力学实验最重要的仪器，没有之一!
 
本文带你了解打点计时器的分类、原理、构造和使用方法。
 
在介绍之前，先请大家思考这个问题：“打点计时器”是用来做什么的？
 
学习一个仪器，最重要的是要知道它能用来做什么。
 
让我们来分析：
 
首先，从名字上看，这是个计时的工具；
其次，由于它能打点，所以可以记录位移的信息；
既能计时，又能记录位移，那么它就可以计算速度和加速度。
 
——这就是打点计时器的作用！
 
打点计时器是计时、记位移、计算速度和加速度的仪器。
 
明白了吗？
 

  
 
 
好了，下面具体介绍：
 
高中涉及的打点计时器主要有两种类型：电磁打点计时器和电火花计时器。电磁打点计时器
 
电磁打点计时器是一种能按照相同的时间间隔，在纸带上连续打点的仪器。
 
使用交流电：
 
由学生电源供电，电压6v以下。由于使用交流电，所以频率为50赫兹，也就是说，每五十分之一秒(0.02秒)打一个点。
 
主要结构：
 
线圈
振片
振针
复写纸
限位孔
永磁铁
纸带
 
电源
 

  
  
电磁打点计时器
 
 
工作原理：
 
通电前，把纸带穿过限位孔，再把套在轴上的复写纸压在纸带下面。
 
通电后，在线圈和永磁铁的作用下，振片便震动起来，带动其上的振针上下振动。振针撞击纸带，由于有复印纸的存在，纸带上会留下印记。
 
如果纸带运动，纸带上就会有一行印记小点。
 
如果把纸带的一端跟运动的物体连在一起，由物体带动纸带一起运动，纸带上各个点之间的距离就表示相应时间间隔中物体的位移。
 
研究这些点，就可以了解物体的运动情况。
 
02
 
电火花计时器
 
原理与电磁打点计时器相同，不过在纸带上打点的不是振针和复写纸，而是电火花和墨粉。同样使用50赫兹交流电。
 

  
  
电火花打点计时器
 
 
主要结构：
 
墨粉纸盘
纸盘轴
放电针
纸带
电源
 
工作原理：
 
通电前，墨粉纸套在纸盘轴上，把纸带穿过限位孔。
 
通电后，按下脉冲输出开关，计时器发出的脉冲电流经过放电针、墨粉纸盘到纸盘轴，产生火花放电，在纸带上留下一行点迹。
 
03
 
简单比较
 
因为电磁式打点计时器的撞针在和纸带撞击的时候产生接触，有不小的阻力。电火花计时器工作时，纸带受到的阻力相对较小。
 
当然，在高中阶段，电磁打点计时器和电火花计时器在实验中的作用是一样的，统称打点计时器，除非特别说明，一般情况两种计时器并不做区分。
 
04
 
使用方法
 
打点计时器在高中阶段的使用非常广泛，一大半的力学实验都要用到打点计时器。
 
基本功能：计时
 
很简单，由于打点的频率为50赫兹，所以，每相邻两个点之间的间隔为0.02秒，记为T。任意两个点之间的时间根据间隔点数来计算，有n段间隔，时间就是nT。
 
基本功能：记录位移
 
纸带上记录了每个点的位置信息，如果想要知道任意两个点之间的距离，直接拿尺子测量即可。
 
高级功能：计算速度
 
注意，打点计时器本质上是计算某段时间内的平均速度：
 

  
 
 
如图所示，随意取5个点，4个间隔。x1，x2，x3，x4可以用直尺测量。
 
要想求任意一段，比如点1到点3的平均速度，只需要用点1到点3的距离(x1+x2)，除以点1到点3的时间(2T=0.04s)：
 

  
 
 
v上方带一个横线，读作“拔”，表示是平均速度。
 
高级功能：计算加速度
 
如果运动是匀变速直线运动，打点计时器还可以测量加速度。
 
根据加速的定义：
 

  
 
 
只需要计算出任意两个点的瞬时速度就可以计算加速度了。
 
那么，我们先计算物体经过点2 的瞬时速度：
 

  
回忆知识：匀变速直线运动某段时间(t1到t2)内的平均速度，等于，中点时刻(t1+t2)/2的瞬时速度。
 
 
由于点2 正好是点1 和点3 的时间中点，所以点1 到点3 的平均速度就是点2 的瞬时速度。
 
即：
 

  
 
 
同理，求出点3的瞬时速度：
 

  
 
 
所以，加速度计算如下：
 

  
 
 
更一般的，有公式：
 

  
 
 
05
 
结语
 
打点计时器在高中物理的应用还有很多，作者会在之后的文章中一一介绍。
 
包括上面介绍的“使用打点计时器计算匀变速直线运动加速度”的具体推导过程在内的其他内容，请点击关注，浏览作者其他相关文章。
 

  
 
 

  
 
 

  
原创不易，关注不难！你的点赞，我的动力！——欢迎来到苏格爸的奇妙物理世界！
 

 
延时器和计时器
 
延时器
计时器
案例
1.倒计时功能，点击开始，开始后可随时按暂停，数字到0后会自动重置
2.倒计时功能，与上面例子差不多，不同的是需要手动重置
3.抽奖系统
4.右下角的倒计时小广告
  
 

 
延时器
 
setTimeout(回调函数,毫秒数)
 功能：延迟指定的毫秒数，只执行一次回调函数
 清除延时器：clearTimeout（延时器的返回值）
 
<script type="text/javascript">
	setTimeout(function(){
	    console.log(1s后);
	},1000)
</script>
 
计时器
 
setInterval(回调函数,毫秒数)
 功能：每隔指定的毫秒数，执行一次回调函数
 清除计时器：clearInterval（计时器的返回值）
 
//body
<div id="box">10</div>

//js
<script type="text/javascript">
	var num = document.getElementById("box")
	var n = num.innerHTML;
	var t;
	t = setInterval(function(){
	  if(n<=5){
	    clearInterval(t)
	  }else{
	    n --;
	    num.innerHTML=n;
	  }
	},1000) 
</script>
 
案例
 
1.倒计时功能，点击开始，开始后可随时按暂停，数字到0后会自动重置
 
<!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>
    #box{width:200px;height:200px;border: solid 1px black;margin: 30px auto;font:80px/200px "";text-align: center}
    #btn{display: block;margin: 0 auto;width: 100px;height:40px;}
  </style>
</head>
<body>
  <div id="box">10</div>
    <input type="button" value="开始" id="btn">
  </body>
<script>

// 1.获取元素
var box = document.getElementById("box")
var btn = document.getElementById("btn")

// 用来保存计时器的返回值，用作将来清除用
var t1;

// 2.获取两次初始值：n用作运算，num用作重置
var n = box.innerHTML;
var num = box.innerHTML;

// 点击按钮的状态：true表示开始，false表示暂停,到0自动重置
var count = true;

// 3.点击事件
btn.onclick = function(){
  // 4.判断状态，决定执行什么功能，初始状态是true，表示开始功能
  if(count){
      // 开始1.清除上一次计时器
      clearInterval(t1)
      // 开始2.开启计时器
      t1 = setInterval(function(){
          // 开始3.判断数字是否到终点
          if(n <= 0){
              // 到终点要清除计时器
              clearInterval(t1);
              
              // 判断状态是否为重置
              // 重置1.重置按钮文字
              btn.value = "开始2";
              // 重置2.重置显示的数字
              box.innerHTML = num;
              // 重置3.重置计算的数字
              n = num;
              // 重置4.重置按钮的状态为初始的开始状态
              count = true;
          }else{
              // 没有到终点，正常减1
              n--;
              // 设置显示数字
              box.innerHTML = n;
          }
      },1000)
      // 正常点击开始之后，下次的功能应该是暂停，所以修改按钮的显示文字为重置
      btn.value = "暂停";
      // 修改按钮的下次点击状态为false，表示暂停
      count = false;

  }else if(count == false){       //5.判断状态是否为暂停
      // 暂停1.清除计时器
      clearInterval(t1)
      // 暂停2.设置下次按钮的文字为继续
      btn.value = "继续";
      // 暂停3.设置按钮的下次被点击的状态为true，表示开始
      count = true;
  }
}
</script>
</html>
 
2.倒计时功能，与上面例子差不多，不同的是需要手动重置
 
<!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>
    #box{width:200px;height:200px;border: solid 1px black;margin: 30px auto;font:80px/200px "";text-align: center}
    #btn{display: block;margin: 0 auto;width: 100px;height:40px;}
  </style>
</head>
<body>
  <div id="box">10</div>
    <input type="button" value="开始" id="btn">
  </body>
<script>


// 1.获取元素
var box = document.getElementById("box")
var btn = document.getElementById("btn")

// 用来保存计时器的返回值，用作将来清除用
var t1;

// 2.获取两次初始值：n用作运算，num用作重置
var n = box.innerHTML;
var num = box.innerHTML;

// 点击按钮的状态：0表示开始，1表示暂停，2表示重置
var count = 0;

// 3.点击事件
btn.onclick = function(){
  // 4.判断状态，决定执行什么功能，初始状态是0，表示开始功能
  if(count == 0){
      // 开始1.清除上一次计时器
      clearInterval(t1)
      // 开始2.开启计时器
      t1 = setInterval(function(){
          // 开始3.判断数字是否到终点
          if(n <= 1){
              // 到终点要清除计时器
              clearInterval(t1);
              // 设置显示数字为0
              box.innerHTML = 0;
              // 修改按钮的显示文件
              btn.value = "重置";
              // 修改按钮的下次点击状态为2，因为已经结束了，所以下次状态是：重置
              count = 2;
          }else{
              // 没有到终点，正常减1
              n--;
              // 设置显示数字
              box.innerHTML = n;
          }
      },1000)
      // 正常点击开始之后，下次的功能应该是暂停，所以修改按钮的显示文字为重置
      btn.value = "暂停";
      // 修改按钮的下次点击状态为1，表示暂停
      count = 1;

  }else if(count == 1){       //5.判断状态是否为暂停
      // 暂停1.清除计时器
      clearInterval(t1)
      // 暂停2.设置下次按钮的文字为继续
      btn.value = "继续";
      // 暂停3.设置按钮的下次被点击的状态为0，表示开始
      count = 0;

  }else if(count == 2){       //6.判断状态是否为重置
      // 重置1.重置按钮文字
      btn.value = "开始2";
      // 重置2.重置显示的数字
      box.innerHTML = num;
      // 重置3.重置计算的数字
      n = num;
      // 重置4.重置按钮的状态为初始的开始状态
      count = 0;
  }
}
</script>
</html>
 
3.抽奖系统
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抽奖系统</title>
    <style type="text/css">
        #cont{font:60px/200px "";text-align: center;height: 200px;}
        #btn{width:200px;height: 60px;font-size: 30px;display: block;margin: 20px auto;}
    </style>
</head>
<body>
  <div id="cont">请点击开始按钮,开始抽奖</div>
  <input type="button" name="btn" id="btn" value="开始" />
</body>
<script>
//目标:实现抽奖系统
 //准备:给button标签绑定onclick事件
 var btnObj = document.getElementById('btn');
 var conObj = document.getElementById('cont');
 // 定时器返回值
 var times;
 // 设一个状态值
 var btnStatus=true;
     btnObj.onclick=function(){
    // 判断是否是第一次点击
    if(btnStatus){  // 点击开始
       //  console.log(111);
        // 1 准备班级学生姓名字符串
      var str = "张三,李四,王五,小明,小红,小雪";
         // 2 分割字符串为数组
      var studentArr = str.split(',');
        // console.log(studentArr);
         // 3 生成随机数,当做索引,获取一个数组元素
         // 获取数组长度
         var len = studentArr.length;
       // 4 使用定时器,多次生成随机数,获取人员姓名,并且追加到页面中
         times = setInterval(function(){
                   // 直接取整
               var num = parseInt(Math.random()*len);
               var studentName = studentArr[num];
               //console.log(studentName);
               // 5 将人员姓名追加到页面中
               conObj.innerHTML = studentName;
         },100);
         // 更改开始按钮的字
         btnObj.value='就你了'
         // 修改点击的状态
         btnStatus = false;
       }else{  // 第二次点击,停止定时器
             // 清除定时器
             clearInterval(times);
             // 修改点击的状态
             btnStatus = true;
             // 更换按钮的字
             btnObj.value='再次抽奖'
       }
     }
</script>
</html>
 
4.右下角的倒计时小广告
 
//css
 #box{width: 200px;height: 250px;border:1px solid #000;position: fixed;right: 0;bottom: 0;}
 #close{width: 35px;height: 25px;font: 12px/2 "";color: gray;position: absolute;left: 0;top: 0;text-align: center;background-color: white;border: none;outline: none;}
 #adv{font: 12px/2 "";color: #fff;position:absolute;right: 0;top: 0;background: rgba(115, 115, 115);padding: 0 10px;}
 
 //body
<div id="box">
  <input type="button" value="X" id="close">
  <span id="adv">广告还有<b id="num">10</b>秒</span>
</div> 
  

<script type="text/javascript">
	window.onload=function(){
		var box = document.getElementById("box");
		var num = document.getElementById("num");
		var close = document.getElementById("close");
		
		var t;
		var n=num.innerHTML;
		
		close.onclick = function(){
		 // 重新定向网址,流氓软件做法
         // location.href = 'www.baidu.com';
		  box.style.display = "none"
		}
		
		t = setInterval(function(){
		  if(n<=1){
		    box.style.display = "none"
		  }else{
		    n--;
		    num.innerHTML = n;
		  }
		  },1000)
	}
</script>