javascript+jQuery实现360开机时间显示效果

实现效果：

实现原理：

　　给关闭按钮绑定点击事件，点击以后触发动画效果。利用jQuery的animate方法，先让显示天气的盒子高度变为0，接着让整个包含天气和事件的盒子宽度变为0，最后通过将display属性值设为none，使得close按钮消失。

实现代码：

<!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>
<div class="box">
 <span id="close">X</span>
 <div class="hd" id="t">1分12秒</div>
 <div class="bd" id="b">天气：晴天</div>
</div>
<!-- 引入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 实现时间倒计时

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

下面方法把相差的时间组合成倒计时的字符串，然后放到页面相应位置实现，实时刷新

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>

总结

以上所述是小编给大家介绍的javascript+jQuery实现360开机时间显示效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享

    要实现类似功能,用JS就可以,实现方法如下: 一.javascript函数实现:实例1: 复制代码 代码如下: //JavaScript函数:var minute = 1000 * 60;var hour = minute * 60;var day = hour * 24;var halfamonth = day * 15;var month = day * 30;function getDateDiff(dateTimeStamp){var now = new Date().getTime()

  • javascript+jQuery实现360开机时间显示效果

    javascript+jQuery实现360开机时间显示效果

    实现效果: 实现原理: 给关闭按钮绑定点击事件,点击以后触发动画效果.利用jQuery的animate方法,先让显示天气的盒子高度变为0,接着让整个包含天气和事件的盒子宽度变为0,最后通过将display属性值设为none,使得close按钮消失. 实现代码: <!DOCTYPE html> <html> <head> <title>仿360开机效果</title> <meta charset="utf-8"> &

  • JavaScript jQuery 中定义数组与操作及jquery数组操作

    首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如

  • jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

    jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

    本文实例讲述了jQuery模拟360浏览器切屏效果幻灯片,分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

  • jquery实现的V字形显示效果代码

    jquery实现的V字形显示效果代码

    本文实例讲述了jquery实现的V字形显示效果代码.分享给大家供大家参考,具体如下: 这里介绍jquery实现的V字形小效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-v-txt-style-codes/ 具体代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> &

  • jQuery控制cookie过期时间的方法

    本文实例讲述了jQuery控制cookie过期时间的方法.分享给大家供大家参考.具体分析如下: jquery.cookie()方法可以设置cookie,默认条件下是浏览器关闭cookie即失效,用下面方法可以解决这个问题 <script type="text/javascript"> var expiresDate= new Date(); expiresDate.setTime(expire.getTime() + (? * 60 * 1000)); //?替换成分钟数如

  • JavaScript jquery及AJAX小结

    JavaScript jquery及AJAX小结

    其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点,下面就来写一下我的总结. 简介 Javascript JavaScript,一种直译式脚本语言,是一种动态类型.基于原型的语言,内置支持类.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能.然而现在Jav

  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    13 款最热门的 jQuery 图像 360 度旋转插件推荐

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1

  • jQuery实现基本隐藏与显示效果的方法详解

    jQuery实现基本隐藏与显示效果的方法详解

    本文实例讲述了jQuery实现基本隐藏与显示效果的方法.分享给大家供大家参考,具体如下: jQuery 隐藏/显示 语法: $(selector).hide(speed,callback); $(selector).show(speed,callback); eg1: <!DOCTYPE html> <html> <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu

  • javascript/jquery实现点击触发事件的方法分析

    本文实例讲述了javascript/jquery实现点击触发事件的方法.分享给大家供大家参考,具体如下: 点击事件 原声态 和 jquery <%@ page language="java" pageEncoding="utf-8" contentType="text/html;charset=utf-8" import="Tool.Tool" isELIgnored="false" %> &l

  • js仿360开机效果

    js仿360开机效果

    本文实例为大家分享了js仿360开机效果的具体代码,供大家参考,具体内容如下 实现效果: 1.点击关闭图片按钮先往下退出再往右退出 实现步骤: 1.封装运动函数 2.给图片上的关闭设置一个盒子 3.给关闭盒子注册点击事件点击后 4.下面图片高度为0,设置一个缓动动画 5.上面图片宽度为0,设置一个缓动动画 缓动动画代码(带回调函数):` function getStyle(obj,attr){ //兼容性写法获得样式 if(window.getComputedStyle){ return win

随机推荐