如何在面板中添加实时日期和时钟？

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:

我想在信息窗格中插入l我制作的实时时钟脚本，但是我可以看到我应该在哪里粘贴我的代码，还是我错过了某些内容？

来源

2017-07-25 Leighston Marshall

您可以使用画布。现场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); 
}

希望它可以帮助你

来源

2017-07-25 05:50:04

看来你要使用的引导，尝试添加以下到您的HTML;

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

或检查出https://codepen.io/mcourto/pen/rzaNqv

我不能完全肯定它是什么，你正在尝试做的，所以希望我有一个很好的猜测。

来源

2017-07-25 05:51:47

我有引导SRC。 –

顺便说一句，我如何删除“未定义”的文本行之前的时钟/ –

我已经更新笔https://codepen.io/mcourto/pen/rzaNqv我认为这是你在之后。 –

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

然后javascript代码。

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

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

来源

2017-07-25 06:24:25

如何在面板中添加实时日期和时钟？

回答

相关问题