天天看点

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

??璁℃??

<!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>????棰???妗?lt;/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="璺?绂绘?ㄨ??ョ???堕??lt;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>????棰???妗?lt;/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;

//?????e?ㄦ?ц??藉?

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="娌′汉浜?锛?";

?? ??? ??? ?//浠h〃娌℃?????藉????浜轰?

?? ??? ??? ?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>

绠????藉???lt;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" 慰nclick="index('person1')" value="寮?濮??藉??1绛?濂?"/>

<input type="button" 慰nclick="index('person2')" value="寮?濮??藉??2绛?濂?"/>

<input type="button" 慰nclick="index('person3')" value="寮?濮??藉??3绛?濂?"/>

<input type="button" 慰nclick="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>

继续阅读