cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div style="width:900px; text-align:left; margin: 0px auto 0px auto; padding:20px;">

<span class="navpart">Java Script 2</span>

<br />

<div class="left">

<span class="bolet">JS Intervals:</span> 

1000 = 1 second 
 
&nbsp; | &nbsp;
 
60000 = 1 minute 
 
&nbsp; | &nbsp;
 
Can be used for JS animations.
 
<br />

<span class="bolet">Repeats actions at set time intervals:</span>
&nbsp; 
idvariable = setInterval( function fname() { ... }, 1000);
<br />
<span class="bolet">Stop the interval from repeating:</span>
&nbsp; 
function fname() { clearInterval(idvariable); }

<br />

<span class="bolet">Performs an action once after a set amount of time:</span> 
&nbsp; 
idvariable = setTimeout( function fname() { ... }, 3000);

<br />

<span class="bolet">Stop Automatically:</span> 
&nbsp;  
function fname1() { thetimer = setInterval( function fname2() { ... }, 1000); 
&nbsp; 
setTimeout( function fname3() { clearInterval(thetimer); }, 5000); }

<br /><br />

<span onclick="loadagain();" class="textlink">Reset</span>

</div>

<form id="timing" action="#"> 

<span class="bolet">Version 1:</span>

&nbsp;

<input id="timer1b" value="0" type="text" style="width:50px; padding:5px; text-align:center;" class="showbor" />

&nbsp;

<span class="textlink" onclick="countd1a();">Count Up</span>

&nbsp; - &nbsp;

<span class="textlink" onclick="countd1c();">Stop</span>

&nbsp; | &nbsp; 

<input id="timer2b" value="10" type="text" style="width:50px; padding:5px; text-align:center;" class="showbor" />

&nbsp;

<span class="textlink" onclick="countd2a();">Count Down</span>

&nbsp; - &nbsp;

<span class="textlink" onclick="countd2c();">Stop</span>

<br /><br />

<span class="bolet">Version 2:</span>

(auto stop) 

&nbsp;

<input id="timer3b" value="0" type="text" style="width:50px; padding:5px; text-align:center;" class="showbor" />

&nbsp;

<span class="textlink" onclick="countd3a();">Count</span>

&nbsp;

up to

&nbsp;

<input id="timer3e" value="5" type="text" style="width:50px; padding:5px; text-align:center;" class="showbor" />

&nbsp;

seconds &nbsp;

(++ counts up and -- counts down)

</form> <br />

Java Script intervals are not very precise and often have delays. 

Depending on the browser, setting the interval to 990 instead of 1000 may help.

<br /><br />

<span class="bolet">Version 1:</span>

&nbsp;

&lt;form id="timing" action="#"&gt; 
&nbsp;
&lt;input id="timer1b" value="0" type="text" /&gt;
&nbsp;
&lt;span class="textlink" onclick="countd1a();"&gt; Start &lt;/span&gt;
&nbsp;
&lt;span class="textlink" onclick="countd1c();"&gt; Stop &lt;/span&gt;
&nbsp;
&lt;/form&gt; 

<br /><br />

<span class="bolet">Start:</span> &nbsp;

var timer1a;
&nbsp;
var timer1c;
&nbsp;
function countd1a() { timer1a=document.getElementById("timer1b").value;
&nbsp;
timer1c = setInterval( function countd1b() { timer1a++;
&nbsp;
document.getElementById("timer1b").value=timer1a; }, 1000); }
<br /><br />

<span class="bolet">Stop:</span> &nbsp;
function countd1c() { clearInterval(timer1c); }

<br /><br />

<span class="bolet">Version 2:</span>
&nbsp;
&lt;form id="timing" action="#"&gt;
&nbsp;
&lt;input id="timer3b" value="0" type="text" /&gt;
&nbsp;
&lt;span class="textlink" onclick="countd3a();"&gt;Count&lt;/span&gt;
&nbsp;
up to &lt;input id="timer3e" value="5" type="text" /&gt; seconds
&nbsp; &lt;/form&gt; 

<br /><br />

var timer3a; var timer3c; var timer3d;
&nbsp;
function countd3a() { timer3a=document.getElementById("timer3b").value;
&nbsp;
timer3d=document.getElementById("timer3e").value; timer3d=timer3d*1000;
&nbsp;
timer3c = setInterval( function countd3b() { timer3a++;
&nbsp;
document.getElementById("timer3b").value=timer3a; }, 1000);
&nbsp;
setTimeout( function countd3c() { clearInterval(timer3c); }, timer3d); } 

<br /><br />

<span onclick="loadagain();" class="textlink">Reset</span> Reload the page from the server (false reloads from the cache).

&nbsp;

function loadagain() { location.reload(true); }

