脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS日历特效

JS实现简单日历特效

 更新时间：2020年01月03日 08:37:53   作者：KaiSarH  
这篇文章主要为大家详细介绍了JS实现简单日历特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JS实现简单日历特效的具体代码，供大家参考，具体内容如下

知识点

1.引入我的工具包
2.运用JavaScript内置对象 Date

运行效果

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 250px;
   height: 300px;
   background-color: orangered;
   margin: 100px auto;
   padding: 30px;
  }
  #box_top{
   font-size: 22px;
   color: #fff;
   margin-bottom: 40px;
   display: flex;
   justify-content: space-around;
  }
  #box_bottom{
   width: 90%;
   height: 70%;
   margin: 0 auto;
   background-color: orange;
   font-size: 50px;
   color:#fff;
   display: flex;
   justify-content: center;
   align-items: center;
  }
 </style>
</head>
<body>
 <div id="box">
  <div id="box_top">
   <span id="year"></span>
   <span>年</span>
   <span id="month"></span>
   <span>月</span>
   <span id="day"></span>
   <span>日</span>
   <span id="week"></span>
  </div>
  <div id="box_bottom">
   <span id="hour"></span>
   <span>:</span>
   <span id="minute"></span>
   <span>:</span>
   <span id="second"></span>
  </div>
 </div>
 <script src="../../MyTools/MyTools.js"></script>
 <script>
  window.addEventListener('load',function (ev) {
   setInterval(function () {
    myTool.$('year').innerText = myTool.getTime().year;
    myTool.$('month').innerText = myTool.getTime().month < 10 ? '0' + myTool.getTime().month : myTool.getTime().month;
    myTool.$('day').innerText = myTool.getTime().day < 10 ? '0' + myTool.getTime().day : myTool.getTime().day;
    myTool.$('week').innerText = myTool.getTime().week ;
    myTool.$('hour').innerText = myTool.getTime().hour < 10 ? '0' + myTool.getTime().hour : myTool.getTime().hour;
    myTool.$('minute').innerText = myTool.getTime().minute < 10 ? '0' + myTool.getTime().minute : myTool.getTime().minute;
    myTool.$('second').innerText = myTool.getTime().second < 10 ? '0' + myTool.getTime().second : myTool.getTime().second;
   },1000);


  },false);
 </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • JavaScript的变量声明与声明提前用法实例分析

    JavaScript的变量声明与声明提前用法实例分析

    这篇文章主要介绍了JavaScript的变量声明与声明提前用法,结合实例形式分析了JavaScript变量声明与声明提前相关原理、用法及操作注意事项,需要的朋友可以参考下
    2019-11-11
  • 基于Web标准的UI组件 — 树状菜单(2)

    基于Web标准的UI组件 — 树状菜单(2)

    基于Web标准的UI组件 — 树状菜单(2)...
    2006-09-09
  • js实现鼠标点击左上角滑动菜单效果代码

    js实现鼠标点击左上角滑动菜单效果代码

    这篇文章主要介绍了js实现鼠标点击左上角滑动菜单效果代码,涉及JavaScript基于鼠标事件动态变换页面元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 一道常被人轻视的web前端常见面试题(JS)

    一道常被人轻视的web前端常见面试题(JS)

    面试题是招聘公司和开发者都非常关心的话题，公司希望通过它了解开发者的真实水平和细节处理能力，而开发者希望能够最大程度地展示自己的水平（甚至超常发挥）。本文提供了众多前端开发面试题，无论是招聘方还是应聘方都值得一看
    2016-02-02
  • 动态修改DOM 里面的 id 属性的弊端分析

    动态修改DOM 里面的 id 属性的弊端分析

    我不知道是否有什么标准规定不允许修改id属性，或者不建议修改id属性，总之IE对此支持不佳。
    2008-09-09
  • js获取TreeView控件选中节点的Text和Value值的方法

    js获取TreeView控件选中节点的Text和Value值的方法

    在实际项目中，遇到一个问题，首先弹出一个新窗口，新窗口中放了一个TreeView控件，现在要解决的是，如何单击TreeView中一个节点，返回Text和Value到父页面并关闭该新窗口,本文将详细介绍此方法的实现
    2012-11-11
  • 微信小程序三级联动地址选择器的实例代码

    微信小程序三级联动地址选择器的实例代码

    本篇文章主要介绍了微信小程序三级联动地址选择器的实例代码，具有一定的参考价值，有兴趣的可以了解一下
    2017-07-07
  • 学习jQuey中的return false

    学习jQuey中的return false

    这篇文章主要介绍了jQuey中的return false作用，以及解决jquery中的return false不起作用的方法，感兴趣的小伙伴们可以参考一下
    2015-12-12
  • JS原生轮播图的简单实现(推荐)

    JS原生轮播图的简单实现(推荐)

    下面小编就为大家带来一篇JS原生轮播图的简单实现(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • JS中addEventListener的使用示例详解

    JS中addEventListener的使用示例详解

    addEventListener是JavaScript中的一个方法,用于向一个元素添加事件监听器,本文给大家介绍JS中addEventListener的使用示例代码,感兴趣的朋友跟随小编一起看看吧
    2023-10-10

最新评论