suchen

Heim >Web-Frontend >js-Tutorial >JS+jQuery zeigt die Startzeit an (sekundengenau)

JS+jQuery zeigt die Startzeit an (sekundengenau)

php中世界最好的语言
php中世界最好的语言Original
2018-04-16 10:47:002234Durchsuche

Dieses Mal bringe ich Ihnen JS+jQuery, um die Startzeit anzuzeigen (auf Sekunden genau). Was sind die Vorsichtsmaßnahmen für JS+jQuery, um die Startzeit anzuzeigen? Schauen wir uns das einmal an.

Umsetzungsprinzip:

 Binden Sie das Klickereignis an die Schaltfläche „Schließen“ und lösen Sie den Animationseffekt nach dem Klicken aus. Ändern Sie mit der Animationsmethode von jQuery zunächst die Höhe des Felds, in dem das Wetter angezeigt wird, auf 0, ändern Sie dann die Breite des gesamten Felds, das Wetter und Ereignisse enthält, auf 0 und setzen Sie schließlich den Wert des Anzeigeattributs auf „Keine“, damit die Schaltfläche „Schließen“ verschwindet.

Implementierungscode: 

<!DOCTYPE html>
<html>
<head>
 <title>仿360开机效果</title>
 <meta charset="utf-8">
 <style type="text/css">
  *{
   padding: 0;
   margin: 0;
  }
  .box{
   width: 320px;
   position: fixed;
   bottom: 0;
   right: 0;
   box-shadow: 1px 1px 10px #2d2d2d;
  }
  #close{
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 20px;
   cursor: pointer;
   background-color: red;
   color: pink;
   font-weight: bold;
   text-align: center;
  }
  .hd{
   width: 320px;
   height: 300px;
   background-color: #03c03c;
   color: #fff;
   font-size: 70px;
   line-height: 300px;
   text-align: center;
  }
  .bd{
   width: 320px;
   height: 100px;
   background-color: #fffc00;
   font-size: 30px;
   line-height: 100px;
   text-align: center;
  }
 </style>
</head>
<body>
<p class="box">
 <span id="close">X</span>
 <p class="hd" id="t">1分12秒</p>
 <p class="bd" id="b">天气：晴天</p>
</p>
<!-- 引入jQuery -->
<script type="text/javascript" src="./jquery1.0.0.1.js"></script>
<script type="text/javascript">
 window.onload = function(){
  var close = document.getElementById("close");
  var box = close.parentNode;
  var b = document.getElementById("b");
  // 给关闭按钮绑定点击事件
  close.onclick = function(){
   animate(b, {"height":0}, function(){
    animate(box,{"width":0});
   });
   close.style.display = "none";
  }
 }
</script>
</body>
</html>

PS: JS implementiert Zeit-Countdown

<script type="text/javascript">
var maxtime = 1350057600 //截止到的日期
var now=parseInt((new Date().getTime())/1000);//获取当前的日期
var cha_time=maxtime-now;//中间所差的时间

Die folgende Methode kombiniert den Zeitunterschied zu einer Countdown-Zeichenfolge und platziert sie dann an der entsprechenden Position der Seite, um sie zu implementieren und in Echtzeit zu aktualisieren 

function CountDown(){ 
if(cha_time>=0){
var day = Math.floor(cha_time/3600/24);
var hour= Math.floor((cha_time/3600)%24);
var minutes = Math.floor((cha_time/60)%60); 
var seconds = Math.floor(cha_time%60); 
msg = "离结束还有"+day+"天"+hour+"小时"+minutes+"分"+seconds+"秒"; 
$(".ws_sg_con_big,.ws_sg_con_small").find("dd").html(msg);
--cha_time; 
} 
else{ 
clearInterval(timer); 
alert("时间到，结束!"); 
} 
} 
timer = setInterval("CountDown()",1000); 
</script>

Ich glaube, Sie haben die Methode danach gemeistert Lesen Sie den Fall in diesem Artikel und lesen Sie weitere verwandte Artikel im Internet.

Empfohlene Lektüre:



Das obige ist der detaillierte Inhalt vonJS+jQuery zeigt die Startzeit an (sekundengenau). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php jquery 字符串 JS 事件 display
Stellungnahme：
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
Vorheriger Artikel：vue2.0 wählt alle aus und kehrt die Auswahl in der Tabelle umNächster Artikel：vue2.0 wählt alle aus und kehrt die Auswahl in der Tabelle um

In Verbindung stehende Artikel

Mehr sehen