JS实现简单日历特效


Posted in Javascript onJanuary 03, 2020

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

知识点

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

运行效果

JS实现简单日历特效

代码

<!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基础篇
Nov 13 Javascript
在UpdatePanel内jquery easyui效果失效的解决方法
Apr 11 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
jQuery选择器之子元素选择器详解
Sep 18 jQuery
原生js中ajax访问的实例详解
Sep 19 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
JSON stringify方法原理及实例解析
Oct 23 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
jQuery实现的图片点击放大缩小功能案例
Jan 02 #jQuery
You might like
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
js对象与打印对象分析比较
2013/04/23 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Vuex简单入门
2017/04/19 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
python查找第k小元素代码分享
2013/12/18 Python
python简单读取大文件的方法
2016/07/01 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python+opencv像素的加减和加权操作的实现
2019/07/14 Python
python傅里叶变换FFT绘制频谱图
2019/07/19 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
python的dict判断key是否存在的方法
2020/12/09 Python
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
Wilson体育用品官网:美国著名运动器材品牌
2019/05/12 全球购物
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
24岁生日感言
2014/01/13 职场文书
小学生新学期寄语
2014/01/19 职场文书
大学生党员自我评价范文
2014/04/09 职场文书
家庭贫困证明
2015/06/16 职场文书
安全教育培训心得体会
2016/01/15 职场文书
《正比例》教学反思
2016/02/23 职场文书
MySQL创建索引需要了解的
2021/04/08 MySQL
React实现动效弹窗组件
2021/06/21 Javascript