js Canvas实现的日历时钟案例分享


Posted in Javascript onDecember 25, 2016

js Canvas实现的日历时钟案例分享

Html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="requestNextAnimationFrame.js"></script>
<script src="calendarWithTime.js"></script>
</head>
<body>
<style>
* {margin:0; padding:0;}
#calendarWithTime{
 margin : 0;
}
</style>
<canvas id="calendarWithTime"></canvas>
</body>
</html>

js:

;var calendarWithTime = function(){
 v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1;
 // 浏览器可见区域
 appWidth = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth);
 appHeight = (window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) - 3; // chrome下,高度一样是,会出现下拉滚动条
 // 中心点
 centerPoint = {'x':appWidth*0.5,'y':appHeight*0.5};
 // 动画用
 lastFpsUpdateTime = (+new Date);
 // canvas对象
 caObj = null;
 // canvas context对象
 ctxtObj = null;
 // 现在时间
 timeNow = "";
 // 开始年份
 startY = 1988;
 init = function(){
  window.onload=function(){this.initCanvas();}
 }();
 getDomId = function(id){return document.getElementById(id);}
 initCanvas = function(id){
  this.caObj = this.getDomId("calendarWithTime");
  this.ctxtObj = this.caObj.getContext("2d");
  // 全屏canvas
  this.caObj.style.width = (this.appWidth+'px');
  this.caObj.style.height = (this.appHeight+'px');
  this.caObj.width = this.appWidth;
  this.caObj.height = this.appHeight;
  if (v) {
   caObj.style.border = "none";
  }
  // 开始年份
  startY = Math.floor((new Date()).getFullYear() / 8) * 8;
  // test 
  // startY = Math.floor(2010 / 8) * 8;
  this.lastFpsUpdateTime = (+new Date);
  this.animate();
 }
 doDraw = function(){
  this.ctxtObj.clearRect(0, 0, this.caObj.width, this.caObj.height);
  var date = new Date();
  // test
  /*date.setDate(29);
  date.setMonth(3);
  date.setFullYear(2010);*/
  var afterGap = 8 - (date.getFullYear() - startY);
  var allYears = date.getFullYear()-this.startY+afterGap;
  var allDays = this.getCountDays(date.getFullYear(),date.getMonth());
  this.doDrawDayPanel(31,allDays);
  this.doDrawMonthPanel();
  this.doDrawYearPanel(this.startY,date.getFullYear(),afterGap);
  // 画时间针
  this.doDrawTPanel();
  this.drawYMDHMS(0,0.35,0,0.1,date.getSeconds(),0,30,'s','');
  this.drawYMDHMS(0,0.3,0,0.05,date.getMinutes(),date.getSeconds()/60,30,'m','');
  this.drawYMDHMS(0,0.25,0,0.03,date.getHours() % 12,date.getMinutes()/60,6,'h','');
  this.drawYMDHMS(0.4,0.7,0.4,0.66,date.getDate(),date.getHours()/24,Math.ceil(31*0.5),'d',date.getDate());
  this.drawYMDHMS(0.4,0.6,0.4,0.568,(date.getMonth()),date.getDate()/(allDays+1),6,'M',date.getMonth()+1);
  this.drawYMDHMS(0.4,0.55,0.4,0.52,(date.getFullYear() - this.startY),(date.getMonth()+1)/13,Math.ceil(allYears*0.5),'y',date.getFullYear());
  // 显示时间
  this.getTimeNow();
  this.ctxtObj.save();
  this.ctxtObj.beginPath();
  this.ctxtObj.fillStyle = "#369";
  this.ctxtObj.strokeStyle = "#369";
  this.ctxtObj.font = "30px bold 微软雅黑";
  this.ctxtObj.textAlign="start";
  this.ctxtObj.textBaseline="top";
  this.ctxtObj.fillText(this.timeNow,0,0);
  this.ctxtObj.strokeText(this.timeNow,0,0);
  this.ctxtObj.restore();
  /*
  fillText(String text,float x,float y,[float maxwidth]):填充字符串
  strokeText(String text,float x,float y,[float maxwidth]):绘制边框
  font="bold 45px 宋体"
  textAlign:设置绘制字符串的水平对齐方式,start|end|right|center
  textBaseline:垂直对齐方式:top|hanging|middle|alphabetic|bottom
  */
 }
 doChangeToFront = function(i,x){
  // 转换为画面值
  return (i +Math.ceil(x/4)) % 60;
 }
 doChangeToEnd = function(i,x){
  // 转换为后台值
  return (i +Math.ceil(x/4*3)) % 60;
 }
 doDrawTPanel = function(){
  // 画时钟面板
  var minsLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.3;
  var mineLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.32;
  var maxsLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.28;
  var maxeLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.34;
  var gap = Math.PI/30;
  futoNum = 5;
  this.ctxtObj.save();
   this.ctxtObj.fillStyle = "#369";
  this.ctxtObj.strokeStyle = "#369";
  for(var i =0;i<=59;i++){
   if(i % futoNum==0){
    sLen = maxsLen;
    eLen = maxeLen;
   }else{
    sLen = minsLen;
    eLen = mineLen;
   }
   this.ctxtObj.beginPath();
   this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x ,Math.sin(i*gap)*sLen + this.centerPoint.y);
   this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
   this.ctxtObj.stroke();
   this.ctxtObj.closePath();
   /*iDiff = this.doChangeToFront(i); // i => iDiff
   //iDiff2 = this.doChangeToEnd(iDiff,60); // iDiff => i
   this.ctxtObj.font = "2px bold 微软雅黑";
   this.ctxtObj.textAlign="center"
   this.ctxtObj.textBaseline="middle"
   this.ctxtObj.fillText(iDiff,Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
   */

  }
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,Math.min( this.caObj.width, this.caObj.height)*0.5*0.01,0,360,false);
  this.ctxtObj.fillStyle="red";
  this.ctxtObj.fill();
  this.ctxtObj.closePath();
  this.ctxtObj.restore();
 }
 doDrawYearPanel = function(startYear,nowYear,afterGap){
  // 画年份面板
  var sLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.53;
  var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.55;
  var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.60;
  var allYears = nowYear-startYear+afterGap;
  var gap = Math.PI/Math.ceil(allYears*0.5);
  this.ctxtObj.save();
   this.ctxtObj.fillStyle = "#b4ffff";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
   this.ctxtObj.fillStyle = "white";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
  this.ctxtObj.restore();
   this.ctxtObj.fillStyle = "#369";
  this.ctxtObj.strokeStyle = "#369";
   for(var i =-2;i<=allYears-3;i++){
   this.ctxtObj.save();
   this.ctxtObj.beginPath();
   this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x ,Math.sin(i*gap)*sLen + this.centerPoint.y);
   this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
   this.ctxtObj.closePath();
   this.ctxtObj.stroke();
   iDiff = this.doChangeToFront(i,allYears) + startYear;
   this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
    this.ctxtObj.rotate(i*gap);
   this.ctxtObj.font = "10px bold 微软雅黑";
   this.ctxtObj.textAlign="start";
   this.ctxtObj.textBaseline="bottom";
   this.ctxtObj.fillText(iDiff,sLen,0);
   this.ctxtObj.restore();
  }
 }
 doDrawMonthPanel = function(){
  // 画年份面板
  var sLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.58;
  var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.6;
  var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.70;
  var gap = Math.PI/6;
  this.ctxtObj.save();
   this.ctxtObj.fillStyle = "#fde08c";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
   this.ctxtObj.fillStyle = "white";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
  this.ctxtObj.restore();
   this.ctxtObj.fillStyle = "#369";
  this.ctxtObj.strokeStyle = "#369";
   for(var i =-2;i<=9;i++){
   this.ctxtObj.save();
   this.ctxtObj.beginPath();
   this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x ,Math.sin(i*gap)*sLen + this.centerPoint.y);
   this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
   this.ctxtObj.closePath();
   this.ctxtObj.stroke();
   iDiff = (this.doChangeToFront(i,12)) % 12+1;
   this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
    this.ctxtObj.rotate(i*gap);
   this.ctxtObj.font = "20px bold 微软雅黑";
   this.ctxtObj.textAlign="start";
   this.ctxtObj.textBaseline="middle";
   this.ctxtObj.fillText((iDiff+'').PadLeft(2,0),eLen,0);
   this.ctxtObj.restore();
  }
 }
 doDrawDayPanel = function(dayCount,realAllDay){
  // 画年份面板
  var sLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.68;
  var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.7;
  var labelLen = Math.min( this.caObj.width, this.caObj.height)*0.5*0.80;
  var gap = Math.PI/Math.ceil(dayCount*0.5);
  this.ctxtObj.save();
  this.ctxtObj.fillStyle = "#e587e5";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,eLen+2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
  this.ctxtObj.fillStyle = "white";
  this.ctxtObj.beginPath();
  this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,sLen-2,0,360,false);
  this.ctxtObj.closePath();
  this.ctxtObj.fill();
  this.ctxtObj.restore();
  this.ctxtObj.fillStyle = "#369";
  this.ctxtObj.strokeStyle = "#369";
  for(var i =-2;i<=dayCount-2;i++){
   this.ctxtObj.save();
   this.ctxtObj.beginPath();
   this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x ,Math.sin(i*gap)*sLen + this.centerPoint.y);
   this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
   this.ctxtObj.closePath();
   this.ctxtObj.stroke();
   iDiff = (this.doChangeToFront(i,dayCount)) % (dayCount+1);
   if(iDiff<=realAllDay && iDiff!=0){
    this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
     this.ctxtObj.rotate(i*gap);
    this.ctxtObj.font = "20px bold 微软雅黑";
    this.ctxtObj.textAlign="start";
    this.ctxtObj.textBaseline="middle";
    this.ctxtObj.fillText((iDiff+'').PadLeft(2,0),eLen,0);
   }
   this.ctxtObj.restore();
  }
 }
 drawYMDHMS = function(slen,elen,cslen,celen,main,sub,gapM,type,value){
  // 画日期时间针
  var date = new Date();
  var siM = main;
  var siS = sub;
  var gap = Math.PI/gapM;
  var sLen = Math.min( this.caObj.width, this.caObj.height)*0.5*slen;
  var eLen = Math.min( this.caObj.width, this.caObj.height)*0.5*elen;
  var csLen = Math.min( this.caObj.width, this.caObj.height)*0.5*cslen;
  var ceLen = Math.min( this.caObj.width, this.caObj.height)*0.5*celen;
  i = this.doChangeToEnd(siM+siS,gapM*2);
  ci = (i+gapM) % (gapM*2);
  this.ctxtObj.save();
  this.ctxtObj.beginPath();
  if(type=='y'){
   this.ctxtObj.strokeStyle="#00cece";
   this.ctxtObj.lineWidth = 6;
  }else if(type=='M'){
   this.ctxtObj.strokeStyle="#ce9b00";
   this.ctxtObj.lineWidth = 5;
  }else if(type=='d'){
   this.ctxtObj.strokeStyle="#bd01bd";
   this.ctxtObj.lineWidth = 4;
  }else if(type=='h'){
   this.ctxtObj.lineWidth = 3;
  }else if(type=='m'){
   this.ctxtObj.lineWidth = 2;
  }else if(type=='s'){
   this.ctxtObj.lineWidth = 1;
  }
  this.ctxtObj.moveTo(Math.cos(i*gap)*sLen + this.centerPoint.x ,Math.sin(i*gap)*sLen + this.centerPoint.y);
  this.ctxtObj.lineTo(Math.cos(i*gap)*eLen + this.centerPoint.x,Math.sin(i*gap)*eLen + this.centerPoint.y);
  this.ctxtObj.moveTo(Math.cos(ci*gap)*csLen + this.centerPoint.x ,Math.sin(ci*gap)*csLen + this.centerPoint.y);
  this.ctxtObj.lineTo(Math.cos(ci*gap)*ceLen + this.centerPoint.x,Math.sin(ci*gap)*ceLen + this.centerPoint.y);
  this.ctxtObj.stroke();
  this.ctxtObj.closePath();
  this.ctxtObj.restore();
  var cpi = ci*gap*360/Math.PI;
  if(type=='y'){
   this.ctxtObj.save();
    this.ctxtObj.fillStyle = "#00cece";
   this.ctxtObj.strokeStyle="#00cece";
   this.ctxtObj.lineWidth = 8;
   this.ctxtObj.beginPath();
   this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
   this.ctxtObj.stroke();
   this.ctxtObj.closePath();
   this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
    this.ctxtObj.rotate(i*gap);
   this.ctxtObj.font = "20px bold 微软雅黑";
   this.ctxtObj.textAlign="start";
   this.ctxtObj.textBaseline="middle";
   this.ctxtObj.lineWidth = 2;
   this.ctxtObj.fillText(value + '年',eLen*1.03,0);
   this.ctxtObj.strokeText(value + '年',eLen*1.03,0);
   this.ctxtObj.restore();
  }else if(type=='M'){
   this.ctxtObj.save();
   this.ctxtObj.beginPath();
    this.ctxtObj.fillStyle = "#ce9b00";
   this.ctxtObj.strokeStyle="#ce9b00";
   this.ctxtObj.lineWidth = 7;
   this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
   this.ctxtObj.stroke();
   this.ctxtObj.closePath();
   this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
    this.ctxtObj.rotate(i*gap);
   this.ctxtObj.font = "20px bold 微软雅黑";
   this.ctxtObj.textAlign="start";
   this.ctxtObj.textBaseline="middle";
   this.ctxtObj.lineWidth = 2;
   this.ctxtObj.fillText(value + '月',eLen*1.03,0);
   this.ctxtObj.strokeText(value + '月',eLen*1.03,0);
   this.ctxtObj.restore();
  }else if(type=='d'){
   this.ctxtObj.save();
   this.ctxtObj.beginPath();
    this.ctxtObj.fillStyle = "#bd01bd";
   this.ctxtObj.strokeStyle="#bd01bd";
   this.ctxtObj.lineWidth = 6;
   this.ctxtObj.arc(this.centerPoint.x,this.centerPoint.y,ceLen,ci*gap-gap*0.5,ci*gap+gap*0.5,false);
   this.ctxtObj.stroke();
   this.ctxtObj.closePath();
   this.ctxtObj.translate(this.centerPoint.x, this.centerPoint.y);
    this.ctxtObj.rotate(i*gap);
   this.ctxtObj.font = "20px bold 微软雅黑";
   this.ctxtObj.textAlign="start";
   this.ctxtObj.textBaseline="middle";
   this.ctxtObj.lineWidth = 2;
   this.ctxtObj.fillText(value + '日',eLen*1.03,0);
   this.ctxtObj.strokeText(value + '日',eLen*1.03,0);
   this.ctxtObj.restore();
  }
  this.ctxtObj.restore();
 }
 animate = function(){
  var now = (+new Date);
  if (now - this.lastFpsUpdateTime > 60) {
   this.lastFpsUpdateTime = now;
   this.doDraw();
  }
  window.requestNextAnimationFrame(this.animate);
 }
 getCountDays = function (year,month) {
  var curDate = new Date();
  curDate.setFullYear(year);
  curDate.setMonth(month+1);
  curDate.setDate(0);
  return curDate.getDate();
 }
 getTimeNow = function(){
  var date = new Date();
  var seperator1 = "-";
  var seperator2 = ":";
  this.timeNow = date.getFullYear() 
    + seperator1 + (date.getMonth()+1+'').PadLeft(2,0)
    + seperator1 + (date.getDate()+'').PadLeft(2,0)
   + " " + (date.getHours()+'').PadLeft(2,0)
    + seperator2 + (date.getMinutes()+'').PadLeft(2,0)
   + seperator2 + (date.getSeconds()+'').PadLeft(2,0)
    + '.' +(date.getMilliseconds()+'').PadLeft(3,0);
 }
 // objects
}
var cwt = new calendarWithTime();
//=================================================
String.prototype.PadLeft = function(totalWidth, paddingChar)
{
 if ( paddingChar != null )
 {
 return this.PadHelper(totalWidth, paddingChar, false);
 } else {
 return this.PadHelper(totalWidth, ' ', false);
 }
}
String.prototype.PadRight = function(totalWidth, paddingChar)
{
 if ( paddingChar != null )
 {
 return this.PadHelper(totalWidth, paddingChar, true);
 } else {
 return this.PadHelper(totalWidth, ' ', true);
 }
}
String.prototype.PadHelper = function(totalWidth, paddingChar, isRightPadded)
{
 if ( this.length < totalWidth)
 {
 var paddingString = new String();
 for (i = 1; i <= (totalWidth - this.length); i++)
 {
 paddingString += paddingChar;
 }
 if ( isRightPadded )
 {
 return (this + paddingString);
 } else {
 return (paddingString + this);
 }
 } else {
 return this;
 }
}

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现简单的进度条
Jul 02 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
ionic开发中点击input时键盘自动弹出
Dec 23 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
JS验证字符串功能
Feb 22 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
javascript实现点亮灯泡特效示例
Oct 15 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
ES6概念 Symbol toString()方法
Dec 25 #Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 #Javascript
ES6概念 ymbol.for()方法
Dec 25 #Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 #Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 #Javascript
JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析
Dec 25 #Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 #Javascript
You might like
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
js实现文章文字大小字号功能完整实例
2014/11/01 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
2017/03/23 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
js实现删除li标签一行内容
2019/04/16 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[02:00]DAC2018主宣传片——龙征四海,剑问东方
2018/03/20 DOTA
python实现simhash算法实例
2014/04/25 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
Linux文件系统类型
2012/09/16 面试题
失业者真诚求职信范文
2013/12/25 职场文书
《英英学古诗》教学反思
2014/04/11 职场文书
中学生评语大全
2014/04/18 职场文书
2014政府领导班子对照检查材料思想汇报(3篇)
2014/09/26 职场文书
员工2014年度工作总结
2014/12/09 职场文书
开学第一周值周总结
2015/07/16 职场文书
2015秋季田径运动会广播稿
2015/08/19 职场文书
三八红旗手主要事迹材料
2015/11/04 职场文书
Vue和Flask通信的实现
2021/05/19 Vue.js
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python