</div><br />

<script>

function lcase() { document.getElementById("lower").value = document.getElementById("lower").value.toLowerCase(); }

function ucase() { document.getElementById("upper").value = document.getElementById("upper").value.toUpperCase(); }

function ccase() { document.getElementById("charnum").value = document.getElementById("charnum").value.length; }

function mcase() { 
var matches1 = document.getElementById("same1").value;
var matches2 = document.getElementById("same2").value;
matches2 = matches2.match(matches1); 
document.getElementById("same2").value = matches2; }

function rcase() { var leet = document.getElementById("place").value;

leet = leet.toLowerCase();

leet = leet.replace(/a/g, "4");
leet = leet.replace(/b/g, "8");
leet = leet.replace(/c/g, "(");
leet = leet.replace(/d/g, "|)");
leet = leet.replace(/e/g, "3");
leet = leet.replace(/f/g, "|=");
leet = leet.replace(/g/g, "6");
leet = leet.replace(/h/g, "|-|");
leet = leet.replace(/i/g, "1");
leet = leet.replace(/j/g, ")");
leet = leet.replace(/k/g, "|<");
leet = leet.replace(/l/g, "|_");
leet = leet.replace(/m/g, "|\/|");
leet = leet.replace(/n/g, "|\|");
leet = leet.replace(/o/g, "0");
leet = leet.replace(/p/g, "|>");
leet = leet.replace(/q/g, "9");
leet = leet.replace(/r/g, "|2");
leet = leet.replace(/s/g, "5");
leet = leet.replace(/t/g, "7");
leet = leet.replace(/u/g, "|_|");
leet = leet.replace(/v/g, "\/");
leet = leet.replace(/w/g, "\/\/");
leet = leet.replace(/x/g, "><");
leet = leet.replace(/y/g, "'/");
leet = leet.replace(/z/g, "2");
leet = leet.replace(/\//g, "*");

document.getElementById("place").value = leet; }

</script>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> variable2 = variable1.toLowerCase(); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="lower" class="showbor" style="width:200px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="KAWAII" /> </form> 

</td> <td>

&nbsp; <span class="textlink" onclick="lcase();">Go!</span> 

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> variable2 = variable1.toUpperCase(); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="upper" class="showbor" style="width:200px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="tech" /> </form> 

</td> <td>

&nbsp; <span class="textlink" onclick="ucase();">Go!</span> 

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> variable2 = variable1.length; <br /> (Counts characters including spaces.) </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="charnum" class="showbor" style="width:200px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="cake and icecream" /> </form> 

</td> <td>

&nbsp; <span class="textlink" onclick="ccase();">Go!</span>

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<form action="#"> <table> <tr> <td colspan="4"> 
If var1 has word, assign value to var2: <br /> variable2 = variable1.match("word"); </td> </tr>

<tr> <td>

<input type="text" id="same1" class="showbor" style="width:100px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="r" />

</td><td style="width:10px;">&nbsp;</td><td>

<input type="text" id="same2" class="showbor" style="width:100px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="purrfect" /> 

</td> <td>

&nbsp; <span class="textlink" onclick="mcase();">Go!</span> 

</td> </tr> </table> </form> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> variable2 = variable1.replace(/M/g, "01001101"); <br /> 
variable2 = variable1.replace(/\?/g, "00111111"); <br /> (\ is so used so symbols are interpreted as text) </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="place" class="showbor" style="width:200px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="leet" /> </form> 

</td> <td>

<span class="textlink" onclick="rcase();">Go!</span>

</td> </tr> </table> </div>

<script>

function fmath() { var themath1 = document.getElementById("floor").value;
themath1 = Math.floor(themath1); 
document.getElementById("floor").value = themath1; }

function cmath() { var themath2 = document.getElementById("ceiling").value;
themath2 = Math.ceil(themath2); 
document.getElementById("ceiling").value = themath2; }

function rmath() { var themath3 = document.getElementById("rand").value;
themath3 = Math.random(); 
document.getElementById("rand").value = themath3; }

function anumb() { var themath4 = document.getElementById("anumber").value;
themath4 = Math.floor((20)*Math.random())+1;
document.getElementById("anumber").value = themath4; }

function docen() { var parfloit = document.getElementById("parfo").value;
parfloit = parseFloat(parfloit).toFixed(2);
document.getElementById("parfo").value = parfloit; }

</script>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> Round down: variable = Math.floor(number); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="floor" class="showbor" style="width:150px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="2.5" /> </form> 

</td> <td>

<span class="textlink" onclick="fmath();">Go!</span> 

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> Round up: variable = Math.ceil(number); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="ceiling" class="showbor" style="width:150px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="2.5" /> </form> 

</td> <td>

<span class="textlink" onclick="cmath();">Go!</span>

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> Random decimal: variable = Math.random(); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="rand" class="showbor" style="width:200px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="?" readonly="readonly" /> </form>

</td> <td>

<span class="textlink" onclick="rmath();">Go!</span> 

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> Random number between 1 and 20: <br /> variable = Math.floor((20)*Math.random())+1; </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="anumber" class="showbor" style="width:150px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="?" readonly="readonly" /> </form>

</td> <td>

<span class="textlink" onclick="anumb();">Go!</span> 

</td> </tr> </table> </div>

<div class="showbor" style="display:inline-block; vertical-align:top; margin:0px 10px 20px 20px; padding:10px;">
<table> <tr> <td colspan="2"> Variable to decimal: variable = parseFloat(variable).toFixed(2); </td> </tr>

<tr> <td>

<form action="#">
<input type="text" id="parfo" class="showbor" style="width:150px; height:30px; border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; -moz-border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px; text-align:center;" value="5.1784AL" /> </form>

</td> <td>

<span class="textlink" onclick="docen();">Go!</span> 

</td> </tr> </table> </div>
<br />
<a href="http://azurelight.net">AzureLight.net</a> | 
<a href="http://mikaristar.deviantart.com">MikariStar.DeviantArt.com</a> | 
<a href="http://artrift.com/Mikari/">ArtRift.com/Mikari/</a> | 
<a href="http://miliazure.wordpress.com">MiliAzure.WordPress.com</a>
</div>
            
          
!
            
              .jsmoves { position: relative; width:48px; height:48px; padding:0px; text-align:center; 
border: 1px solid #0047ab; background-color:#00bfff; margin:0px; z-index:1; }

@keyframes partout { 0% { left:0px; } 100% { left:50px; } }
@keyframes partin { 0% { left:50px; } 100% { left:0px; } }

.stuff { width:80px; padding:0px; text-align:center; overflow:hidden;
border: 0px none; margin:0px; }

.thing { width:80px; height:20px; padding:0px; text-align:center; 
border: 1px solid #0047ab; background-color:#87cefa; margin:0px; }

body { padding:0px; margin:0px; font-family:Arial; font-size:14px; line-height:20px; 
color:#393939; background-color:#c2f0ff; text-align:center; }

::-webkit-scrollbar { width: 10px; height:10px; }
::-webkit-scrollbar-track { background-color:#c2f0ff; }
::-webkit-scrollbar-thumb { border-radius: 20px; background-color:#ff9adc; border: 0px none; }

.showbor { border:0px none; border:3px dotted #ff9adc; padding:0px; } 

a, span.textlink { color:#ff71ce; text-decoration:none; }

input, textarea, select, option, button { color:#393939;
font-family:Arial; font-size:14px; line-height:17px;
overflow:hidden; background-color: #fff8bb;  
border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px; } 

*:focus { outline:none; }
            
          
!
            
              var pic1 = "on";

function time1() { time1 = setInterval( function time1b() { 

if (pic1=="on") { document.getElementById("pic1").style.display = "none"; pic1="off"; } 

else { document.getElementById("pic1").style.display = "block"; pic1="on"; }

 }, 1000); }

function time1c() { clearInterval(time1); var pic1 = "on"; } 

function time2() { time2 = setTimeout( function time2b() { 

document.getElementById("pic2").style.display = "none"; }, 3000); }

var pic3 = "on";

function time3() { time3 = setInterval( function time3b() { 

if (pic3=="on") { document.getElementById("pic3").style.display = "none"; pic3="off"; } 

else { document.getElementById("pic3").style.display = "block"; pic3="on"; }

 }, 1000);

setTimeout( function time3c() { clearInterval(time3); }, 10000); }

var timer1a;   var timer1c;

function countd1a() { timer1a=document.getElementById("timer1b").value;

timer1c = setInterval( function countd1b() { timer1a++;

document.getElementById("timer1b").value=timer1a; }, 1000); } 

function countd1c() { clearInterval(timer1c); } 

var timer2a;   var timer2c;

function countd2a() { timer2a=document.getElementById("timer2b").value;

timer2c = setInterval( function countd2b() { timer2a--;

document.getElementById("timer2b").value=timer2a; }, 1000); } 

function countd2c() { clearInterval(timer2c); } 

var timer3a; var timer3c; var timer3d;

function countd3a() { timer3a=document.getElementById("timer3b").value;

timer3d=document.getElementById("timer3e").value;

timer3d=timer3d*1000;

timer3c = setInterval( function countd3b() { timer3a++;

document.getElementById("timer3b").value=timer3a; }, 1000);

setTimeout( function countd3c() { clearInterval(timer3c); }, timer3d); } 

function loadagain() { location.reload(true); }
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console