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 相关文章推荐
完整显示当前日期和时间的JS代码
Sep 17 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
javascript随机变色实例代码
Oct 15 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
详解TypeScript中的类型保护
Apr 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
开源SNS系统-ThinkSNS
2008/05/18 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP图片库imagemagick安装方法
2014/09/23 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
一步一步教你写一个jQuery的插件教程(Plugin)
2009/09/03 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
JS注释所产生的bug 即使注释也会执行
2013/11/19 Javascript
玩转方法:call和apply
2014/05/08 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
AngularJS基础 ng-include 指令简单示例
2016/08/01 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
layui实现数据分页功能
2019/07/27 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
Python callable内置函数原理解析
2020/03/05 Python
python3中确保枚举值代码分析
2020/12/02 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
机械专业个人求职自荐信格式
2013/09/21 职场文书
刊首寄语大全
2014/04/11 职场文书
美术课外活动总结
2014/07/08 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS
基于python的matplotlib制作双Y轴图
2021/04/20 Python
HTML常用标签超详细整理
2022/03/19 HTML / CSS