两个感觉还可以的js小实例有注释代码

来源：互联网发布：香港直播软件编辑：程序博客网时间：2024/06/05 11:18

倒计时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>
<body>
<script type="text/javascript" language="javascript" charset="utf-8">
var inputtime = prompt("请输入一个终止日期,例如！","2012/12/3");
//创建一个终止日期的时间对象
var enddate = new Date(inputtime);
function dtime(){
   //创建一个现在日期的时间对象
   var startdate = new Date();
   //保存一个两个时间的时间差
   var timecha = enddate.getTime()-startdate.getTime();
   //计算相差多少天数
   var day = Math.floor(timecha/(1000 * 60 * 60 * 24));
   //返回除完天数剩下的毫秒数
   var shengyu = timecha%(1000 * 60 * 60 * 24);
   //计算相差的小时
   var hour = Math.floor(shengyu/(1000 * 60 * 60 * 1));
   //返回除完小时剩下的毫秒数
   var shengyu = shengyu%(1000 * 60 * 60 * 1);
   //计算相差的分钟数
   var minute = Math.floor(shengyu/(1000 * 60 * 1));
   //返回除完分钟剩下的毫秒数
   var shengyu = shengyu%(1000 * 60 * 1);
   //计算相差的毫秒数
   var second = Math.floor(shengyu/1000);
   document.getElementById("dt").innerHTML="距离您输入的时间<font color='green' size='7'>"+inputtime+"</font>还有<font color='red' size='7'>"+day+"天"+hour+"时"+minute+"分"+second+"秒</font>";
}
setInterval("dtime();","1000");
</script>
<div id="dt" align="center" style="border:#666 dotted; background-color:#960;"></div>
</body>
</html>

抽奖

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>

</head>
<body>
<script type="text/javascript">

var arr = new Array(6);
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
arr[3] = "James";
arr[4] = "Adrew";
arr[5] = "Martin";

//定时变量
var interval;

//抽取速度
var dley=1000;

//是否执行抽取一次的条件
var flag=false;

//保存随机数
var num;

//保存id号
var pid;

//保存人数
var pnum=true;

//是否正在执行抽奖
var drive=true;

//产生随机数并显示该人
function rand(){
       num= Math.round(Math.random()*(arr.length-1));

       if(arr.length!=0){
           document.getElementById(pid).innerHTML=arr[num];
       }else{
           document.getElementById(pid).innerHTML="没人了！";
           //代表没有可抽取的人了
           pnum=false;
           }
       //开始抽奖
       drive=true;
   }

//列出中奖人的清单
function plist(pname){
       var objperson = document.getElementById(pid+"p");
       objperson.value = objperson.value + ","+pname;
   }

function index(p){
   if(!pnum){ alert("没有可供抽选的人数了！"); return false; }
   window.clearInterval(interval);
   //为全局变量pid赋值
   pid=p;
   //是否执行抽取一次的条件
   flag = document.getElementById("rad").checked;
   interval = window.setInterval("rand()","dley");
}

//删除选过的数组元素
function arrSplice(num){
       arr.splice(num,1);
   }

//停止抽奖
function stopcj(){
       //检测是否选择了抽奖
       if(!drive){ alert("你还没有抽呢！"); return false; }
       //检测是否还有没抽的人
       if(!pnum){ alert("没有可供抽选的人数了！"); return false; }
       window.clearInterval(interval);
       //列出中奖人的清单
       plist(arr[num]);
       //将该值放入已经抽出的区域
       document.getElementById("outperson").innerHTML = document.getElementById("outperson").innerHTML+","+arr[num];
       //判断是否删除被选过的人
       if(flag){
               //alert(num+"fdsfd"+arr[num]);
               arrSplice(num);
           }
       //停止抽奖
       drive=false;
   }

//根据奖数的级别，判断一次抽几个奖

</script>
简易抽奖器<br><br>

<table border="1" width="200" height="70">
<tr>
<td>
<legend>参数选项：</legend>
</td>
</tr>
<tr>
<td>
<input type="radio" value="1" id="rad"/>设置每个人只抽取一次
</td>
</tr>
</table>
<br><br>
<input type="button" onclick="index('person1')" value="开始抽取1等奖"/>
<input type="button" onclick="index('person2')" value="开始抽取2等奖"/>
<input type="button" onclick="index('person3')" value="开始抽取3等奖"/>
<input type="button" onclick="stopcj()" value="停止"/>
<br><br>
一等奖：<div id="person1" style="background-color:#0F6; width:150px; height:20px; display:inline;"></div><input type="text" value="" id="person1p" style="background-color:#F00;"/><br><br>

二等奖：<div id="person2" style="background-color:#0F6; width:150px; height:20px; display:inline;"></div><input type="text" value="" id="person2p"style="background-color:#F00;" /><br><br>

三等奖：<div id="person3" style="background-color:#0F6; width:150px; height:20px; display:inline;"></div><input type="text" value="" id="person3p" style="background-color:#F00;"/><br><br>

<font color="#FF0000">已抽出的人:</font><div id="outperson"></div>

</body>
</html>