Trial And Eror

Knowledge Is Free..!
Start Working Smart, Not Hard
Start Sharing, Not Selling

Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Thursday, 1 January 2015

Membuat Jam menggunakan Canvas dan Javascript

By , , 1 comment
Example :
<!DOCTYPE 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>

Wednesday, 26 November 2014

Script Print Halaman WEB Bedasarkan Bagian yang dimau menggunakan Javascript

By , 1 comment
Disini saya akan membagikan Cara Print Halaman WEB atau Script Print Halaman WEB. Anda mungkin sudah berada di halaman web dan ingin mencetak halaman untuk referensi nanti. Bukankah lebih besar untuk dapat memberikan pengunjung ke situs Anda untuk dapat melakukan hal itu? Tutorial ini untuk pengembang web akan menunjukkan kepada Anda bagaimana menggunakan fungsi window.print JavaScript, lengkap dengan contoh!
Memakai Windows Print
<html>
  <head>
    <title>Contoh WEB Print</title>
  </head>
  <body>
   <h1>Selamat Datang Bray.....!</h1>
   <a href="javascript:window.print()">Klik Disini untuk Print</a>
  </body>
</html>

Print WEB Menurut Bagian yang di mau
<html>
  <head>
    <title>Contoh WEB Print</title>
  </head>
  <body>
   <div id="printableArea">
     <table>
       <tr>
         <th>Nama</th>
         <th>Kelas</th>
         <th>Sekolah</th>
       </tr>
       <tr>
         <td>Amin Yusuf</td>
         <td>XI - RPL</td>
         <td>SMK Negeri 2 Bandung</td>
       </tr>
     </table>
<script>
function printDiv(divName){
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}
</script>
   </div>
  </body>
</html>

Wednesday, 19 November 2014

Javascript popup box

By , No comments

JavaScript adalah bahasa pemrograman web. Semua halaman HTML modern menggunakan JavaScript. JavaScript mudah dipelajari. Blog ini akan mengajarkan Anda JavaScript dari dasar hingga lanjutan.

Disini saya akan memberikan posting tentang Javascript popup box.

JavaScript memiliki tiga jenis kotak popup: Alert box, Confirm box, dan Prompt box..

Alert box

Alert box sering digunakan jika Anda ingin informasi bahwa datang melalui kepada pengguna.

Ketika Alert box muncul, pengguna harus mengklik "OK" untuk melanjutkan.

Contoh Syntax

<script>
alert("Hy saya Box popup");
</script>

Mencoba

Confirm box

Sebuah Confirm box sering digunakan jika Anda ingin pengguna untuk memverifikasi atau menerima sesuatu.
Ketika Confirm box muncul, pengguna harus klik "OK" atau "Cancel" untuk melanjutkan.
Jika pengguna mengklik "OK", kotak mengembalikan nilai true. Jika pengguna mengklik "Batal", kotak mengembalikan palsu.

Contoh Syntax

<script>
var r = confirm("Press a button");
if (r == true) {
    x = "You pressed OK!";
} else {
    x = "You pressed Cancel!";
}
</script>

Mencoba

Prompt box

Sebuah Prompt box sering digunakan jika Anda ingin nilai sebelum memasuki halaman pengguna untuk input.
Ketika Prompt box muncul, pengguna harus klik "OK" atau "Cancel" untuk melanjutkan setelah memasukkan nilai input.
Jika pengguna mengklik "OK" kotak mengembalikan nilai masukan. Jika pengguna mengklik "Batal" kotak kembali nol.


Contoh Syntax

<script>
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
}
</script>

Mencoba
Subscribe to: Posts (Atom)

Followers

Translate

Copyright © Trial And Eror | Powered by Blogger

Design by Anders Noren | Blogger Theme by NewBloggerThemes.com