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实现动态添加小广告
Jul 11 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
React中jquery引用的实现方法
Sep 12 jQuery
jquery实现楼层滚动效果
Jan 01 jQuery
vue.js2.0点击获取自己的属性和jquery方法
Feb 23 jQuery
jQuery实现基本动画效果的方法详解
Sep 06 jQuery
jQuery实现的别踩白块小游戏完整示例
Jan 07 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery实现有过渡效果的tab切换
Jul 17 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
re0第二季蕾姆被制作组打入冷宫!艾米莉亚女主扶正,原因唏嘘
2020/04/02 日漫
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
服务器web工具 php环境下
2010/12/29 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP钩子与简单分发方式实例分析
2017/09/04 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
Javascript 获取链接(url)参数的方法
2009/02/15 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
javascript RegExp 使用说明
2016/05/21 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
[03:38]TI4西雅图DOTA2前线报道 71专访
2014/07/08 DOTA
[53:38]OG vs LGD 2018国际邀请赛淘汰赛BO3 第三场 8.26
2018/08/30 DOTA
python实现360皮肤按钮控件示例
2014/02/21 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
Python3.6通过自带的urllib通过get或post方法请求url的实例
2018/05/10 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
ansible动态Inventory主机清单配置遇到的坑
2020/01/19 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
语文复习计划
2015/01/19 职场文书
golang中的空slice案例
2021/04/27 Golang
Python自动化爬取天眼查数据的实现
2021/06/15 Python