JavaScript+jQuery réalise un effet d'affichage du temps de démarrage à 360°-js tutoriel-php.cn

JavaScript+jQuery réalise un effet d'affichage du temps de démarrage à 360°

小云云

Libérer： 2017-12-09 13:51:53

original

1680 Les gens l'ont consulté

Dans cet article, nous présentons principalement javascript+jQuery pour réaliser l'effet d'affichage du temps de démarrage à 360°. Dans l'article, nous avons mentionné le code de js pour réaliser le compte à rebours.

Effet de mise en œuvre :

Principe de mise en œuvre :

Lier le bouton de fermeture Cliquez événement, 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>

Copier après la connexion

PS : compte à rebours du temps d'implémentation JS

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

Copier après la connexion

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 une actualisation 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>

Copier après la connexion

Recommandations associées :

Javascript implémente le changement de style entre les versions ordinateur et mobile

Comment bloquer la touche Retour arrière avec JavaScript

Comment fonctionne JavaScript

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!