AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

简单的个人博客日历代码，时钟演示

2016-03-15 2291
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

这里写图片描述


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="Html日历插件，Html精美日历插件，Jquery多功能日历插件" />
<meta name="description" content="Html日历插件，多功能-彭亚欧个人博客代码演示中心" />
<title>Html日历插件</title>
<style type="text/css">
body {
    background-color: #efefef;
}
#CalendarMain {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    margin: 0 auto;
    margin-top: 100px;
}
#title {
    width: 100%;
    height: 30px;
    background-color: #b9121b;
}
.selectBtn {
    font-weight: 900;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    padding: 7px 10px 6px 10px;
}
.selectBtn:hover {
    background-color: #1d953f;
}
.selectYear {
    float: left;
    margin-left: 50px;
    position: absolute;
}
.selectMonth {
    float: left;
    margin-left: 120px;
    position: absolute;
}
.month {
    float: left;
    position: absolute;
}
.nextMonth {
    float: right;
}
.currentDay {
    float: right;
}
#context {
    background-color: #fff;
    width: 100%;
}
.week {
    width: 100%;
    height: 30px;
}
.week>h3 {
    float: left;
    color: #808080;
    text-align: center;
    margin: 0;
    padding: 0;
    margin-top: 5px;
    font-size: 16px;
}
.dayItem {
    float: left;
}
.lastItem {
    color: #d1c7b7 !important;
}
.item {
    color: #333;
    float: left;
    text-align: center;
    cursor: pointer;
    margin: 0;
    font-family: "微软雅黑";
    font-size: 13px;
}
.item:hover {
    color: #b9121b;
}
.currentItem>a {
    background-color: #b9121b;
    width: 25px;
    line-height: 25px;
    float: left;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
}
#foots {
    width: 100%;
    height: 35px;
    background-color: #fff;
    border-top: 1px solid #ccc;
    margin-top: -1px;
}
#footNow {
    float: left;
    margin: 6px 0 0 5px;
    color: #009ad6;
    font-family: "微软雅黑";
}
#Container {
    overflow: hidden;
    float: left;
}
#center {
    width: 100%;
    overflow: hidden;
}
#centerMain {
    width: 300%;
    margin-left: -100%;
}
#selectYearDiv {
    float: left;
    background-color: #fff;
}
#selectYearDiv>div {
    float: left;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 16px;
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    cursor: pointer;
    color: #909090;
}
.currentYearSd, .currentMontSd {
    color: #ff4400 !important;
}
#selectMonthDiv {
    float: left;
    background-color: #fff;
}
#selectMonthDiv>div {
    color: #909090;
    float: left;
    text-align: center;
    font-family: "微软雅黑";
    font-size: 16px;
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    cursor: pointer;
}
#selectYearDiv>div:hover, #selectMonthDiv>div:hover {
    background-color: #efefef;
}
#centerCalendarMain {
    float: left;
}
</style>
</head>
<body>
<div id="Demo">
<div id="CalendarMain">
  <div id="title"> <a class="selectBtn month" href="javascript:" onclick="CalendarHandler.CalculateLastMonthDays();"><</a><a class="selectBtn selectYear" href="javascript:" onClick="CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart);">2014年</a><a class="selectBtn selectMonth" onClick="CalendarHandler.CreateSelectMonth()">6月</a> <a class="selectBtn nextMonth" href="javascript:" onClick="CalendarHandler.CalculateNextMonthDays();">></a><a class="selectBtn currentDay" href="javascript:" onClick="CalendarHandler.CreateCurrentCalendar(0,0,0);">今天</a></div>
  <div id="context">
    <div class="week">
      <h3> 一 </h3>
      <h3> 二 </h3>
      <h3> 三 </h3>
      <h3> 四 </h3>
      <h3> 五 </h3>
      <h3> 六 </h3>
      <h3> 日 </h3>
    </div>
    <div id="center">
      <div id="centerMain">
        <div id="selectYearDiv"></div>
        <div id="centerCalendarMain">
          <div id="Container"></div>
        </div>
        <div id="selectMonthDiv"></div>
      </div>
    </div>
    <div id="foots"><a id="footNow">19:14:34</a></div>
  </div>
