Skip to content

Instantly share code, notes, and snippets.

/number_pad.html Secret

Created October 4, 2013 01:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/2083dafe1cd2a615593e to your computer and use it in GitHub Desktop.
Save anonymous/2083dafe1cd2a615593e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
number_pad.html
<html>
<head>
<title>On Screen Number Pad Using JavaScript</title>
<script type="text/javascript">
var curr_display=1;
function number_write(x)
{
var text_box = document.getElementById("number"+curr_display);
if(x>=0 && x<=9)
{
if(isNaN(text_box.value))
text_box.value = 0;
text_box.value = (text_box.value * 10)+x;
}
}
function number_clear()
{
document.getElementById("number"+curr_display).value = 0;
}
function number_c()
{
var text_box = document.getElementById("number"+curr_display);
var num = text_box.value;
var num1 = num%10;
num -= num1;
num /= 10;
text_box.value = num;
}
function toggle()
{
if (curr_display==1) {
curr_display=2;
} else {
curr_display=1;
}
}
</script>
<style type="text/css">
.main_panel
{
width:270px;
height:570px;
background-color:#999999;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
padding:20px;
}
.number_button
{
width:70px;
height:70px;
margin:10px;
float:left;
background-color:#FFFF99;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
font-size:36px;
text-align:center;
}
.toggle_button {
width:250px;
height:70px;
margin:10px;
float:left;
background-color:#FFFF99;
border-top-right-radius:20px;
border-top-left-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
font-size:36px;
text-align:center;
}
.number_button:hover
{
background-color:#66FF66;
}
.toggle_button:hover
{
background-color:#66FF66;
}
.text_box
{
width:250px;
height:30px;
font-size:24px;
text-align:right;
}
</style>
</head>
<body>
<div class="main_panel">
<br />
<center><input class="text_box" type="text" id="number1" name="num" /></center>
<br />
<center><input class="text_box" type="text" id="number2" name="num" /></center>
<br /><br />
<div class="number_button" onclick="number_write(1);">1</div>
<div class="number_button" onclick="number_write(2);">2</div>
<div class="number_button" onclick="number_write(3);">3</div>
<div class="number_button" onclick="number_write(4);">4</div>
<div class="number_button" onclick="number_write(5);">5</div>
<div class="number_button" onclick="number_write(6);">6</div>
<div class="number_button" onclick="number_write(7);">7</div>
<div class="number_button" onclick="number_write(8);">8</div>
<div class="number_button" onclick="number_write(9);">9</div>
<div class="number_button" onclick="number_clear();">Clr</div>
<div class="number_button" onclick="number_write(0);">0</div>
<div class="number_button" onclick="number_c();">C</div>
<div class="toggle_button" onclick="toggle();">Discount</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment