en:programming_language

PROGRAMMING LANGUAGE


<html> <body>

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

<h2>SHOW HAND</h2>

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

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

Turn on the light

<img id=myImage src=pic_bulboff.gif style=width:100px>

Turn off the light

</body> </html>

<html> <head>

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

<link rel=stylesheet href=https://use.fontawesome.com/releases/v5.6.3/css/all.css integrity=sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/ crossorigin=anonymous> </head>

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

<html> <body>

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

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

} </script>

</body> </html>

Enter your comment:
N C F C​ A
 

This topic does not exist yet

You've followed a link to a topic that doesn't exist yet. If permissions allow, you may create it by clicking on Create this page.

  • en/programming_language.txt
  • 2024/07/17 14:44
  • brahmantra