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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
Javascript 表单之间的数据传递代码
Dec 04 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
May 24 Javascript
jQuery中:radio选择器用法实例
Jan 03 Javascript
JS如何判断json是否为空
Jul 06 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
react ant Design手动设置表单的值操作
Oct 31 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
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP中常见的缓存技术实例分析
2015/09/23 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
php实现的debug log日志操作类实例
2016/07/12 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
FF IE兼容性的修改小结
2009/09/02 Javascript
Jquery 扩展方法
2010/05/06 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JavaScript多并发问题如何处理
2015/10/28 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
2017/09/26 jQuery
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
bmob js-sdk 在vue中的使用教程
2018/01/21 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
python+matplotlib绘制简单的海豚(顶点和节点的操作)
2018/01/02 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
使用tensorflow实现线性回归
2018/09/08 Python
使用 pytorch 创建神经网络拟合sin函数的实现
2020/02/24 Python
DJI全球:DJI Global
2021/03/15 全球购物
《雷雨》教学反思
2014/02/20 职场文书
党员领导干部承诺书
2014/05/28 职场文书
财务管理专业毕业生求职信
2014/06/02 职场文书
创先争优标语
2014/06/27 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
django学习之ajax post传参的2种格式实例
2021/05/14 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