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插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
jquery单击文字或图片内容放大并居中显示
Jun 23 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
jQuery实现页码跳转式动态数据分页
Dec 31 jQuery
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
jquery的$().each和$.each的区别
Jan 18 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
JQuery获得内容和属性方法解析
May 30 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
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
javascript开发随笔二 动态加载js和文件
2011/11/25 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
详解Node.js 命令行程序开发教程
2017/06/07 Javascript
vue-resource拦截器设置头信息的实例
2017/10/27 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Python爬豆瓣电影实例
2018/02/23 Python
python leetcode 字符串相乘实例详解
2018/09/03 Python
Python中的集合介绍
2019/01/28 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
python利用线程实现多任务
2020/09/18 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
行政助理的职责
2013/11/14 职场文书
外贸英语毕业生自荐信
2013/11/14 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
志愿者服务感言
2014/02/27 职场文书
网页美工求职信范文
2014/04/17 职场文书
机动车登记业务委托书
2014/10/08 职场文书
自愿离婚协议书范文2014
2014/10/12 职场文书
历史博物馆观后感
2015/06/05 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书