Java Script | Membuat Jam Digital dan Tulisan Berkedip

Berikut ini adalah java script tentang membuat kalkulator dan tulisan berkedip. Pertama anda harus menyalin coding ini

<!DOCTYPE html>
<html>
<head>
<body>
<body background="o.jpg" fontcolor="red">
<span align="center">
<p align="center">


<script type="text/javascript">
new imageclock.display()
</script>
</body>
<title>Belajar JavaScript</title>

<script type="text/javascript">
function tambah_semangat()
{
   var a=document.getElementById("div_semangat");
   a.innerHTML+="<p>Terus berusaha Jangan menyerah</p>";
}
</script>

</head>

<body>
<h1>Belajar JavaScript</h1>
<p>Alex Belajar Java Script</p>
Klik tombol ini untuk menambahkan kalimat baru:

<button id="tambah" onclick="tambah_semangat()">Semangaat..!!</button>

<div id="div_semangat"></div>
</body>
</html>
<p align="center">
<script type="text/javascript" span style="center">
var x=1;
function blink(id) {
    document.getElementById(id).style.width="300px";
    if(x==1){
        document.getElementById(id).style.backgroundColor = "black";
        x=2;
    } else {
        document.getElementById(id).style.backgroundColor = "white";
        x=1;
    }
}
window.onload=function(){
setInterval("blink('alert')", 500);}

var blink_speed = 500; // every 1000 == 1 second, adjust to suit
var t = setInterval(function () {
    var ele = document.getElementById('blinkingtext');
    ele.style.visibility = (ele.style.visibility == 'hidden' ? '' : 'hidden');
}, blink_speed);
</script>
<style type="text/css">
div#blinkingtextarea
{  
width:200px; padding: 8px;
    text-align: center;
   background-Color:
position: center;
}
</style>
</head>
<span style="center">
<body p align="center">
<div align="center">
    <div id="blinkingtextarea"><div id="blinkingtext"><p align="center">Terus Berusaha Jangan Menyerah</div></div>
    <br/>
</div>
</body>
</html>
<p align="right"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<script type="text/javascript" span style="right">
var imageclock=new Object()
//Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image:
imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "zcpm.jpg", "colon.gif"]
imageclock.instances=0
var preloadimages=[]
for (var i=0; i<imageclock.digits.length; i++){ //preload images
preloadimages[i]=new Image()
preloadimages[i].src=imageclock.digits[i]
}
imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead
var sections=timestring.split(":")
if (sections[0]=="0") //If hour field is 0 (aka 12 AM)
sections[0]="12"
else if (sections[0]>=13)
sections[0]=sections[0]-12+""
for (var i=0; i<sections.length; i++){
if (sections[i].length==1)
sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />'
else
sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />'
}
return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2]
}
imageclock.display=function(){
var clockinstance=this
this.spanid="clockspan"+(imageclock.instances++)
document.write('<span id="'+this.spanid+'"></span>')
this.update()
setInterval(function(){clockinstance.update()}, 1000)
}
imageclock.display.prototype.update=function(){
var dateobj=new Date()
var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string
var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />'
document.getElementById(this.spanid).innerHTML=currenttimeHTML
}

</script>
</body>
</head>
<body>


<script type="text/javascript">
new imageclock.display()
</script>
</body>

</body>
</html>

Share on Google Plus

About Unknown

0 comments:

Post a Comment