Maison >interface Web >js tutoriel >JS+jQuery affiche le temps de démarrage (précis à la seconde près)

JS+jQuery affiche le temps de démarrage (précis à la seconde près)

php中世界最好的语言original: 2018-04-16 10:47:002272parcourir

Cette fois, je vais vous apporter JS+jQuery pour afficher l'heure de démarrage (précision en secondes). Quelles sont les précautions pour que JS+jQuery affiche l'heure de démarrage. cas pratique. Jetons un coup d'oeil une fois.

Principe de mise en œuvre :

Liez l'événement de clic au bouton de fermeture et déclenchez l'effet d'animation après avoir cliqué. À l'aide de la méthode d'animation de jQuery, modifiez d'abord la hauteur de la boîte affichant la météo à 0, puis modifiez la largeur de la boîte entière contenant la météo et les événements à 0, et enfin définissez la valeur de l'attribut d'affichage sur aucun pour faire disparaître le bouton de fermeture.

Code d'implémentation :

<!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 implémente le compte à rebours

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

La méthode suivante combine la différence de temps dans une chaîne de compte à rebours, puis la place dans la position correspondante de la page pour obtenir un rafraîchissement en temps réel

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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des choses plus excitantes, veuillez prêter attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php jquery 字符串 JS 事件 display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：vue2.0 sélectionne tout et inverse la sélection dans le tableauArticle suivant：vue2.0 sélectionne tout et inverse la sélection dans le tableau

Articles Liés

Voir plus