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


Posted in jQuery onNovember 03, 2017

实现效果:

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开机时间显示效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
最常用的jQuery表单验证(简单)
May 23 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jquery获取img的src值实例介绍
Jan 16 jQuery
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 jQuery
jQuery实现图片切换效果
Oct 19 jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 #jQuery
Vue中正确使用jQuery的方法
Oct 30 #jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
原生JS与jQuery编写简单选项卡
Oct 30 #jQuery
You might like
php小偷相关截取函数备忘
2010/11/28 PHP
PHP生成随机密码类分享
2014/06/25 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
Document 对象的常用方法
2009/07/31 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
js类式继承与原型式继承详解
2016/04/07 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
JS实现重新加载当前页面或者父页面的几种方法
2016/11/30 Javascript
详解Vue中使用Axios拦截器
2019/04/22 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
[51:17]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.22
2019/09/05 DOTA
python中的全局变量用法分析
2015/06/09 Python
Python的Django框架中的数据过滤功能
2015/07/17 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
windows下python虚拟环境virtualenv安装和使用详解
2019/07/16 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
英国独特礼物想法和个性化礼物网站:notonthehighstreet.com
2018/04/16 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
元宵节主持词
2014/03/25 职场文书
培训讲师岗位职责
2014/04/13 职场文书
抗震救灾标语
2014/06/26 职场文书
关于工作经历的证明书
2014/10/11 职场文书
碧霞祠导游词
2015/02/09 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
Golang之sync.Pool使用详解
2021/05/06 Golang