Javascript klokke vil ikke starte fra html-fila

Kobraz · 3. januar 2016

Hei.

Kan noen hjelpe meg med å se hva som er feil i koden? Når jeg kjører html-fila starter ikke klokken i javascriptet.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Klokke</title>

<SCRIPT LANGUAGE="JavaScript">
function startclock()
{

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = '28d1fa';
ctx.lineWidth = 17;
ctx.lineCap = 'round';
ctx.shadowBlur = 15;
ctx.shadowColor = '28d1fa';

function degToRad(degree) {
  var factor = Math.PI/180;
  return degree*factor;
}

function renderTime() {
 
  var now = new Date();
  var today = now.toDateString();
  var time = now.toLocaleTimeString();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var milliseconds = now.getMilliseconds();
  var newSeconds = seconds+ (milliseconds/1000);
  
  // Background
  gradient = ctx.createRadialGradient(250,250,5,250,250, 300);
  gradient.addColorStop(0, '09303a');
  gradient.addColorStop(1, 'black');
  ctx.fillStyle = gradient;
  //ctx.fillStyle = '333333';
  ctx.fillRect(0,0,500,500);
  
  // Hours
  ctx.beginPath();
  ctx.arc(250, 250, 200, degToRad(270), degToRad((hours*15)-90));
  ctx.stroke();
  
  // Minutes
  ctx.beginPath();
  ctx.arc(250, 250, 170, degToRad(270), degToRad((minutes*6)-90));
  ctx.stroke();
  
  // Seconds
  ctx.beginPath();
  ctx.arc(250, 250, 140, degToRad(270), degToRad((newSeconds*6)-90));
  ctx.stroke();
  
  // Date
  ctx.font = "25px Arial bold";
  ctx.fillStyle = '28d1fa';
  ctx.fillText(today, 175, 250);
  
  // Time
  ctx.font = "15px Arial";
  ctx.fillStyle = '28d1fa';
  ctx.fillText(time, 175, 280);
  
  var dataURL = canvas.toDataURL();
  
  document.getElementById('myImage').src = dataURL;
  
  
}
setInterval(renderTime, 40);

}
</SCRIPT>
</head>
<body onload="startclock()">
  
</body>
</html>

etse · 3. januar 2016

Småfeil:

- Koden fin mangler en canvas med id=canvas

- Koden mangler et bilde den skal vise ting på med ID myImage (men hvorfor bruker den bilde når alt kan tegnes på canvas?)

- Fargene den refererer til er ikke gyldig RGB-farge (de mangler hashbang først)

Fungerende kode: https://jsfiddle.net/pdk4m3v1/

Endret 3. januar 2016 av etse

Logg inn

Javascript klokke vil ikke starte fra html-fila

Anbefalte innlegg

Kobraz

Lenke til kommentar

Videoannonse

etse

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer