Question

这里是代码

HTML：此方法应显示时钟

<body onLoad="renderTime();">
<div id="clockDisplay" class="container"></div>
</body>

JS：活动时钟和日期的脚本

function renderTime(){
var mydate = new Date();
var year = mydate.getYear();
    if(year <1000){
    year +=1900
    }
var day = mydate.getDate();
var month = mydate.getMonth();
var daym = mydate.getDate();
var dayarray = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
var montharray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
    if(h == 24){
        h = 0;
    }
    else if (h> 12){
        h = h - 0;
    }

    if(h< 10){
        h = "0" +h;
    }

    if(m<10){
        m = "0" +m;
    }

    if(s <10){
        s = "0" +s;
    }

    var myClock = document.getElementById("clockDisplay");
    myClock.textContent = "" +dayarray[day]+ " " +daym+ " " +montharray[month]+ " " +year+ "  | " +h+ ":" +m+ ":" +s;
    myClock.innerText = "" +dayarray[day]+ " " +daym+ " " +montharray[month]+ " " +year+ "  | " +h+ ":" +m+ ":" +s;

    setTimeout("renderTime()", 1000);
}  
renderTime();

PANEL：这是我希望它放在哪里

<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="panel panel-info ">
<div class="panel-heading"><i class="glyphicon glyphicon-exclamation-sign"></i>&nbsp; Welcome, User!</div>
<div class="panel-body client-left-side">
<i class="glyphicon glyphicon-calendar"></i>&nbsp;Today is:

我想在信息面板中插入我已经制作的实时时钟脚本，但我可以看到我应该在哪里找到我的代码或者我错过了什么？

Answer 1

你可以使用画布。现场JsFiddle是here。

<canvas id="canvas" width="400" height="400" style="background-color:#333">
</canvas>

并在Javascript中

 var canvas = document.getElementById("canvas");
 var ctx = canvas.getContext("2d");
 var radius = canvas.height / 2;
 ctx.translate(radius, radius);
 radius = radius * 0.90
 setInterval(drawClock, 1000);

 function drawClock() {
   drawFace(ctx, radius);
   drawNumbers(ctx, radius);
   drawTime(ctx, radius);
 }

 function drawFace(ctx, radius) {
   var grad;
   ctx.beginPath();
   ctx.arc(0, 0, radius, 0, 2*Math.PI);
   ctx.fillStyle = 'white';
   ctx.fill();
   grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
   grad.addColorStop(0, '#333');
   grad.addColorStop(0.5, 'white');
   grad.addColorStop(1, '#333');
   ctx.strokeStyle = grad;
   ctx.lineWidth = radius*0.1;
   ctx.stroke();
   ctx.beginPath();
   ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
   ctx.fillStyle = '#333';
   ctx.fill();
}

function drawNumbers(ctx, radius) {
   var ang;
   var num;
   ctx.font = radius*0.15 + "px arial";
   ctx.textBaseline="middle";
   ctx.textAlign="center";
   for(num = 1; num < 13; num++){
       ang = num * Math.PI / 6;
       ctx.rotate(ang);
       ctx.translate(0, -radius*0.85);
       ctx.rotate(-ang);
       ctx.fillText(num.toString(), 0, 0);
       ctx.rotate(ang);
       ctx.translate(0, radius*0.85);
       ctx.rotate(-ang);
     }
  }

 function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
  }

  function drawHand(ctx, pos, length, width) {
     ctx.beginPath();
     ctx.lineWidth = width;
     ctx.lineCap = "round";
     ctx.moveTo(0,0);
     ctx.rotate(pos);
     ctx.lineTo(0, -length);
     ctx.stroke();
     ctx.rotate(-pos);
 }

希望它可以帮到你

Answer 2

您似乎正在尝试使用bootstrap，尝试将以下内容添加到HTML中;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

或查看https://codepen.io/mcourto/pen/rzaNqv

我不完全确定你试图这样做是什么，希望我有一个很好的猜测。

Answer 3

只要您的要求受到关注，您需要每毫秒更改一次显示时间/日期/年。需要在代码中完成的更改。 bootstrap class =“col-lg-4”不适用于sm（小屏幕）。使用日期对象获取所有必需的值并在面板中正确关闭标记。

然后是javascript代码。

var date = new Date();
document.getElementById("clockDisplay").outerHTML = date;

<div id="clockDisplay"></div>

如何在面板中包含实时日期和时钟？

3 个答案: