js实现会跳动的日历效果(完整实例)


Posted in Javascript onOctober 18, 2017

一、简介

编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下:

js实现会跳动的日历效果(完整实例)

年月日,周几,时分秒都会随着系统时间的走动而改变

二、代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Document</title>
 <style type="text/css">
  *{
   margin:0;
   padding: 0; 
   font-size: 0px;
   font-family: '微软雅黑';
  }
  .contain-wrapper{
   margin: 0 auto;
   padding-top: 70px;
   width: 470px;
   height: 230px;
   background: #000000;
   border-radius: 30px;
  }
  .timer-wrapper p{
   font-size: 44px;
   color: #ffffff;
  }
  .year{
   width: 470px;
   text-align: center;
  }
  .timer-footer{
   width: 460px;
   text-align: center;
  }
  .timer-footer p:nth-child(1){
   display: inline-block;
  }
  .timer-footer p:nth-child(2){
   display: inline-block;
  }
 </style>
</head>
<body>
 <div class="contain-wrapper">
  <div class="timer-wrapper">
   <p class="year"></p>
   <div class="timer-footer">
    <p></p>
    <p></p>
   </div>
  </div>
 </div>
</body>
<script type="text/javascript">
  
  /*
  *这是一个获取当前日期的函数
   */
  function showLocaleDate(objb){
   var str = objb.getFullYear()+"年"+(objb.getMonth()+1)+"月"+objb.getDate()+"日";
   return str;
  }
  var year=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[0];

  
  /*
  *这是一个获取星期几的函数
   */
  function showLocaleWeek(objC){
   var weekArray = new Array("日", "一", "二", "三", "四", "五", "六"); 
   var week = objC.getDay(); 
   var weekString = "星期"+ weekArray[week];
   return weekString;
  }
  var wk=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[1];
  /*
  *这是一个获取当前时间的函数
   */

  function showLocaleTime(objD){
   var hh = objD.getHours();
   if(hh<10) hh = '0' + hh;
   var mm = objD.getMinutes();
   if(mm<10) mm = '0' + mm;
   var ss = objD.getSeconds();
   if(ss<10) ss = '0' + ss;
   var reflash=hh + ":" + mm + ":" + ss;
   return reflash;
  }
  var now=document.getElementsByClassName('timer-wrapper')[0].getElementsByTagName('p')[2];

  function showTime(){
   var today=new Date();
   year.innerHTML=showLocaleDate(today);
   wk.innerHTML=showLocaleWeek(today);
    now.innerHTML=showLocaleTime(today);
    window.setTimeout("showTime()",1000);
  }
  showTime();
</script>
</html>

以上这篇js实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JQUERY dialog的用法详细解析
Dec 19 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
javascript实现滑动解锁功能
Mar 22 Javascript
Angular2数据绑定详解
Apr 18 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
node Buffer缓存区常见操作示例
May 04 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
打字效果动画的4种实现方法(超简单)
Oct 18 #Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 #Javascript
基于JavaScript表单脚本(详解)
Oct 18 #Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 #Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 #Javascript
BACKBONE.JS 简单入门范例
Oct 17 #Javascript
JS获取一个表单字段中多条数据并转化为json格式
Oct 17 #Javascript
You might like
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
php自动给网址加上链接的方法
2015/06/02 PHP
PHP的Socket通信之UDP通信实例
2015/07/02 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
2014/10/17 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
微信小程序 http请求详细介绍
2016/10/09 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
2019/05/01 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
[00:12]DAC2018 Miracle-站上中单舞台,他能否再写奇迹?
2018/04/06 DOTA
使用Python操作excel文件的实例代码
2017/10/15 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
行政专员的岗位职责
2014/03/10 职场文书
关于读书的演讲稿
2014/05/07 职场文书
广播体操比赛口号
2014/06/10 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
写给医院的感谢信
2015/01/22 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
深入理解python多线程编程
2021/04/18 Python
Python使用Kubernetes API访问集群
2021/05/30 Python