</div>
</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js"></script>
<script type="text/javascript">
        $(document).ready(function(e) {
            CalendarHandler.initialize();
        });

        var CalendarHandler = {
            currentYear: 0,
            currentMonth: 0,
            isRunning: false,
            showYearStart:2009,
            tag:0,
            initialize: function() {
                $calendarItem = this.CreateCalendar(0, 0, 0);
                $("#Container").append($calendarItem);

                $("#context").css("height", $("#CalendarMain").height() - 65 + "px");
                $("#center").css("height", $("#context").height() - 30 + "px");
                $("#selectYearDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");
                $("#selectMonthDiv").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");
                $("#centerCalendarMain").css("height", $("#context").height() - 30 + "px").css("width", $("#context").width() + "px");

                $calendarItem.css("height", $("#context").height() - 30 + "px"); //.css("visibility","hidden");
                $("#Container").css("height", "0px").css("width", "0px").css("margin-left", $("#context").width() / 2 + "px").css("margin-top", ($("#context").height() - 30) / 2 + "px");
                $("#Container").animate({
                    width: $("#context").width() + "px",
                    height: ($("#context").height() - 30) * 2 + "px",
                    marginLeft: "0px",
                    marginTop: "0px"
                }, 300, function() {
                    $calendarItem.css("visibility", "visible");
                });
                $(".dayItem").css("width", $("#context").width() + "px");
                var itemPaddintTop = $(".dayItem").height() / 6;
                $(".item").css({
                    "width": $(".week").width() / 7 + "px",
                    "line-height": itemPaddintTop + "px",
                    "height": itemPaddintTop + "px"
                });
                $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
                $(".week>h3").css("width", $(".week").width() / 7 + "px");
                this.RunningTime();
            },
            CreateSelectYear: function(showYearStart) {
                CalendarHandler.showYearStart=showYearStart;
                $(".currentDay").show();
                $("#selectYearDiv").children().remove();
                var yearindex = 0;
                for (var i = showYearStart; i < showYearStart+12; i++) {
                    yearindex++;
                    if(i==showYearStart){
                        $last=$("<div>往前</div>");
                        $("#selectYearDiv").append($last);
                        $last.click(function(){
                            CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart-10);
                        });
                        continue;
                    }
                    if(i==showYearStart+11){
                        $next=$("<div>往后</div>");
                        $("#selectYearDiv").append($next);
                        $next.click(function(){
                            CalendarHandler.CreateSelectYear(CalendarHandler.showYearStart+10);
                        });
                        continue;
                    }

                    if (i == this.currentYear) {
                        $yearItem=$("<div class=\"currentYearSd\" id=\"" + yearindex + "\">" + i + "</div>")

                    }
                    else{
                         $yearItem=$("<div id=\"" + yearindex + "\">" + i + "</div>");
                    }
                    $("#selectYearDiv").append($yearItem);
                    $yearItem.click(function(){
                        $calendarItem=CalendarHandler.CreateCalendar(Number($(this).html()),1,1);
                        $("#Container").append($calendarItem);
                        CalendarHandler.CSS()
                        CalendarHandler.isRunning = true;
                        $($("#Container").find(".dayItem")[0]).animate({
                        height: "0px"
                        }, 300, function() {
                        $(this).remove();
                        CalendarHandler.isRunning = false;
                        });
                        $("#centerMain").animate({
                        marginLeft: -$("#center").width() + "px"
                    }, 500);
                    });
                    if (yearindex == 1 || yearindex == 5 || yearindex == 9) $("#selectYearDiv").find("#" + yearindex).css("border-left-color", "#fff");
                    if (yearindex == 4 || yearindex == 8 || yearindex == 12) $("#selectYearDiv").find("#" + yearindex).css("border-right-color", "#fff");

                }
                $("#selectYearDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
                $("#centerMain").animate({
                    marginLeft: "0px"
                }, 300);
            },
            CreateSelectMonth: function() {
                $(".currentDay").show();
                $("#selectMonthDiv").children().remove();
                for (var i = 1; i < 13; i++) {
                    if (i == this.currentMonth) $monthItem=$("<div class=\"currentMontSd\" id=\"" + i + "\">" + i + "月</div>");
                    else  $monthItem=$("<div id=\"" + i + "\">" + i + "月</div>");
                    $("#selectMonthDiv").append($monthItem);
                    $monthItem.click(function(){
                        $calendarItem=CalendarHandler.CreateCalendar(CalendarHandler.currentYear,Number($(this).attr("id")),1);
                        $("#Container").append($calendarItem);
                        CalendarHandler.CSS()
                        CalendarHandler.isRunning = true;
                        $($("#Container").find(".dayItem")[0]).animate({
                        height: "0px"
                        }, 300, function() {
                        $(this).remove();
                        CalendarHandler.isRunning = false;
                        });
                        $("#centerMain").animate({
                        marginLeft: -$("#center").width() + "px"
                    }, 500);
                    });
                    if (i == 1 || i == 5 || i == 9) $("#selectMonthDiv").find("#" + i).css("border-left-color", "#fff");
                    if (i == 4 || i == 8 || i == 12) $("#selectMonthDiv").find("#" + i).css("border-right-color", "#fff");
                }
                $("#selectMonthDiv>div").css("width", ($("#center").width() - 4) / 4 + "px").css("line-height", ($("#center").height() - 4) / 3 + "px");
                $("#centerMain").animate({
                    marginLeft: -$("#center").width() * 2 + "px"
                }, 300);
            },
            IsRuiYear: function(aDate) {
                return (0 == aDate % 4 && (aDate % 100 != 0 || aDate % 400 == 0));
            },
            CalculateWeek: function(y, m, d) {
                var arr = "7123456".split("");
                with(document.all) {
                    var vYear = parseInt(y, 10);
                    var vMonth = parseInt(m, 10);       
                    var vDay = parseInt(d, 10);
                }
                var week =arr[new Date(y,m-1,vDay).getDay()];
                return week;
            },
            CalculateMonthDays: function(m, y) {
                var mDay = 0;
                if (m == 0 || m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
                    mDay = 31;
                } else {
                    if (m == 2) {
                        //判断是否为芮年
                        var isRn = this.IsRuiYear(y);
                        if (isRn == true) {
                            mDay = 29;
                        } else {
                            mDay = 28;
                        }
                    } else {
                        mDay = 30;
                    }
                }
                return mDay;
            },
            CreateCalendar: function(y, m, d) {
                $dayItem = $("<div class=\"dayItem\"></div>");
                //获取当前月份的天数
                var nowDate = new Date();
                if(y==nowDate.getFullYear()&&m==nowDate.getMonth()+1||(y==0&&m==0))
                $(".currentDay").hide();
                var nowYear = y == 0 ? nowDate.getFullYear() : y;
                this.currentYear = nowYear;
                var nowMonth = m == 0 ? nowDate.getMonth() + 1 : m;
                this.currentMonth = nowMonth;
                var nowDay = d == 0 ? nowDate.getDate() : d;
                $(".selectYear").html(nowYear + "年");
                $(".selectMonth").html(nowMonth + "月");
                var nowDaysNub = this.CalculateMonthDays(nowMonth, nowYear);
                //获取当月第一天是星期几
                //var weekDate = new Date(nowYear+"-"+nowMonth+"-"+1);
                //alert(weekDate.getDay());
                var nowWeek = parseInt(this.CalculateWeek(nowYear, nowMonth, 1));
                //nowWeek=weekDate.getDay()==0?7:weekDate.getDay();
                //var nowWeek=weekDate.getDay();
                //获取上个月的天数
                var lastMonthDaysNub = this.CalculateMonthDays((nowMonth - 1), nowYear);

                if (nowWeek != 0) {
                    //生成上月剩下的日期
                    for (var i = (lastMonthDaysNub - (nowWeek - 1)); i < lastMonthDaysNub; i++) {
                        $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
                    }
                }

                //生成当月的日期
                for (var i = 0; i < nowDaysNub; i++) {
                    if (i == (nowDay - 1)) $dayItem.append("<div class=\"item currentItem\"><a>" + (i + 1) + "</a></div>");
                    else $dayItem.append("<div class=\"item\"><a>" + (i + 1) + "</a></div>");
                }

                //获取总共已经生成的天数
                var hasCreateDaysNub = nowWeek + nowDaysNub;
                //如果小于42，往下个月推算
                if (hasCreateDaysNub < 42) {
                    for (var i = 0; i <= (42 - hasCreateDaysNub); i++) {
                        $dayItem.append("<div class=\"item lastItem\"><a>" + (i + 1) + "</a></div>");
                    }
                }

                return $dayItem;
            },
            CSS: function() {
                var itemPaddintTop = $(".dayItem").height() / 6;
                $(".item").css({
                    "width": $(".week").width() / 7 + "px",
                    "line-height": itemPaddintTop + "px",
                    "height": itemPaddintTop + "px"
                });
                $(".currentItem>a").css("margin-left", ($(".item").width() - 25) / 2 + "px").css("margin-top", ($(".item").height() - 25) / 2 + "px");
            },
            CalculateNextMonthDays: function() {
                if (this.isRunning == false) {
                    $(".currentDay").show();
                    var m = this.currentMonth == 12 ? 1 : this.currentMonth + 1;
                    var y = this.currentMonth == 12 ? (this.currentYear + 1) : this.currentYear;
                    var d = 0;
                    var nowDate = new Date();
                    if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();
                    else d = 1;
                    $calendarItem = this.CreateCalendar(y, m, d);
                    $("#Container").append($calendarItem);

                    this.CSS();
                    this.isRunning = true;
                    $($("#Container").find(".dayItem")[0]).animate({
                        height: "0px"
                    }, 300, function() {
                        $(this).remove();
                        CalendarHandler.isRunning = false;
                    });
                }
            },
            CalculateLastMonthDays: function() {
                if (this.isRunning == false) {
                    $(".currentDay").show();
                    var nowDate = new Date();                   
                    var m = this.currentMonth == 1 ? 12 : this.currentMonth - 1;
                    var y = this.currentMonth == 1 ? (this.currentYear - 1) : this.currentYear;
                    var d = 0;

                    if (y == nowDate.getFullYear() && m == nowDate.getMonth() + 1) d = nowDate.getDate();
                    else d = 1;
                    $calendarItem = this.CreateCalendar(y, m, d);
                    $("#Container").append($calendarItem);
                    var itemPaddintTop = $(".dayItem").height() / 6;
                    this.CSS();
                    this.isRunning = true;
                    $($("#Container").find(".dayItem")[0]).animate({
                        height: "0px"
                    }, 300, function() {
                        $(this).remove();
                        CalendarHandler.isRunning = false;
                    });
                }
            },
            CreateCurrentCalendar: function() {
                if (this.isRunning == false) {
                    $(".currentDay").hide();
                    $calendarItem = this.CreateCalendar(0, 0, 0);
                    $("#Container").append($calendarItem);
                    this.isRunning = true;
                    $($("#Container").find(".dayItem")[0]).animate({
                        height: "0px"
                    }, 300, function() {
                        $(this).remove();
                        CalendarHandler.isRunning = false;
                    });
                    this.CSS();
                    $("#centerMain").animate({
                        marginLeft: -$("#center").width() + "px"
                    }, 500);
                }
            },
            RunningTime: function() {
                var mTiming = setInterval(function() {
                    var nowDate = new Date();
                    var h=nowDate.getHours()<10?"0"+nowDate.getHours():nowDate.getHours();
                    var m=nowDate.getMinutes()<10?"0"+nowDate.getMinutes():nowDate.getMinutes();
                    var s=nowDate.getSeconds()<10?"0"+nowDate.getSeconds():nowDate.getSeconds();
                    var nowTime = h + ":" + m + ":" + s;
                    $("#footNow").html(nowTime);
                }, 1000);

            }
        }
        </script>

