编程 Javascript

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实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

fyk曩昔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

基于jquery的滚动条滚动固定div(附演示下载)

Oct 29 Javascript

jQuery实现行文字链接提示效果的方法

Mar 10 Javascript

jQuery验证插件validation使用指南

Apr 21 Javascript

JSON遍历方式实例总结

Dec 07 Javascript

AngularJS中的过滤器filter用法完全解析

Apr 22 Javascript

基于jPlayer三分屏的制作方法

Dec 21 Javascript

基于VUE移动音乐WEBAPP跨域请求失败的解决方法

Jan 16 Javascript

pace.js和NProgress.js两个加载进度插件的一点小总结

Jan 31 Javascript

vue路由组件按需加载的几种方法小结

Jul 12 Javascript

通过cordova将vue项目打包为webapp的方法

Feb 02 Javascript

Bootstarp在pycharm中的安装及简单的使用方法

Apr 19 Javascript

Vue中 axios delete请求参数操作

Aug 25 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