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 实现的点击复制代码
Mar 24 Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
javascript中打印当前的时间实现思路及代码
Dec 18 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
JS动态修改网页body的背景色实例代码
Oct 07 Javascript
浅谈Vue内置component组件的应用场景
Mar 27 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
php 常用的系统函数
2017/02/07 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
React组件的三种写法总结
2017/01/12 Javascript
vue实现简单表格组件实例详解
2017/04/16 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
[00:30]塑造者的传承礼包-戴泽“暗影之焰”套装展示视频
2014/04/04 DOTA
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
python基础知识小结之集合
2015/11/25 Python
python数据结构学习之实现线性表的顺序
2018/09/28 Python
在Python中画图(基于Jupyter notebook的魔法函数)
2019/10/28 Python
在Django中预防CSRF攻击的操作
2020/03/13 Python
Numpy ndarray 多维数组对象的使用
2021/02/10 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
幼儿园大班毕业评语
2014/12/31 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
医生辞职信范文
2015/03/02 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
运动会闭幕式致辞
2015/07/29 职场文书
获奖感言一句话
2015/07/31 职场文书
四年级数学教学反思
2016/02/16 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python