PROGRAMMING LANGUAGE
<html> <body>
<h2>SPEAK DATE</h2> <p id=“MOUTH”></p> <button type=“EARTH” onclick=“document.getElementById('MOUTH').innerHTML = Date()”> click me to display Date and Time.</button>
<h2>SHOW HAND</h2>
<p id=“FINGER”>JavaScript can change HTML content.</p>
<button type=“button” onclick=“document.getElementById('FINGER').innerHTML = 'Hello JavaScript!'”>Click Me 1!</button> <button type=“button” onclick=“document.getElementById('FINGER').style.fontSize='35px'”>Click Me 2 !</button> <button type=“button” onclick=“document.getElementById('FINGER').style.display='none'”>Click Me 3!</button>
<button onclick=“document.getElementById('myImage').src='pic_bulbon.gif'”>Turn on the light</button>
<img id=“myImage” src=“pic_bulboff.gif” style=“width:100px”>
<button onclick=“document.getElementById('myImage').src='pic_bulboff.gif'”>Turn off the light</button>
</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>
