cari

Rumah >hujung hadapan web >tutorial js >Pelaksanaan JavaScript bagi segmen kod undur Item1 (sangat praktikal)_kemahiran javascript

Pelaksanaan JavaScript bagi segmen kod undur Item1 (sangat praktikal)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:33:461292semak imbas

Kini, laman web pembelian berkumpulan, tapak web e-dagang, laman web portal, dsb. sering menggunakan masa untuk merakam detik penting, seperti paparan masa, perbezaan masa kira detik, jualan masa terhad, dsb. Artikel ini menganalisis idea dan kaedah pengiraan kesan kira detik yang berbeza, dan menguasai objek tarikh Tarikh Kaedah untuk mendapatkan masa, kaedah untuk mengira perbezaan masa, dan mencapai kesan kira detik yang berbeza.

1. Paparan masa ringkas

Terangkan objek tarikh Tarikh, dan dapatkan jam, minit, saat, dsb. melalui objek ini, membolehkan anda mengekstrak kandungan masa yang diperlukan secara bebas. 

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
 window.onload = function(){
  showTime();
 }
 function showTime(){
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  var dateArr = ["日","一",'二','三','四','五','六'];
  var day = myDate.getDay();
  var hours = myDate.getHours();
  var minutes = formatTime(myDate.getMinutes());
  var seconds = formatTime(myDate.getSeconds());
  var systemTime = document.getElementById("time");
  systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
  setTimeout("showTime()",500);
 }
 //格式化时间：分秒。
 function formatTime (i){
  if(i < 10){
   i = "0" + i;
  }
  return i;
 }
 </script>
</head>
<body>
 <div id ='time'></div>
</body>
</html>

Hasil paparan:

2. Perbezaan masa kira detik

Terangkan kaedah seperti gettime() dan cara mengira masa, serta pelajari bilangan hari antara masa. 

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
  window.onload = function(){
   deadTime();
  }
  function deadTime(){
   var nowTime = new Date();
   var finalTime = new Date("2015-11-11");
   var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
   var date = Math.ceil(lefttime);
   document.getElementById("time").innerHTML = date;
  }
 </script>
</head>
<body>
 <div >距离双十一还有：<span id ='time'></span>天</div>
</body>
</html>

Kesan paparan:

3. Jualan masa terhad

Cara menggunakan objek tarikh dan kaedah untuk mengira perbezaan hari, jam, minit dan saat. 

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
 var endtime=new Date("2015/11/11,12:20:12");//结束时间
 var nowtime = new Date();//当前时间
 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime<=0){
  document.getElementById("LeftTime").innerHTML="团购已结束";
  clearInterval(sh);
 }
}
 FreshTime();
 var sh;
 sh=setInterval(FreshTime,1000);
</script>
</body>
</html>


Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Berdasarkan JavaScript, klik pada imej pada terminal mudah alih untuk melihat imej yang lebih besar Klik pada imej yang lebih besar untuk hide_javascript kemahiranArtikel seterusnya：Berdasarkan JavaScript, klik pada imej pada terminal mudah alih untuk melihat imej yang lebih besar Klik pada imej yang lebih besar untuk hide_javascript kemahiran

Artikel berkaitan

Lihat lagi