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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
node.js中的fs.utimesSync方法使用说明
Dec 15 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
jquery实现用户信息修改验证输入方法汇总
Jul 18 Javascript
详解react服务端渲染(同构)的方法
Sep 21 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
微信小程序实现渐入渐出动画效果
Jun 13 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
捕获关闭窗口的脚本
2009/01/10 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
基于jQuery选择器的整理集合
2013/04/26 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
js实现window.open不被拦截的解决方法汇总
2014/10/30 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
2016/01/14 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
2018/12/10 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
python统计文本文件内单词数量的方法
2015/05/30 Python
python+matplotlib绘制旋转椭圆实例代码
2018/01/12 Python
Python学习之Django的管理界面代码示例
2018/02/10 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python统计python文件中代码,注释及空白对应的行数示例【测试可用】
2018/07/25 Python
python+webdriver自动化环境搭建步骤详解
2019/06/03 Python
python中Mako库实例用法
2020/12/31 Python
HTML5有哪些新特征
2015/12/01 HTML / CSS
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
意大利火车票和铁路通行证专家:ItaliaRail
2019/01/22 全球购物
保证书格式范文
2014/04/28 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
音乐学专业求职信
2014/07/22 职场文书
四风问题对照检查材料
2014/09/22 职场文书
标准单位租车协议书
2014/09/23 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang