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插件Echarts实现的渐变色柱状图
Mar 23 jQuery
jQuery实现Select下拉列表进行状态选择功能
Mar 30 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
jQuery自定义多选下拉框效果
Jun 19 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
jQuery实现简单日历效果
Jul 05 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
JavaScript设计模式之单例模式实例
2014/09/24 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
javascript弹出拖动窗口
2015/08/11 Javascript
javascript实现日期时间动态显示示例代码
2015/09/08 Javascript
JS实现的车标图片提示效果代码
2015/10/10 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
Angularjs实现页面模板清除的方法
2018/07/20 Javascript
使用Vuex解决Vue中的身份验证问题
2018/09/28 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
2019/01/28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
详解django三种文件下载方式
2018/04/06 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
解决python 上传图片限制格式问题
2019/10/30 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
应用化学专业本科生求职信
2013/09/29 职场文书
行政经理岗位职责
2013/11/09 职场文书
环保专项行动方案
2014/05/12 职场文书
公证委托书标准格式
2014/09/11 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
python 镜像环境搭建总结
2022/09/23 Python