1. Membuat Web Blog dengan postingan materi dibawah ini
Klik Materi Blog kalian salin dan pindahkan materi berikut ini ke blog kalian yang sudah jadi
2. Membuat Kalkulator : Copy kan HTML berikut ini ke Blog kalian
<html>
<head>
<script>
function dis(val)
{
document.getElementById("result").value+=val
}
function solve()
{
let x = document.getElementById("result").value
let y = eval(x)
document.getElementById("result").value = y
}
function clr()
{
document.getElementById("result").value = ""
}
</script>
<!-- Style Kalkulator -->
<style>
table{
border-radius: 2%;
box-shadow: 0px 6px 12px #000;
}
tr{
border-radius: 7%;
}
td{
width: 60px;
border-radius: 7%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 20px;
color: aliceblue;
font-weight: bold;
}
input[type="button"]
{
height: 50px;
background-color:rgb(23, 167, 23);
color: white;
font-weight: bold;
font-size: 22px;
width:100%
}
.title{
margin-bottom: 10px;
height: 70px;
text-align:center;
border-radius: 2%;
background-color:rgb(23, 167, 23);
width: 210px;
color:white;
}
input[type="text"]
{
font-size: 22px;
border-radius: 7%;
background-color:white;
height: 50px;
width:100%
}
input[type="button"].ekor{
background-color:rgb(218, 23, 23);
}
input[type="button"].kode{
background-color:rgb(243, 170, 13);
}
</style>
</head>
<body bgcolor="grey">
<table align="center" border="5" width="330px">
<tr>
<td colspan="4" class="title">Praktik kelas 8</td>
</tr>
<tr>
<td colspan="3"><input type="text" id="result"/></td>
<td><input class="ekor" type="button" value="C" onclick="clr()"/> </td>
</tr>
<tr>
<td><input type="button" value="1" onclick="dis('1')"/> </td>
<td><input type="button" value="2" onclick="dis('2')"/> </td>
<td><input type="button" value="3" onclick="dis('3')"/> </td>
<td><input class="kode" type="button" value="+" onclick="dis('+')"/> </td>
</tr>
<tr>
<td><input type="button" value="4" onclick="dis('4')"/> </td>
<td><input type="button" value="5" onclick="dis('5')"/> </td>
<td><input type="button" value="6" onclick="dis('6')"/> </td>
<td><input class="kode" type="button" value="-" onclick="dis('-')"/> </td>
</tr>
<tr>
<td><input type="button" value="7" onclick="dis('7')"/> </td>
<td><input type="button" value="8" onclick="dis('8')"/> </td>
<td><input type="button" value="9" onclick="dis('9')"/> </td>
<td><input class="kode" type="button" value="/" onclick="dis('/')"/> </td>
</tr>
<tr>
<td><input type="button" value="." onclick="dis('.')"/> </td>
<td><input type="button" value="0" onclick="dis('0')"/> </td>
<td><input class="ekor" type="button" value="=" onclick="solve()"/> </td>
<td><input class="kode" type="button" value="x" onclick="dis('*')"/> </td>
</tr>
</table>
</body>
</html>3. Membuat Bacaan Berjalan : Copy kan HTML berikut ini dan ganti bacaan berjalan yang kalian inginkan
<marquee>Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700">Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700" title="Ini Muncul Saat Hover">Ini Tulisan Berjalan</marquee>
<marquee scrolldelay="700" title="Ini Muncul Saat Hover" behavior="slide">Ini Tulisan Berjalan</marquee>
<marquee title="Ini Muncul Saat Hover" behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()" direction="right"><a href="https://posciety.com" target="_blank">Ini Tulisan Berjalan</a></marquee>
4.Membuat jam dinding atau jam digital: copykan HTML dibawah ini
<!DOCTYPE html>
<html>
<body>
<canvas id="mycanvas" width="400" height="400"
style="background-color:#0fff">
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(gambarjam, 1000);
function gambarjam() {
drawFace(ctx, radius);
angkajam(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, '#00ff');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#00ff');
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 = '#00ff';
ctx.fill();
}
function angkajam(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));
jarumjam(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
jarumjam(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
jarumjam(ctx, second, radius*0.9, radius*0.02);
}
function jarumjam(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>
Casino Del Sol - DRMCD
BalasHapusThe rooms and the staff are fantastic. Our 대구광역 출장안마 staff have 대전광역 출장안마 been helpful. 김제 출장마사지 They're the people I know and love who love 서산 출장마사지 the casino. I have seen 문경 출장샵 a lot of them