网页计算器 && 简易网页时钟 && 倒计时时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body,div,p,ul,li,input{margin:0;padding:0;}
ul{list-style-type:none;}
a{color:#fff;outline:none;text-decoration:none;}
body{font:700 24px/1.5 Arial;}
#calc{position:relative;width:300px;background:#000;margin:10px auto;}
#calc p{color:#fff;text-align:right;font:12px/20px Arial;padding:0 5px;}
#calc .f-text{border:0;width:290px;height:84px;text-align:right;font:700 50px/84px Arial;background:url(img/inputBg.jpg) repeat-x;padding:0 5px;}
#calc ul{position:relative;overflow:hidden;zoom:1;background:url(img/bg.jpg);padding:0 0 17px 8px;}
#calc ul li{float:left;width:63px;height:41px;margin:17px 10px 0 0;}
#calc ul li a{display:block;width:63px;height:41px;line-height:41px;text-align:center;background:url(img/btn.png) no-repeat;}
#calc ul li a:hover{background-position:-63px 0;}
#calc ul li.btn-1 a{background-position:0 -41px;}
#calc ul li.btn-1 a:hover{background-position:-63px -41px;}
#calc ul li.btn-2{position:absolute;top:174px;right:0;height:99px;}
#calc ul li.btn-2 a{height:99px;line-height:99px;background-position:0 -164px;}
#calc ul li.btn-2 a:hover{background-position:-63px -164px;}
#calc ul li.btn-3{width:136px;}
#calc ul li.btn-3 a{width:136px;background-position:0 -82px;}
#calc ul li.btn-3 a:hover{background-position:0 -123px;}
#formula{position:absolute;top:20px;background:none;border:0;font:700 12px/1.5 Arial;width:280px;padding:3px 15px 0 5px;text-align:right;}
</style>
<script>
window.onload = function ()
{
var oCalc = document.getElementById("calc");
var aA = oCalc.getElementsByTagName("a");
var aInput = oCalc.getElementsByTagName("input")[0];
var oFormula = document.getElementById("formula");
var s = false;
var i = 0; for (i = 0; i < aA.length; i++){
aA[i].onfocus = function ()
{
this.blur()
};
aA[i].onclick = function ()
{
switch(this.innerHTML)
{
case "c":
aInput.value = 0;
oFormula.value = "";
break;
case "%":
count("%")
break;
case "÷":
count("/")
break;
case "×":
count("*")
break;
case "-":
count("-")
break;
case "+":
count("+")
break;
case "=":
s || (oFormula.value += aInput.value);
aInput.value = eval(oFormula.value.replace(/\%\/\*\-\+/,''));
aInput.value = aInput.value.substr(0,10).replace("NaN",0);
s = true;
break;
case ".":
if(aInput.value.search(/[\.\%\/\*\-\+]/) != -1)
break;
default:
s && (aInput.value = 0, oFormula.value = "", s = false);
aInput.value.length < 10 && (aInput.value = (aInput.value + this.innerHTML).replace(/^[0\%\/\*\-\+](\d)/,"$1"));
}
}
} function count(a)
{ if(s)
{
oFormula.value = aInput.value + a;
aInput.value = a;
s = false;
}
else
{
/[\%\/\*\-\+]$/.test(aInput.value) || (oFormula.value += aInput.value);
aInput.value = a;
/[\%\/\*\-\+]$/.test(oFormula.value) || (oFormula.value += aInput.value);
oFormula.value = oFormula.value.slice(-1) != a ? oFormula.value.replace(/.$/,a) : oFormula.value
}
}
}
</script>
<title>网页计算器</title>
</head>
<body>
<div id="calc">
<p>By - Ferris QQ:21314130</p>
<input class="f-text" type="text" readonly="readonly" maxlength="9" value="0" />
<ul>
<li class="btn-1"><a href="javascript:void(0)">c</a></li>
<li class="btn-1"><a href="javascript:void(0)">%</a></li>
<li class="btn-1"><a href="javascript:void(0)">÷</a></li>
<li class="btn-1"><a href="javascript:void(0)">×</a></li>
<li><a href="javascript:void(0)">7</a></li>
<li><a href="javascript:void(0)">8</a></li>
<li><a href="javascript:void(0)">9</a></li>
<li class="btn-1"><a href="javascript:void(0)">-</a></li>
<li><a href="javascript:void(0)">4</a></li>
<li><a href="javascript:void(0)">5</a></li>
<li><a href="javascript:void(0)">6</a></li>
<li class="btn-1"><a href="javascript:void(0)">+</a></li>
<li><a href="javascript:void(0)">1</a></li>
<li><a href="javascript:void(0)">2</a></li>
<li><a href="javascript:void(0)">3</a></li>
<li class="btn-2"><a href="javascript:void(0)">=</a></li>
<li class="btn-3"><a href="javascript:void(0)">0</a></li>
<li><a href="javascript:void(0)">.</a></li>
</ul>
<input id="formula" type="text" readonly="readonly" value="" />
</div>
</body>
</html>
简易网页时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易网页时钟</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oClock = document.getElementById("clock");
var aSpan = oClock.getElementsByTagName("span"); setInterval(getTimes, 1000);
getTimes();
function getTimes ()
{
var oDate = new Date();
var aDate = [oDate.getHours(), oDate.getMinutes(), oDate.getSeconds()];
for (var i in aDate) aSpan[i].innerHTML = format(aDate[i])
}
function format(a)
{
return a.toString().replace(/^(\d)$/, "0$1")
}
}
</script>
</head>
<body>
<div id="clock">
<span></span>点<span></span>分<span></span>秒
</div>
</body>
</html>
倒计时时钟
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时时钟</title>
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(img/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
<script>
window.onload = function ()
{
var oCountDown = document.getElementById("countdown");
var aInput = oCountDown.getElementsByTagName("input")[0];
var timer = null; aInput.onclick = function ()
{
this.className == "" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == '' ? "cancel" : '';
}; function format(a)
{
return a.toString().replace(/^(\d)$/,'0$1')
} function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName("span");
var oRemain = aSpan[0].innerHTML.replace(/^0/,'') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,''));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</script>
</head>
<body>
<div id="countdown">
<span>01</span>分钟<span>40</span>秒
<input type="button" value="" />
</div>
</body>
</html>
网页计算器 && 简易网页时钟 && 倒计时时钟的更多相关文章
- JS——制作简单的网页计算器
用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- jsp学习---使用jsp和JavaBean实现超简单网页计算器
一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...
- 利用Eric+Qt Designer编写倒计时时钟
[前言]前几日通过编写命令行通讯录,掌握了Python的基本语法结构,于是开始向更高水平冲击,利用Eric与Qt Designer 编写一个带界面的小程序.本次实操中也确实遇到了不少问题,通过学习也都 ...
- 一个简易的 LED 数字时钟实现方法
这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了. 首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心. L ...
- PPT 倒计时时钟，用 GIF 动画实现，可直接使用 -- 附 Python 实现代码
在上课时,有时需要显示一个倒计时时钟,让学生做题. PPT 没有简单有效的方法实现倒计时时钟,参考了多个方案,最终决定采用 GIF 动画来实现. 这样使用起来很简单,只要把事先做好的各个时长的倒计时动 ...
- 原创：C语言打开、下载、删除网页，统计网页字符个数
本程序由本人在华夏联盟的ID闪电笨笨原创,首发地址:http://bbs.hx95.com/ 写此程序希望可以可以激发新手学习C语言的积极性! C语言代码实现功能如下: 1.实现 ...
- 静态网页VS动态网页
干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...
- 如何用phpcms将静态网页生成动态网页？
在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...
- 易语言关于使用CURL，网页_访问,网页_访问S,网页_访问_对象,鱼刺（winHttpW）发送Get性能测试
易语言关于使用 CURL,网页_访问,网页_访问S,网页_访问_对象,鱼刺(winHttpW)发送Get性能测试 测试模块情况: |-精易模块5.8 |-鱼刺类Http |-libCURL +++ ...
随机推荐
- GDI+ 双缓存 和 刷新桌面（F5）
GDI+双缓存 POINT currentPoint; GetCursorPos(¤tPoint); HWND hWnd = ::GetDesktopWindow(); int n ...
- 使用 redux 监听插件的使用
首先需要在chrome浏览器当中下载redux插件 接着在你的项目当中加上**window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX ...
- IOS-使用CAShapLayer绘制扇形
IOS-使用CAShapLayer绘制扇形 为了增加应用体验感,我们动态绘制扇形或者饼状图效果. 这里我们使用CAShapeLayer,这样就不必再-(void)draw函数内绘制图形 参考代码 -( ...
- [ CodeVS冲杯之路 ] P1166
不充钱,你怎么AC? 题目:http://codevs.cn/problem/1166/ 有许久没有刷题了,忙着过中秋去了嘿嘿 首先它的每一行是独立的,我们可以直接把它拆分成 n 互不相关的子问题做 ...
- 查看gcc/g++默认include路径
转自:http://gcc.gnu.org/ml/gcc-help/2007-09/msg00205.html `gcc -print-prog-name=cc1plus` -v `g++ -prin ...
- 6.安装和配置OpenStack图片服务组件
安装和配置图片服务组件 这里是安装在控制器上 安装和配置图片服务组件 yum install –y openstack-glance python-glanceclient 编辑/etc/glance ...
- python--websocket数据解析
# websocket实现原理 ''' 1.服务端开启socket,监听ip和端口 2.客户端发送连接请求(带上ip和端口) 3.服务端允许连接 4.客户端生成一个随机字符串,和magic strin ...
- ubuntu软件包管理
ubuntu安装好了后首先要会下载和管理系统的软件包:ubuntu的软件管理方式是apt-get 安装软件包apt-get harvey@ubuntu:/var/cache/apt$ which ap ...
- Delphi栈对象
来自:http://blog.csdn.net/iseekcode/article/details/5158985 ------------------------------------------ ...
- AsBcd的意思