Heim > Web-Frontend > js-Tutorial > js-Countdown-Snap-up-Beispiel_Javascript-Kenntnisse

js-Countdown-Snap-up-Beispiel_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:24:27
Original
2287 Leute haben es durchsucht

Das Beispiel in diesem Artikel zeigt die JavaScript-Implementierung eines zeitlich begrenzten Verkaufs als Referenz. Der spezifische Code lautet wie folgt

Operationsrendering:

Der spezifische Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>限时抢购倒计时</title>
<style type="text/css">
 body{
 text-align: center;
 }
 #first{
 color:#ff7300;
 font-size:30px;
 margin-left:10px;
 }
</style>
<script type="text/javascript">
window.onload=function(){
setInterval(changTime, 500);
function changTime(){
document.getElementById("time").innerHTML=getTime();
changeStyle();
}
function gR()
{
 return Math.floor(Math.random()*16);
}
function changeStyle(){
var ele=document.getElementById("time");
var size=Math.random()*40;
ele.style.fontSize=((size+10)+"px");
var mc=new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
ele.style.color="#"+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()]+mc[gR()];
 
}
function getTime(){
 var now=new Date().getTime();
 var end=new Date("2015/12/20").getTime();
 var temp=end-now;
 if(temp<=0)
 {
  document.getElementById("first").innerHTML="抢购活动已结束!!!!!";
  return "";
 }else
 {
 var temp2=new Date();
 temp2.setTime(temp);
 var sec=Math.floor((temp)/1000%60);
 var min=Math.floor(temp/(60*1000)%60);
 var hou=Math.floor(temp/(60*60*1000)%24);
 var day=Math.floor(temp/(24*60*60*1000));
 
 return day+"天 "+hou+"小时 "+min+"分钟 "+sec+"秒";
 }
}
};
</script>
</head>
<body>
 <br/><br/><br/><br/><br/>
 <span id="first">距离限时抢购还有 </span>
 <span id="time"></span>
</body>
</html>
Nach dem Login kopieren

Ich hoffe, dass die Beispiele in diesem Artikel jedem beim Erlernen der Javascript-Programmierung hilfreich sein werden.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage