下面介绍一个自己搞的小时钟，方便拖拽。

那么如何插入到自己的界面中呢？

只需要加上如下代码就好了：

响应式烟草公司HTML5网站模板

响应式烟草公司HTML5网站模板是一款适合提供各种不同种类的优质烟草公司宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<script>
</script>

 clcok.js的完整代码如下：

var extra=document.createElement('p');
    extra.style.position='absolute';
    var extra_canvas=document.createElement('canvas');
    extra_canvas.id="extra_canvas";
    extra.appendChild(extra_canvas);
    document.body.appendChild(extra);

    var flag;
    var currentRectX;
    var currentRectY;
  
  function init(){
     flag=true;
     currentRectX=0;
     currentRectY=0;
    }

    

function clock(size,x,y){
  /*    if(!flag){
          document.body.removeChild(extra_canvas);
          console.log('remove');
        }
  
  */
  if (!size){size=200;}
  if (!x)x=0;
  if (!y)y=0;
  extra_canvas.width=size;
  extra_canvas.height=size;
  var context=extra_canvas.getContext('2d');
  
  extra.style.left=currentRectX+'px';
  extra.style.top=currentRectY+'px';
  //console.log(currentRectX,currentRectY);
  //context.fillStyle='#FF0000';
  //context.fillRect(0,0,100,100);
  //绘制表盘
      var centerX=x+size/2;
      var centerY=y+size/2;
    //console.log(centerX,centerY);
      var radius=(size-40)/2;
  context.clearRect(x,y,x+size,y+size);
    context.beginPath();
    context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    context.lineWidth = 5;
  context.strokeStyle = "grey";
  context.stroke();
  var grd = context.createLinearGradient(centerX-radius, centerY-radius,centerX+radius, centerY+radius);
  grd.addColorStop(0, "#FFFFFF"); // light blue
  grd.addColorStop(1, "#DDDDFF"); // dark blue
  context.fillStyle = grd;
  context.fill();
  context.closePath();

  //绘制数字时刻
  context.beginPath();
  //context.font="9pt";
 // context.fontsize=9px;
  //context.fontFamily="Square721 BT";
  context.fillStyle = "#0000f0"; // text color
  context.fillText("12",centerX-7,centerY-radius+18);
  context.fillText("3",centerX+radius-18,centerY+4);
  context.fillText("6",centerX-3,centerY+radius-12);
  context.fillText("9",centerX-radius+12,centerY+4);
  
  context.closePath();
/*  //显示日期
context.beginPath();
context.TextOut(100,100,"星期");
context.closePath();
*/
  //绘制刻度
  for (var i=0;i

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！