<!--[if IE 7]>
   <style type="text/css">
            .menuItem{ margin-left:-130px; } 
        </style>
    <![endif]-->

</html>

这里写图片描述
这里写图片描述


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link href="fliptimer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.pengyaou.com/Content/Front/js/jquery-1.8.0.min.js"></script>
<title>无标题文档</title>
</head>

<body>
<div class="butns"><a href="index1.html">时钟效果</a><a href="index2.html">倒计时</a><a href="index.html">10秒倒计时（回调函数）</a></div>
<div class="dowebok">
    <div class="hours"></div>
    <div class="minutes"></div>
    <div class="seconds"></div>
</div>
<script src="jquery.fliptimer.js"></script>
<script>
$(function(){
    var d = new Date();
    var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + (d.getSeconds() + 10);
    $('.dowebok').flipTimer({
        direction: 'down',
        date: myDate,
        callback: function(){
            alert('倒计时结束！');
        }
    });
});

</script>

</body>
</html>
文章标签：
前端开发
容器
JavaScript
cometwo123
目录
相关文章
渐暖
|
7月前
|
C#
C# 如何使用倒计时
C# 如何使用倒计时
渐暖
235 0
你的小笔记本YY
|
7月前
【单片机】简单的自定义延时程序设计（代码演示）
【单片机】简单的自定义延时程序设计（代码演示）
你的小笔记本YY
56 0
技术君
|
7月前
|
JSON 小程序 安全
【经验分享】如何实现小程序日历范围选择功能
【经验分享】如何实现小程序日历范围选择功能
技术君
415 9
瑞崽崽崽
|
7月前
|
前端开发 JavaScript
前端知识笔记（十五）———JS实现日历功能
前端知识笔记（十五）———JS实现日历功能
瑞崽崽崽
177 0
前端歌谣
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用1
前端歌谣
41 0
前端歌谣
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用5
前端歌谣
59 0
前端歌谣
|
前端开发
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端学习笔记202305学习笔记第二十二天-新增修改弹框复用3
前端歌谣
64 0
萝卜头不吃萝卜头
倒计时功能制作
今天制作一个商城项目距离抢购还剩多长时间的一个小功能 首先要知道这个倒计时是不断的变化的，所以需要用到定时器来自动变化(setInterval)，有三个标签存放时分秒，再利用innerHTML将计算出来的时间放入三个标签内，第一次执行也是间隔毫秒数，因此刷新页面会有空白，我们最好采取封装函数的方式，这样可以先调用一次这个函数，防止刚开始刷新页面有空白问题。
萝卜头不吃萝卜头
138 0
Mango易创
|
Java 数据安全/隐私保护 容器
背记不如实战系列-javaGUI实例-日历制作
背记不如实战系列-javaGUI实例-日历制作
Mango易创
154 0
刘金玉编程
零基础VB教程033期：日期时间类型活学活用-案例倒计时工具
零基础VB教程033期：日期时间类型活学活用-案例倒计时工具
刘金玉编程
69 0

热门文章

最新文章

  • 1
    天猫精灵开放平台-之小百科测评
  • 2
    语义检索系统：基于Milvus 搭建召回系统抽取向量进行检索，加速索引
  • 3
    3D立方体图片切换动画
  • 4
    模态对话框和非模态对话框
  • 5
    java03
  • 6
    冒泡排序
  • 7
    Windows XP客户端加域操作手册上
  • 8
    微信 6.5.1 for iOS发布 可以在朋友圈分享相册中的视频
  • 9
    Chapter 1: Creating the GUI Form and Adding Widgets
  • 10
    【Mockplus教程】帐号和购买
  • 1
    「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
    34
  • 2
    赋能加速AI应用交付，F5 BIG-IP Next for Kubernetes方案解读
    30
  • 3
    RAG分块策略：主流方法（递归、jina-seg）+前沿推荐（Meta-chunking、Late chunking、SLM-SFT）
    28
  • 4
    Python学习的自我理解和想法（2）
    30
  • 5
    Transformer图解
    36
  • 6
    API安全专题：如何有效应对新型Bot攻击？
    18
  • 7
    Selenium IDE：Web自动化测试的得力助手
    34
  • 8
    《docker高级篇（大厂进阶）：5.Docker-compose容器编排》包括是什么能干嘛去哪下、Compose核心概念、Compose使用三个步骤、Compose常用命令、Compose编排微服务
    51
  • 9
    24/7全时守护：AI视频监控技术的深度实现与应用分享
    43
  • 10
    《docker高级篇（大厂进阶）：6.Docker轻量级可视化工具Portainer》
    27

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月