网页计算器 && 简易网页时钟 && 倒计时时钟

<!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 +++ ...

随机推荐

Agile已死， Agility长存
注:本文系作者独立翻译,可以随意转载.如有雷同,纯属巧合.原文地址:http://pragdave.me/blog/2014/03/04/time-to-kill-agile/ P.s. 第一次自己翻 ...
WINDOWS2008 KMS 服务器安装及激活
搭建环境条件: windows server 2008 enterprise 安装光盘kms密钥kms服务安装步骤: 安装第一台windows server 2008 enterprise服务器用km ...
hdu 4359 dp
/* 题目大意:给n个节点的二叉树第i个节点的权值为2^(i-1), 求所有含左右子树的节点都符合左子树的权和小于右子树权和的种数. */ #include <iostream> #inc ...
ANDROID开发笔记（二）
动机: 开发的一个背单词的软件. 不会实现划屏的特性. 方法: 第一步尝试: 在MainActivity中, 增加以下代码后, 如果在视图的空白处点击时, 文本框中的时间就会发生改变. @Overri ...
Android屏幕元素层次结构
转自:http://blog.csdn.net/hpoi/article/details/4629717 Android屏幕元素层次结构 android.app.Activity 对于一个Andr ...
Codeforces538F A Heap of Heaps(函数式线段树)
题意:给你一个数组a[n],对于数组每次建立一个完全k叉树,对于每个节点,如果父节点的值比这个节点的值大,那么就是一个违规点,统计出1~n-1完全叉树下的违规点的各自的个数. 一个直觉的思想就是暴力, ...
在线查看PDF文档
http://www.cnblogs.com/morang/p/4598894.html http://78re52.com1.z0.glb.clouddn.com/resource%2Fscenar ...
Delphi存取图像完整解决方案
http://blog.sina.com.cn/s/blog_693cf1cf0100plkq.html 对于涉及图像数据的数据库应用程序,图像数据的存取技术是一个关键.由于缺少技术文档及DEMO例程 ...
Guava源码学习（一）Optional
基于版本:Guava 22.0 Wiki:Using and avoiding null 0:Optional简介 null在很多场景下会引发问题,NullPointerException困扰过无数的 ...
adb install 安卓apk的包
➜ ~ adb install /Users/jkr/Downloads/QYVideoClient-debug.apk /Users/jkr/Downloads/QYVideoClient-deb ...

网页计算器 && 简易网页时钟 && 倒计时时钟

网页计算器 && 简易网页时钟 && 倒计时时钟的更多相关文章

随机推荐

热门专题