This topic does not exist yet

Book Creator
Add this page to your book

Book Creator
Remove this page from your book

Manage book(0 page(s))

Help

PROGRAMMING LANGUAGE

<h2>SPEAK DATE</h2> <p id=MOUTH></p> click me to display Date and Time.

<p id=FINGER>JavaScript can change HTML content.</p>

Click Me 1! Click Me 2 ! Click Me 3!

Turn on the light

Turn off the light

</body> </html>

<style>
	.editor
      {
		border:solid 1px #ccc;
		padding: 20px;
		min-height:200px;
      }

      .sample-toolbar
      {
		border:solid 1px #ddd;
		background:#f4f4f4;
		padding: 5px;
		border-radius:3px;
      }

      .sample-toolbar > span
      {
		cursor:pointer;
	}

      .sample-toolbar > span:hover
      {
		text-decoration:underline;
	}
</style>

<body>

<div class="sample-toolbar">
	<a href="javascript:void(0)" onclick="format('bold')"><span class="fa fa-bold fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="format('italic')"><span class="fa fa-italic fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="format('insertunorderedlist')"><span class="fa fa-list fa-fw"></span></a>
	<a href="javascript:void(0)" onclick="setUrl()"><span class="fa fa-link fa-fw"></span></a>
	<span><input id="txtFormatUrl" placeholder="url" class="form-control"></span>

</div>

</div>

<script>
	window.addEventListener('load', function(){
		document.getElementById('sampleeditor').setAttribute('contenteditable', 'true');
		document.getElementById('sampleeditor2').setAttribute('contenteditable', 'true');
      });

	function format(command, value) {
		document.execCommand(command, false, value);
	}

	function setUrl() {
		var url = document.getElementById('txtFormatUrl').value;
		var sText = document.getSelection();
		document.execCommand('insertHTML', false, '<a href="' + url + '" target="_blank">' + sText + '</a>');
		document.getElementById('txtFormatUrl').value = '';
	}
</script>

</body> </html>

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);

} </script>

</body> </html>