用JavaScript做一个日历和用canvas做一个时钟

最新推荐文章于 2021-02-28 14:52:25 发布
最新推荐文章于 2021-02-28 14:52:25 发布
阅读量838 收藏 1
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40765552/article/details/89855490
版权

最终成果：
在这里插入图片描述
HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日历</title>
    <link rel="stylesheet" href="css/css08.css">
    <link rel="stylesheet" href="tubiao08/iconfont.css">
</head>
<body>

<div id="all" class="all">
    <div class="left" >

    </div>
    <div class="rili">
        <div class="riliTop">
            <span class="iconfont icon-tongyong_zuoyouqiehuan_zuo" id="tongyong_zuoyouqiehuan_zuo"></span>
            <span class="showTime" id="showTime">0000-00</span>
            <span class="iconfont icon-tongyong_rili_xiayige" id="tongyong_rili_xiayige"></span>
        </div>
        <ul class="riliHeader">
            <li>SUN</li>
            <li>MON</li>
            <li>TUE</li>
            <li>WED</li>
            <li>THU</li>
            <li>FRL</li>
            <li>SAT</li>
        </ul>
        <ul class="riliContent" id="riliContent">
        </ul>
    </div>
    <div class="right">
        <div class="picshow">
        <img src="images/num0.png" id="shiShiPic" alt="">
        <img src="images/num0.png"  id="shiGePic" alt="">
        <img src="images/dian.png" alt="">
        <img src="images/num0.png" id="fenShiPic" alt="">
        <img src="images/num0.png" id="fenGePic" alt="">
        <img src="images/dian.png" alt="">
        <img src="images/num0.png" id="shiPic" alt="">
        <img src="images/num0.png" id="gePic" alt="">
        </div>
        <div class="content" id="content">
            0000年00月00日  星期几
        </div>
        <canvas id="drawing" class="draw"></canvas>
    </div>
</div>

<script src="js/js08.js"></script>
</body>
</html>

css样式：

/* public CSS*/
*{
    margin: 0;
    padding: 0;
}
ul,li,ol{list-style: none;}
img {border: none;}

/* public CSS  end*/
.all{
    width: 650px;
    height: 500px;
    background-color: #fadcda;
    float: left;
    margin-left: 100px;
}
.left{
    width: 130px;
    height: 315px;
    background:url("../images/right.png") no-repeat;
    float: left;
    margin-left: 60px;
    margin-top: 80px;
}
.rili{
    margin-top: 80px;
    /*margin-right: 180px;*/
    float: left;
    background-color: #f9f7f8;
    width: 280px;
    height: 315px;
    line-height: 320px;
    /*padding: 20px;*/

}
.riliHeader{
    height: 25px;
    /*border-bottom:1px #ddd solid;*/
    /*background: pink;*/
    /*opacity: 0.7;*/

}
 .riliContent li{
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
     color: #9f9e9e;
    text-align: center;

    /*border:1px #ddd solid;*/
    /*border-radius: 18px;*/
}
.riliHeader li{
    float: left;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    font-family: "MS Reference...";
    font-size: 12px;
    color:#cbcaca;
    /*border:1px #ddd solid;*/

}
.riliContent{
    height: 240px;
    /*background-color: #795da3;*/
    /*opacity: 0.3;*/
}
.riliContent  li .kk{
    color: #F2FAFF;
    border-radius: 20px;
    background-color:#fea7af ;
}
.riliTop{
    height: 30px;
    line-height: 30px;
    text-align: center;
    display: block;
    font-family: 微软雅黑;
    color: #fea7af;
    font-size: 14px;
    margin-top: 25px;
}
.icon-tongyong_rili_xiayige {
    cursor: pointer;
}
.icon-tongyong_zuoyouqiehuan_zuo{
    cursor: pointer;
}
.right{
    float: left;
    width: 140px;
    height: 315px;
    background-color: white;
    /*opacity: 0.2;*/
    border-left: 1px #cdcbcc solid;
    margin-top: 80px;
    position: relative;
}
.right .picshow {
    /*width: 140px;*/
    height: 70px;
    margin-left: 15px;
    line-height: 110px;
}
.content {
    font-size: 8px;
     color:#cbcaca;
    opacity: 0.7;
    margin-left: 5px;}
.bj{
    margin-top: 80px;
    margin-left: 5px;
}


.draw{
    position: absolute;
    top:130px;
    right: 12px;
}

js部分：

{
    let riliContent=document.getElementById("riliContent");
    let showTime=document.getElementById("showTime");
    let tongyong_zuoyouqiehuan_zuo=document.getElementById("tongyong_zuoyouqiehuan_zuo");
    let tongyong_rili_xiayige=document.getElementById("tongyong_rili_xiayige");
    let shiShiPic=document.getElementById("shiShiPic");
    let shiGePic=document.getElementById("shiGePic");
    let fenShiPic=document.getElementById("fenShiPic");
    let fenGePic=document.getElementById("fenGePic");
    let shiPic=document.getElementById("shiPic");
    let gePic=document.getElementById("gePic");
    let content=document.getElementById("content");
    let drawing=document.getElementById("drawing");
    console.info(content);
    console.info(tongyong_rili_xiayige);
    let yYue=["Jan","Feb","Mar","Apr","May","June","Aug","Sept","Oct","Nov","Dec"];
    let picArr=["images/num0.png", "images/num1.png",
        "images/num2.png","images/num3.png",
        "images/num4.png","images/num5.png",
        "images/num6.png","images/num7.png",
        "images/num8.png","images/num9.png"];
    let xq=["日","一","二","三","四","五","六"];
    let nowDate= new Date();
    let nownian=nowDate.getFullYear();
    let nowyue=nowDate.getMonth()+1;
    let nowdate=nowDate.getDate();
    let nowmiao=nowDate.getSeconds();


    let nian =nowDate.getFullYear();
    let yue =nowDate.getMonth()+1;
    let date= nowDate.getDate();
    let miao=nowDate.getSeconds();
    let xiqi=nowDate.getDay();




    //获取年月
    showTime.innerHTML=nian+"年"+ yue +"月";
    //星期几,空几个
   

    function addLi(n,u,m) {
        let firstDay=new Date( nian,yue-1,1);
        let k=firstDay.getDay();
        for(let j=0;j<=k-1;j++){
            let newsLi= document.createElement("li");
            let last_day=new Date(nian,yue-1,0);
            let last=last_day.getDate();
            last=last-k;
            newsLi.innerHTML=last+j+1;
            newsLi.style.color="#ddd";
            riliContent.appendChild( newsLi);
        }

        let lastDay=new Date( nian,yue,0);
        let num=lastDay.getDate();
        for(let i=1;i<=num;i++){
            let newsLi= document.createElement("li");
            newsLi.innerHTML= i ;
            if(nian === nownian && yue === nowyue && i === nowdate){
                // newsLi.className="kk";
                newsLi.style.background="#fea7af";
                newsLi.style.color="#F2FAFF";
            }
            riliContent.appendChild( newsLi);

        }
        for(let n=1;n<=42-num-k;n++){
            console.info(42-num-k);
            let newsLi = document.createElement("li");
            newsLi.innerHTML=n;
            newsLi.style.color="#ddd";
            riliContent.appendChild(newsLi);
        }

    }
   addLi(nian,yue,date);
    //下一个月
    tongyong_rili_xiayige.addEventListener("click",function () {
        riliContent.innerHTML="";
        if( riliContent.innerHTML===""){
            yue++;
            showTime.innerHTML=nian+"年"+ yue +"月";
            addLi(nian,yue,date);
            if(yue>=12){
                nian++;
                yue=0;
            }

        }


    });
    //上一个月
    tongyong_zuoyouqiehuan_zuo.addEventListener("click",function () {
        riliContent.innerHTML="";
        if( riliContent.innerHTML===""){
            yue--;
            showTime.innerHTML=nian+"年"+yue+"月";
            addLi(nian,yue,date);
            if(yue<=1){
                nian--;
                yue=13;
            }

        }
    });
    //显示时间
    let shiWei=function( num ){
        return   Math.floor( num / 10 );
    };
    let geWei=function( num ){
        return    num % 10  ;
    };
    let shiShi=function(s){
        return   Math.floor( s / 10 );
    };
    let shiGe=function(s){
        return    s % 10  ;
    };
    let fenShi=function(f){
        return   Math.floor( f / 10 );
    };
    let fenGe=function(f){
        return    f % 10  ;
    };
    let timeGo = function(){
        let myDate = new Date();
        let miao = myDate.getSeconds();
        let fen= nowDate.getMinutes();
        let shi=nowDate.getHours();
        let fen_ge=fenGe(fen);
        let fen_shi=fenShi(fen);
        let shi_shi=shiShi(shi);
        let shi_ge=shiGe(shi);

        let miao_ge = geWei( miao );
        let miao_shi = shiWei( miao );

        fenGePic.src=picArr[ fen_ge];
        fenShiPic.src=picArr[ fen_shi];
        shiPic.src = picArr[ miao_shi ];
        gePic.src = picArr[ miao_ge ];
        shiGePic.src=picArr[ shi_ge];
        shiShiPic.src=picArr[ shi_shi];

    };
    let myset = setInterval(function(){
        timeGo();
    },1000);
    //年月日 星期
    content.innerHTML=nian+"年"+yue+"月"+date+"日"+" "+"星期"+xq[xiqi];



    //时钟
    if(drawing.getContext){
        let ctx=drawing.getContext("2d");
        let W=drawing.width=120;
        let H=drawing.height=200;
        let R=W/2;
        let  cw = ctx.lineWidth = 0.1*R;
        function drawStatics() {
            ctx.save();
            ctx.translate(R,R);
            ctx.beginPath();
            ctx.lineWidth=0.04*R;
            ctx.fillStyle="#fea7af";
            ctx.fill();
            ctx.arc(0,0,R-cw/2,0,2*Math.PI,false);
            ctx.strokeStyle="#fea7af";
            ctx.stroke();


            ctx.beginPath();
            ctx.font=0.2*R+'px 宋体';
            ctx.textAlign="center";
            ctx.textBaseline="middle";
            let r1=0.8*R-cw/2;
            for(let i=12; i>0;i--){
                let radius=2*Math.PI/12*i+1.5*Math.PI;
                let x=Math.cos(radius)*r1;
                let y=Math.sin(radius)*r1;
                ctx.fillText(i,x,y);
            }
            ctx.beginPath();
            let r2=0.9*R-cw/2;
            for(let i=0;i<60;i++){
                let radius=2*Math.PI/60*i+1.5*Math.PI;
                let x=Math.cos(radius)*r2;
                let y=Math.sin(radius)*r2;
                ctx.beginPath();
                if(i%5===0){
                    ctx.arc(x,y,cw/5,0,2*Math.PI,false);
                }else {
                    ctx.arc(x,y,cw/8,0,2*Math.PI,false);
                }
                ctx.fill();
            }
            ctx.restore();
        }
        function drawDot() {
            ctx.save();
            ctx.translate(R,R);
            ctx.beginPath();
            ctx.arc(0,0,cw/3,0,2*Math.PI,false);
            ctx.fillStyle="#fff";
            ctx.fill();
            ctx.restore();
        }
        function drawSecond(second) {
            ctx.save();
            ctx.translate(R,R);
            ctx.beginPath();
            let radius=2*Math.PI/60 *second;
            ctx.rotate(radius);
            ctx.lineWidth=1;
            ctx.moveTo(0,cw*2);
            ctx.lineTo(0,-0.7*R);
            ctx.strokeStyle="pink";
            ctx.stroke();
            ctx.restore();
        }
        function drawMinute(minute,second) {
            ctx.save();
            ctx.translate(R,R);
            ctx.beginPath();
            let radius=2*Math.PI/60 *minute;
            let sRadius=2*Math.PI/60/60*second;
            ctx.rotate(radius+ sRadius);
            ctx.lineWidth=2;
            ctx.lineCap='round';
            ctx.moveTo(0,cw*2);
            ctx.lineTo(0,-(0.7*R-cw/2));
            ctx.stroke();
            ctx.restore();
        }
        function drawHour(hour,minute) {
            ctx.save();
            ctx.translate(R,R);
            ctx.beginPath();
            let radius=2*Math.PI/12*hour;
            let mRadius=2*Math.PI/12/60*minute;
            ctx.rotate(radius+ mRadius);
            ctx.lineWidth=4;
            ctx.lineCap='round';
            ctx.moveTo(0,cw*2);
            ctx.lineTo(0,-(0.7*R-cw*2));
            ctx.stroke();
            ctx.restore();
        }
        function draw() {
            ctx.clearRect(0,0,W,H);
            drawStatics();
            let now=new Date();
            drawHour(now.getHours(),now.getMinutes());
            drawMinute(now.getMinutes(),now.getSeconds());
            drawSecond(now.getSeconds());
            drawDot();
        }
        draw();
        setInterval(draw,500);
    }


}
ty_888
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas 绘制日历
.
11-11 520
/// index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> bo
canvas日历绘制 简单demo
u012601195的博客
08-22 3931
canvas绘制本月日历，效果如下 html,body{ margin :0 0; padding: 0 0; width: 100%; height: 100%; } var canvas = document.getElementById("cav"); var ctx = canva
[canvas,js]日历时钟
12-25
[canvas,js]日历时钟
CalendarCanvas:一个简单日历的画布实现
07-02
日历画布 一个简单日历的多点触控、双指缩放启用的画布实现。
利用canvas实现钟表效果
冰雪为融的博客
03-27 324
今天学习了基础的canvas，发现canvas很有意思，具体的知识点先不总结，等我学完了一起总结，先上一个自己写的小实例，嗯、直接上代码&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;钟表效果&lt;/title&a
基于html5 canvas的一个日期时间控件、日期选择器
03-29
在这个项目中，开发者可能通过Canvas API创建了一个自定义的日历视图和时钟界面，用户可以通过点击或滑动来选择特定的日期和时间。 1. **HTML5 Canvas**: HTML5 Canvas是一个二维绘图板，通过JavaScript提供了一组...
HTML5 Canvas日期圆形时钟代码.zip
07-05
HTML5 Canvas是一个强大的图形绘制工具，它允许网页开发者在网页上直接通过JavaScript代码进行图形的绘制，包括2D和3D图像。在这个“HTML5 Canvas日期圆形时钟代码”项目中，开发人员利用Canvas API创建了一个动态的...
ClockjsHTML5模拟时钟jQuery插件
08-10
jQuery库是JavaScript的一个轻量级框架，它简化了DOM操作、事件处理、动画制作等任务，使得开发者可以更高效地编写代码。在Clockjs中，jQuery用于处理DOM元素的交互，如初始化时钟、绑定事件等，大大减少了代码的...
javascript时间控件
01-28
例如，可以使用SVG或者canvas绘制一个时钟界面，让用户通过拖动指针选择时间。 6. **响应式设计**： 当考虑移动设备时，时间控件应具有良好的响应性。这意味着控件在不同屏幕尺寸和方向下都能正常工作。开发者可以...
js Canvas实现的日历时钟案例分享
10-20
本文主要分享了js实现的日历时钟案例，具有一定的参考价值，下面跟着小编一起来看下吧
显示时间-canvas
09-12
使用html5新技术-canvas以及javascript语言，正确的显示时间，并根据时分秒的十位或者个位的变化，产生彩色的小球
html5酷炫3D魔方日历行程表动画特效
09-08
html5酷炫3D魔方日历行程表动画特效
[JS,Canvas]日历时钟
weixin_30247307的博客
12-25 97
[JS,Canvas]日历时钟 Html: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="requestNextAnimation...
全屏时钟java_js Canvas实现的日历时钟案例分享
weixin_39929602的博客
02-28 137
Html:Document* {margin:0; padding:0;}#calendarWithTime{margin : 0;}js:;var calendarWithTime = function(){v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCa...
使用cavans绘制小日历（未来15天）
trebleZ的博客
03-16 1148
这里分享一个使用canvans绘制小日历的demo。主要的思路就是由于只要显示接下来的15天时间，并增加点击时间。所以想到了，使用cavans的绘制，当然使用gridview的item的显示或者隐藏也是可以的。由于项目需要的只是未来15天的绘制，所以没有做过多的拓展。比如拓展成日历啥的。看效果图： 一、分析 首先我们会想到绘制星期一到星期天这1行7列的数据。然后根据当前时间，推算出明天是星期
Canvas画简易的Calendar控件
哦慧君
11-13 536
package com.example.lshan.canvascalendar; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSe
Html+JavaScript 在canvas上绘制带日期显示的时钟 (自己绘制刻度)
LLOZEL的博客
11-11 1087
       此为博主在研究参考多个时钟代码后，自己总结创新编写的一个简洁齐全又美观的时钟，本着自己获益也回馈大众地分享出来，如有问题或更好的建议欢迎与我交流。       首先创建一个canvas来装整个时钟界面： &lt;canvas id="MyClock" width="1300px" height="700px"&gt; &lt;/canvas&gt;       接下来就是在底...
JavaScript做一个日历
weixin_30699443的博客
01-13 234
JavaScript做一个日历 看了百页的书，是时候搞点小例子了，发现：看书需要，但是例子更重要，实际的东西，以后得多练习了，做完一个东西才会对所看的东西掌握更深一层。 日历 比较戳的，先试着来个简单版的。做完这个，会发现对JS中之前的那个Date对象中的一些东西了解的更深，再此再次回顾归纳一下： getTime() 返回日期的毫秒表示 getFullYea...
用JavaScript和canvas制作一个象棋小游戏
最新发布
05-31
好的，下面是一个简单的象棋小游戏的代码示例： ...``` <!... 象棋小游戏 ... <canvas id="chessboard" width="640" ...在这个示例中，我们使用了HTML5中的Canvas元素来绘制棋盘和棋子，通过JavaScript代码控制绘制过程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值