I made something
I made a right-to-left "progress" bar. Look. Actually, unless you know how to save an HTML file, you can't really see it. I only tested it in IE, though. Click at your own risk.
<html>
<head>
<script type="text/javascript">
/*----------------------------------------
* Right to left timerbar - made by Pandu *
* Made on October 30, 2005 *
----------------------------------------*/
setTimeout('var colors = ["#FFCC99","#CCFFCC"];l.style.backgroundColor=colors[0];l2d.style.backgroundColor=colors[1]',20) //time delay with colors to insure loading complete before changing colors
var ll = 200 //length of bar - set to a multiple of 100
var dl = 1
var l2 = 0
var p = 0
var inc = ll/100
function startit()
{
x = setInterval("addtotime()",1)
}
function addtotime()
{
if((l.style.width=="0px")&&(dl==1))
{
dl=0
alert("BOOM") //replace this line, not dl=0 with action that occurs after bar finishes
}
else
{
ll = ll-inc
l.style.width=ll+"px"
l2 = l2+inc
l2d.style.width=l2+"px"
p++
document.all["per"].innerText=p
}
}
</script>
</head>
<body>
<br>
<input type="button" onclick="startit()">
<input type="button" onclick="clearInterval(x)">
<input name="l" style="width:200px;border-width:0px;" disabled><input name="l2d" style="width:0px;border-width:0px;" disabled>
<span id="per"></span>
</body>
</html>
Hmmm..
Edit (12:08) ~ Rawr. I HATE THIS!!!! THE CONTENT THINGY MADE THE MAIN SECTION STRETCH! Ew. Hmph. Does it look any better in other browsers? I have FF on the laptop, but I'm too lazy to go downstairs. And anyway, I don't have any other browsers. This sucks.
Edit (12:15) ~ Yay! I solved it! Now I shall take a shower.
Edit (12:31) ~ My shower took 11:08 minutes.
Edit (4:42) ~ I made a left-to right version. Click at your own risk.
<html>
<head>
<style type="text/css">
/*--------------------------------------------------
* ONLY MODIFY VARIABLES DESIGNATED BY DASHES (---) *
* Made by Pandu on October 30, 2005 *
--------------------------------------------------*/
input#e {
width:0px;
background-color:#CCFF99; /*---Finishing color---*/
border-width:0px;
margin:0px;
}
input#s {
width:144px; /*---Bar width---*/
background-color:#FFCC99; /*---Starting color---*/
border-width:0px;
margin:0px;
}
</style>
<script type="text/javascript">
var bsw = 144 //---Bar width---
var bew = 0
var t = 100 //---Amount of increments---
var l = 1 //---How much time to wait between increments---
var inc = bsw / t
var doit = 1
var doit2 = 1
function bs()
{
if(doit2==1){
x = setInterval("bsr()",l)
doit2=0
}
}
function bsr()
{
if(doit==1){
bew = bew + inc
bsw = bsw - inc
e.style.width = bew+"px"
s.style.width = bsw+"px"
if(s.style.width=="0px")
{
doit=0
}
}
}
function bst()
{
doit2=1
clearInterval(x)
}
</script>
</head>
<body>
<input type="button" onclick="bs()"><input type="button" onclick="bst()">
<br>
<input id="e" name="e" disabled><input id="s" name="s" disabled>
</body>
</html>
Edit (4:50) ~ Number two is so much better. More customizable, too. Anyway, the first button on both is to start, and the second to pause.
Edit (4:54) ~ Actually, #2 lacks a percentage, so look at this. By the way, this percentage meter can be a bit off. Click at your own risk.
<html>
<head>
<style type="text/css">
/*--------------------------------------------------
* ONLY MODIFY VARIABLES DESIGNATED BY DASHES (---) *
* Made by Pandu on October 30, 2005 *
--------------------------------------------------*/
input#e {
width:0px;
background-color:#CCFF99; /*---Finishing color---*/
border-width:0px;
margin:0px;
}
input#s {
width:721px; /*---Bar width---*/
background-color:#FFCC99; /*---Starting color---*/
border-width:0px;
margin:0px;
}
</style>
<script type="text/javascript">
var bsw = 721 //---Bar width---
var bew = 0
var t = 100 //---Amount of increments---
var l = 1 //---How much time to wait between increments---
var inc = bsw / t
var pinc = inc / bsw * 100
var p = 0
var doit = 1
var doit2 = 1
function bs()
{
if(doit2==1){
x = setInterval("bsr()",l)
doit2=0
}
}
function bsr()
{
if(doit==1){
bew = bew + inc
bsw = bsw - inc
p+=pinc
document.all["per"].innerText=p+"%"
e.style.width = bew+"px"
s.style.width = bsw+"px"
if(s.style.width=="0px")
{
doit=0
}
}
}
function bst()
{
doit2=1
clearInterval(x)
}
</script>
</head>
<body>
<input type="button" onclick="bs()"><input type="button" onclick="bst()">
<br>
<input id="e" name="e" disabled><input id="s" name="s" disabled><span id="per">0%</span>
</body>
</html>
Edit (5:02) ~ I edited them by adding -'s. Now, how shall I make the Halloween decor?
______________________________
~Pandu
My random math problem of the day:
If you keep looping infinitely, adding a number that keeps being halved, such as 1 + 1/2 + 1/4 + 1/8 and so on, what number will you get? And don't say infinity.
<html>
<head>
<script type="text/javascript">
/*----------------------------------------
* Right to left timerbar - made by Pandu *
* Made on October 30, 2005 *
----------------------------------------*/
setTimeout('var colors = ["#FFCC99","#CCFFCC"];l.style.backgroundColor=colors[0];l2d.style.backgroundColor=colors[1]',20) //time delay with colors to insure loading complete before changing colors
var ll = 200 //length of bar - set to a multiple of 100
var dl = 1
var l2 = 0
var p = 0
var inc = ll/100
function startit()
{
x = setInterval("addtotime()",1)
}
function addtotime()
{
if((l.style.width=="0px")&&(dl==1))
{
dl=0
alert("BOOM") //replace this line, not dl=0 with action that occurs after bar finishes
}
else
{
ll = ll-inc
l.style.width=ll+"px"
l2 = l2+inc
l2d.style.width=l2+"px"
p++
document.all["per"].innerText=p
}
}
</script>
</head>
<body>
<br>
<input type="button" onclick="startit()">
<input type="button" onclick="clearInterval(x)">
<input name="l" style="width:200px;border-width:0px;" disabled><input name="l2d" style="width:0px;border-width:0px;" disabled>
<span id="per"></span>
</body>
</html>
Hmmm..
Edit (12:08) ~ Rawr. I HATE THIS!!!! THE CONTENT THINGY MADE THE MAIN SECTION STRETCH! Ew. Hmph. Does it look any better in other browsers? I have FF on the laptop, but I'm too lazy to go downstairs. And anyway, I don't have any other browsers. This sucks.
Edit (12:15) ~ Yay! I solved it! Now I shall take a shower.
Edit (12:31) ~ My shower took 11:08 minutes.
Edit (4:42) ~ I made a left-to right version. Click at your own risk.
<html>
<head>
<style type="text/css">
/*--------------------------------------------------
* ONLY MODIFY VARIABLES DESIGNATED BY DASHES (---) *
* Made by Pandu on October 30, 2005 *
--------------------------------------------------*/
input#e {
width:0px;
background-color:#CCFF99; /*---Finishing color---*/
border-width:0px;
margin:0px;
}
input#s {
width:144px; /*---Bar width---*/
background-color:#FFCC99; /*---Starting color---*/
border-width:0px;
margin:0px;
}
</style>
<script type="text/javascript">
var bsw = 144 //---Bar width---
var bew = 0
var t = 100 //---Amount of increments---
var l = 1 //---How much time to wait between increments---
var inc = bsw / t
var doit = 1
var doit2 = 1
function bs()
{
if(doit2==1){
x = setInterval("bsr()",l)
doit2=0
}
}
function bsr()
{
if(doit==1){
bew = bew + inc
bsw = bsw - inc
e.style.width = bew+"px"
s.style.width = bsw+"px"
if(s.style.width=="0px")
{
doit=0
}
}
}
function bst()
{
doit2=1
clearInterval(x)
}
</script>
</head>
<body>
<input type="button" onclick="bs()"><input type="button" onclick="bst()">
<br>
<input id="e" name="e" disabled><input id="s" name="s" disabled>
</body>
</html>
Edit (4:50) ~ Number two is so much better. More customizable, too. Anyway, the first button on both is to start, and the second to pause.
Edit (4:54) ~ Actually, #2 lacks a percentage, so look at this. By the way, this percentage meter can be a bit off. Click at your own risk.
<html>
<head>
<style type="text/css">
/*--------------------------------------------------
* ONLY MODIFY VARIABLES DESIGNATED BY DASHES (---) *
* Made by Pandu on October 30, 2005 *
--------------------------------------------------*/
input#e {
width:0px;
background-color:#CCFF99; /*---Finishing color---*/
border-width:0px;
margin:0px;
}
input#s {
width:721px; /*---Bar width---*/
background-color:#FFCC99; /*---Starting color---*/
border-width:0px;
margin:0px;
}
</style>
<script type="text/javascript">
var bsw = 721 //---Bar width---
var bew = 0
var t = 100 //---Amount of increments---
var l = 1 //---How much time to wait between increments---
var inc = bsw / t
var pinc = inc / bsw * 100
var p = 0
var doit = 1
var doit2 = 1
function bs()
{
if(doit2==1){
x = setInterval("bsr()",l)
doit2=0
}
}
function bsr()
{
if(doit==1){
bew = bew + inc
bsw = bsw - inc
p+=pinc
document.all["per"].innerText=p+"%"
e.style.width = bew+"px"
s.style.width = bsw+"px"
if(s.style.width=="0px")
{
doit=0
}
}
}
function bst()
{
doit2=1
clearInterval(x)
}
</script>
</head>
<body>
<input type="button" onclick="bs()"><input type="button" onclick="bst()">
<br>
<input id="e" name="e" disabled><input id="s" name="s" disabled><span id="per">0%</span>
</body>
</html>
Edit (5:02) ~ I edited them by adding -'s. Now, how shall I make the Halloween decor?
______________________________
~Pandu
My random math problem of the day:
If you keep looping infinitely, adding a number that keeps being halved, such as 1 + 1/2 + 1/4 + 1/8 and so on, what number will you get? And don't say infinity.
What's up with these math problems?
Posted by