Home
1
Creating a blinking button Wed Sep 22, 2010 1:43 am
Guest
Guest
Hello fellas 
Onother tutorial i took the time to write.Today i am gonna show you how to create a blinking button using javascript.Its an awesome effect and i think it will be great fun to use it will also come in handy when you want to use a big phrase to display and the button area is too small.Lets start
First of all,we need to create a basic HTML document.Here is the basic HTML page structure :
Now,lets add our javascript:
Now our HTML:
Now lets explore the javascript:
stringm = new Array(4);
stringm[1] = "Wow";
stringm[2] = "thats a";
stringm[3] = "blinking";
stringm[4] = "button";
We can change the name our the orange colored codes.That will be the name of the blinking buttons.
LIVE DEMO
Onother tutorial i took the time to write.Today i am gonna show you how to create a blinking button using javascript.Its an awesome effect and i think it will be great fun to use it will also come in handy when you want to use a big phrase to display and the button area is too small.Lets start First of all,we need to create a basic HTML document.Here is the basic HTML page structure :
- Code:
<html>
<head>
<style type="text/css">
/****here we place our css(if needed)***/
</style>
<script type="javascript">
//Here we place our Javascript codes and our javascript button code
</script>
</head>
<body>
<!--Here we place our HTML-->
</body>
</html>
Now,lets add our javascript:
- Code:
<script type="javascript">
var blinking = true;
var mypos = 0;
var dpos = 25;
var a = 1;
var b = 1;
stringm = new Array(4);
stringm[1] = "Wow";
stringm[2] = "thats a";
stringm[3] = "blinking";
stringm[4] = "button";
function ablink() {
if (b==1) {
document.forms[0].abutton.value = stringm[a]
b-- ;
a++;
if (a>4) {a = 1};}
else {
document.forms[0].abutton.value = "";
b++ }
}
function myblink() {
if (dpos > 13) {
mypos++}
if (dpos > 48) {
mypos = 0;
dpos = 25;
}
else {dpos++}
ianID = setTimeout ("myblink(); ablink()", 200);
}
function stopit() {
if (blinking==true) {
clearTimeout(ianID);
document.forms[0].abutton.value = "Click Here";
blinking = false;
}
else {
myblink();
document.forms[0].cbutton.value = "Stop" ;
blinking = true;
}
}
</script>
Now our HTML:
- Code:
<form>
<div align="center"><center><p><input type="button" name="abutton" value=" Button "><br>
</p>
</div>
</form>
Now lets explore the javascript:
stringm = new Array(4);
stringm[1] = "Wow";
stringm[2] = "thats a";
stringm[3] = "blinking";
stringm[4] = "button";
We can change the name our the orange colored codes.That will be the name of the blinking buttons.
LIVE DEMO
