JS+jQuery显示开机时间(精确到秒)

这次给大家带来JS+jQuery显示开机时间(精确到秒),JS+jQuery显示开机时间的注意事项有哪些,下面就是实战案例,一起来看一下。

实现原理:

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

实现代码:

 仿360开机效果    *{   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;  } 

X

1分12秒

天气:晴天

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"; } }

登录后复制

PS:JS 实现时间倒计时

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); 

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是JS+jQuery显示开机时间(精确到秒)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771975.html

(0)
上一篇 2025年3月8日 13:07:25
下一篇 2025年3月8日 13:07:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 原生JS怎么异步请求实现Ajax

    这次给大家带来原生JS怎么异步请求实现Ajax,原生JS异步请求实现Ajax的注意事项有哪些,下面就是实战案例,一起来看一下。 在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery…

    编程技术 2025年3月8日
    200
  • vue.js划分组件详细介绍

    这次给大家带来Vue.js如何划分组件,Vue.js划分组件的注意事项有哪些,下面就是实战案例,一起来看一下。 常见的一些页面,大家坐在一起敲代码就可以了,做完这个页面再做别的页面,但是作为一个功能复杂的系统,尤其是使用一些适合模块化开发的…

    编程技术 2025年3月8日
    200
  • vue.js父子组件传参详细介绍

    这次给大家带来vue.js父子组件传参详细介绍,vue.js父子组件传参的注意事项有哪些,下面就是实战案例,一起来看一下。 1.新建componentA.vue组件,代码如下: store.js代码如下: const STORAGE_KEY…

    编程技术 2025年3月8日
    200
  • vue.js+todolist的代码使用

    这次给大家带来vue.js+todolist的代码使用,vue.js+todolist代码使用的注意事项有哪些,下面就是实战案例,一起来看一下。 案例知识点: 1.vue.js基础知识 2.HTML5 本地存储localstorage st…

    编程技术 2025年3月8日
    200
  • JS按钮禁用和启用使用详解

    这次给大家带来JS按钮禁用和启用使用详解,使用JS按钮禁用和启用的注意事项有哪些,下面就是实战案例,一起来看一下。 废话不多说了,直接给大家贴代码了,具体代码如下所述: 按钮启用和禁用function btn1(){ document.ge…

    编程技术 2025年3月8日
    200
  • vue.js常用指令总结归纳

    这次给大家带来vue.js常用指令总结归纳,vue.js常用指令使用的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动…

    编程技术 2025年3月8日
    200
  • vue.js搭建图书管理平台的技术解答

    这次给大家带来vue.js搭建图书管理平台的技术解答,vue.js搭建图书管理平台的注意事项有哪些,下面就是实战案例,一起来看一下。 Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,…

    编程技术 2025年3月8日
    200
  • JS中怎样操作代码执行的先后顺序

    这次给大家带来JS中怎样操作代码执行的先后顺序,JS操作代码执行先后顺序的注意事项有哪些,下面就是实战案例,一起来看一下。 一、js—>单线程    严格意义上来说,javascript没有多线程的概念,所有的程序都是单线…

    编程技术 2025年3月8日
    200
  • 解析JS的优先队列与循环队列

    这次给大家带来解析JS的优先队列与循环队列,解析JS优先队列与循环队列的注意事项有哪些,下面就是实战案例,一起来看一下。 优先队列 实现一个优先队列:设置优先级,然后在正确的位置添加元素。 我们这里实现的是最小优先队列,优先级的值小(优先级…

    编程技术 2025年3月8日
    200
  • JS数据结构的双向链表定义

    这次给大家带来JS数据结构的双向链表定义,使用JS数据结构双向链表定义的注意事项有哪些,下面就是实战案例,一起来看一下。 双向链表和普通链表的区别在于,在链表中,一个节点只有链向下一个节点的链接,而在双向链表中,链接是双向的:一个链向下一个…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论