1.将以下jq代码转换为原生js
2.求在HTML页上显示动态标准时间代码
3.用JS获取当前时间（小时分钟秒） 然后绑定三个button按钮 一个按钮增加一小时，一个减少一个小时
将以下jq代码转换为原生js
jquery.downCount.js是依赖于jQuery的插件（效果：倒计时），所以我们需要查看该插件的源码才能将其变成源生代码。html代码：
<div class="p1"><span class="days"></span><span class="days_ref"></span>
<span class="hours"></span><span class="hours_ref"></span>
<span class="minutes"></span><span class="minutes_ref"></span>
<span class="seconds"></span><span class="seconds_ref"></span>
</div>
上面span中的微课 平台 源码class类是用于显示需要的类，在插件中days、hours、rudp 源码minutes、seconds分别用于显示天数、小时、分钟、秒，days_ref、hours_ref、sublime 源码minutes_ref、seconds_ref分别用于显示单位days或day，hours或hour、wix 源码minutes或minute、seconds或second。这些类都没有定义相应的teechart 源码样式，需要自己自定义样式。
js代码，只是简易的提了出来，如果需要更灵活的配置，自己再做进一步封装：
(function () {var container = document.querySelector(".p1");
var mydate = '1// ::',
myoffset = ,
callback = function () {
alert("执行完毕");
};
/
*** Change client's local date to match offset timezone
* @return { Object} Fixed Date object.
*/
var currentDate = function () {
// get client's current date
var date = new Date();
// turn date to utc
var utc = date.getTime() + (date.getTimezoneOffset() * );
// set new Date object
var new_date = new Date(utc + (*myoffset));
return new_date;
};
/
*** Main downCount function that calculates everything
*/
function countdown () {
var target_date = new Date(mydate), // set target date
current_date = currentDate(); // get fixed current date
// difference of dates
var difference = target_date - current_date;
// if difference is negative than it's pass the target date
if (difference < 0) {
// stop timer
clearInterval(interval);
if (callback && typeof callback === 'function') {
callback();
}
return;
}
// basic math variables
var _second = ,
_minute = _second * ,
_hour = _minute * ,
_day = _hour * ;
// calculate dates
var days = Math.floor(difference / _day),
hours = Math.floor((difference % _day) / _hour),
minutes = Math.floor((difference % _hour) / _minute),
seconds = Math.floor((difference % _minute) / _second),
// fix dates so that it will show two digets
days = (String(days).length >= 2) ? days : '0' + days,
hours = (String(hours).length >= 2) ? hours : '0' + hours,
minutes = (String(minutes).length >= 2) ? minutes : '0' + minutes,
seconds = (String(seconds).length >= 2) ? seconds : '0' + seconds;
// based on the date change the refrence wording
var ref_days = (days === 1) ? 'day' : 'days',
ref_hours = (hours === 1) ? 'hour' : 'hours',
ref_minutes = (minutes === 1) ? 'minute' : 'minutes',
ref_seconds = (seconds === 1) ? 'second' : 'seconds';
// set to DOM
document.querySelector('.days').innerHTML = days;
document.querySelector('.hours').innerHTML = hours;
document.querySelector('.minutes').innerHTML = minutes;
document.querySelector('.seconds').innerHTML = seconds;
document.querySelector('.days_ref').innerHTML = ref_days;
document.querySelector('.hours_ref').innerHTML = ref_hours;
document.querySelector('.minutes_ref').innerHTML = ref_minutes;
document.querySelector('.seconds_ref').innerHTML = ref_seconds;
};
// start
var interval = setInterval(countdown, );
})();
求在HTML页上显示动态标准时间代码
<html>
<title></title>
<head>
<script language="JavaScript">
var timerID=null;
var timerRunning=false;
file://启动
function startclock()
{
stopclock();
time();
}
file://停止
function stopclock()
{
if(timerRunning)
clearTimeout(timerID);
timerRunning=false;
}
file://实现模块
function time()
{
file://使用new操作符创建时间对象
var now=new Date();
var yr=now.getYear();
var mName=now.getMonth()+1;
var dayNr=((now.getDate()<)?"0":"")+now.getDate();
var dName=now.getDay()+1;
var ampm=(now.getHours()>=)?"下午":"上午"
var hours=now.getHours();
hours=((hours>)?hours-:hours);
var minutes=((now.getMinutes()<)?":0":":")+now.getMinutes();
var seconds=((now.getSeconds()<)?":0":":")+now.getSeconds();
file://判断今天是星期几
if(dName==1)Day="Sunday";
if(dName==1)Day="Monday";
if(dName==3)Day="Tuesday";
if(dName==4)Day="Wednesday";
if(dName==5)Day="Thursday";
if(dName==6)Day="Friday";
if(dName==7)Day="Saturday";
file://判断月份
if(mName==1)Month="Janauary";
if(mName==2)Month="February";
if(mName==3)Month="March";
if(mName==4)Month="April";
if(mName==5)Month="May";
if(mName==6)Month="June";
if(mName==7)Month="July";
if(mName==8)Month="August";
if(mName==9)Month="September";
if(mName=)Month="October";
if(mName=)Month="November";
if(mName=)Month="December";
var DayOfWeek=(""+Day+"");
var MonthDayYear=(""+Month+","+dayNr+","+yr+"");
document.forms[0].elements[0].value=MonthDayYear;
var TimeValue=(""+hours+minutes+seconds+""+ampm);
document.forms[0].elements[1].value=TimeValue;
timerID=setTimeout("time()",);
timerRunning=true;
}
</script>
</head>
<body onLoad="startclock()">
<form>
<br>
<table border=0 widtn=>
<tr>
<TD align="center"><input type="button" title="停止" onclick="stopclock()">
<TD align="center"><input type="button" title="继续" onclick="startclock()">
</tr>
</table>
</form>
</html>
代码二
<script>
//定义时钟显示的函数
function displayTime()
{
var today = new Date(); // 定义日期对象
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
// 从日期对象中中获得时间信息
minutes = fixTime(minutes);
seconds = fixTime(seconds); // 引入fixTime（）函数，使分和秒可以正常显示，对于小于的数字则在该数字前加一个0
//将时间字符串组合在一起并写出
var the_time = hours + ":" + minutes + ":" + seconds;
window.document.the_form.the_text.value = the_time; //把表格的值重新写一遍，相当于刷新时间
the_timeout= setTimeout('displayTime();',); //每半秒钟执行一次该函数,即毫秒
}
function fixTime(the_time)
{
if (the_time <)
{
the_time = "0" + the_time;
}
return the_time;
}
</script>
附 一个更酷的时钟原代码
<html>
<body bgcolor=#3A6EA5>
<p><b>用JavaScript编程实现钟表特效</b></p>
请用查看源代码方式阅读所有程序代码。
<script language="JavaScript">
<!--
dCol='#ff';
fCol='#e';
sCol='ff';
mCol='ff';
hCol='ffff';
ClockHeight=;
ClockWidth=;
ClockFromMouseY=0;
ClockFromMouseX=;
d=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六");
m=new Array("一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月");
date=new Date();
day=date.getDate();
year=date.getYear();
if (year < ) year=year+;
TodaysDate="年 "+m[date.getMonth()]+day+"日 "+d[date.getDay()]+" "+year;
D=TodaysDate.split('');
H='...';
H=H.split('');
M='....';
M=M.split('');
S='.....';
S=S.split('');
Face='1 2 3 4 5 6 7 8 9 ';
font='Arial';
size=1;
speed=0.9;
ns=(document.layers);
ie=(document.all);
Face=Face.split(' ');
n=Face.length;
a=size*;
ymouse=0;
xmouse=0;
scrll=0;
props="<font face="+font+" size="+size+" color="+fCol+">";
props2="<font face="+font+" size="+size+" color="+dCol+">";
Split=/n;
Dsplit=/D.length;
HandHeight=ClockHeight/4.5
HandWidth=ClockWidth/4.5
HandY=-7;
HandX=-2.5;
scrll=0;
step=0.;
currStep=0;
y=new Array();x=new Array();Y=new Array();X=new Array();
for (i=0; i < n; i++){ y[i]=0;x[i]=0;Y[i]=0;X[i]=0}
Dy=new Array();Dx=new Array();DY=new Array();DX=new Array();
for (i=0; i < D.length; i++){ Dy[i]=0;Dx[i]=0;DY[i]=0;DX[i]=0}
if (ns){
for (i=0; i < D.length; i++)
document.write('<layer name="nsDate'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props2+D[i]+'</font></center></layer>');
for (i=0; i < n; i++)
document.write('<layer name="nsFace'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+Face[i]+'</font></center></layer>');
for (i=0; i < S.length; i++)
document.write('<layer name=nsSeconds'+i+' top=0 left=0 width= height=><font face=Arial size=3 color='+sCol+'><center><b>'+S[i]+'</b></center></font></layer>');
for (i=0; i < M.length; i++)
document.write('<layer name=nsMinutes'+i+' top=0 left=0 width= height=><font face=Arial size=3 color='+mCol+'><center><b>'+M[i]+'</b></center></font></layer>');
for (i=0; i < H.length; i++)
document.write('<layer name=nsHours'+i+' top=0 left=0 width= height=><font face=Arial size=3 color='+hCol+'><center><b>'+H[i]+'</b></center></font></layer>');
}
if (ie) {
document.write('<div id="Od" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < D.length; i++)
document.write('<div id="ieDate" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props2+D[i]+'</font></div>');
document.write('</div></div>');
document.write('<div id="Of" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="ieFace" style="position:absolute;top:0px;left:0;height:'+a+';width:'+a+';text-align:center">'+props+Face[i]+'</font></div>');
document.write('</div></div>');
document.write('<div id="Oh" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < H.length; i++)
document.write('<div id="ieHours" style="position:absolute;width:px;height:px;font-family:Arial;font-size:px;color:'+hCol+';text-align:center;font-weight:bold">'+H[i]+'</div>');
document.write('</div></div>');
document.write('<div id="Om" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < M.length; i++)
document.write('<div id="ieMinutes" style="position:absolute;width:px;height:px;font-family:Arial;font-size:px;color:'+mCol+';text-align:center;font-weight:bold">'+M[i]+'</div>');
document.write('</div></div>')
document.write('<div id="Os" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < S.length; i++)
document.write('<div id="ieSeconds" style="position:absolute;width:px;height:px;font-family:Arial;font-size:px;color:'+sCol+';text-align:center;font-weight:bold">'+S[i]+'</div>');
document.write('</div></div>')
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns)?evnt.pageY+ClockFromMouseY-(window.pageYOffset):event.y+ClockFromMouseY;
xmouse = (ns)?evnt.pageX+ClockFromMouseX:event.x+ClockFromMouseX;
}
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
function ClockAndAssign(){
time = new Date ();
secs = time.getSeconds();
sec = -1. + Math.PI * secs/;
mins = time.getMinutes();
min = -1. + Math.PI * mins/;
hr = time.getHours();
hrs = -1. + Math.PI * hr/6+Math.PI*parseInt(time.getMinutes())/;
if (ie){
Od.style.top=window.document.body.scrollTop;
Of.style.top=window.document.body.scrollTop;
Oh.style.top=window.document.body.scrollTop;
Om.style.top=window.document.body.scrollTop;
Os.style.top=window.document.body.scrollTop;
}
for (i=0; i < n; i++){
var F=(ns)?document.layers['nsFace'+i]:ieFace[i].style;
F.top=y[i] + ClockHeight*Math.sin(-1. + i*Split*Math.PI/)+scrll;
F.left=x[i] + ClockWidth*Math.cos(-1. + i*Split*Math.PI/);
}
for (i=0; i < H.length; i++){
var HL=(ns)?document.layers['nsHours'+i]:ieHours[i].style;
HL.top=y[i]+HandY+(i*HandHeight)*Math.sin(hrs)+scrll;
HL.left=x[i]+HandX+(i*HandWidth)*Math.cos(hrs);
}
for (i=0; i < M.length; i++){
var ML=(ns)?document.layers['nsMinutes'+i]:ieMinutes[i].style;
ML.top=y[i]+HandY+(i*HandHeight)*Math.sin(min)+scrll;
ML.left=x[i]+HandX+(i*HandWidth)*Math.cos(min);
}
for (i=0; i < S.length; i++){
var SL=(ns)?document.layers['nsSeconds'+i]:ieSeconds[i].style;
SL.top=y[i]+HandY+(i*HandHeight)*Math.sin(sec)+scrll;
SL.left=x[i]+HandX+(i*HandWidth)*Math.cos(sec);
}
for (i=0; i < D.length; i++){
var DL=(ns)?document.layers['nsDate'+i]:ieDate[i].style;
DL.top=Dy[i] + ClockHeight*1.5*Math.sin(currStep+i*Dsplit*Math.PI/)+scrll;
DL.left=Dx[i] + ClockWidth*1.5*Math.cos(currStep+i*Dsplit*Math.PI/);
}
currStep-=step;
}
function Delay(){
scrll=(ns)?window.pageYOffset:0;
Dy[0]=Math.round(DY[0]+=((ymouse)-DY[0])*speed);
Dx[0]=Math.round(DX[0]+=((xmouse)-DX[0])*speed);
for (i=1; i < D.length; i++){
Dy[i]=Math.round(DY[i]+=(Dy[i-1]-DY[i])*speed);
Dx[i]=Math.round(DX[i]+=(Dx[i-1]-DX[i])*speed);
}
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
ClockAndAssign();
setTimeout('Delay()',);
}
if (ns||ie)window.onload=Delay;
//-->
</script>
</body>
</html>
用JS获取当前时间（小时分钟秒） 然后绑定三个button按钮 一个按钮增加一小时，一个减少一个小时
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
<script>
var nn;
onload=function(){
setInterval(function(){
var n=new Date;
if(nn==null)
dd.innerHTML=n.getHours()+":"+n.getMinutes()+":"+n.getSeconds();
else
dd.innerHTML=nn+":"+n.getMinutes()+":"+n.getSeconds();
});
}
var add=function(){
var n=new Date;
if(null==nn)
nn=n.getHours()+1;
else
nn++;
}
var sub=function(){
var n=new Date;
if(null==nn)
nn=n.getHours()-1;
else
nn--;
}
var orial=function(){
var n=new Date;
nn=n.getHours();
}
</script>
</head>
<body>
<div id="dd">
</div>
<input type="button" value="+1" onclick="add()" />
<input type="button" value="-1" onclick="sub()"/>
<input type="button" value="恢复" onclick="orial()"/>
</body>
</html>
