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

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

随机推荐

FreeFileSync
FreeFileSync is an Open-Source folder comparison and synchronization tool. It is optimized for highe ...
shell面试经典70例
转载自:http://www.imooc.com/article/1131 1) 如何向脚本传递参数 ? ./script argument 例子: 显示文件名称脚本 ./show.sh file1. ...
[ CodeVS冲杯之路 ] P3038
不充钱,你怎么AC? 题目:http://codevs.cn/problem/3038/ 按照题目给定的方法,一步步推下去,直到推到1就输出次数至于-1的话,一开始想直接用数组判重,但是怕T掉,于是 ...
artDialog组件与iframe
背景组件官网. 未用过的朋友可以先了解下. 当Content参数传递html元素时,官方的解释是: 备注:1.元素不是复制而是完整移动到对话框中,所以原有的事件与属性都将会保留 2.如果隐藏元素被传 ...
ldd命令【转】
转自:http://www.cnblogs.com/wanghetao/p/3779611.html ldd命令用于判断某个可执行的 binary 档案含有什么动态函式库. 参数说明: --versi ...
Linux下Nginx使用
1. 安装 CentOS 7上Nginx的安装和启动方法如下 # yum install nginx # firewall-cmd --permanent --zone=public --add-se ...
python 删除字符串中的连续空格只保留一个
目标是要去掉多余的空格字符,在相邻字符串中,只保留一个空格紫梧桐 - 蛋壳公寓朝阳门店郑田力可以利 ...
wsgi的学习（1）：什么是WSGI
本文来自:http://www.nowamagic.net/academy/detail/1330310 WSGI,全程是:Web Server Gateway Interface,或者python ...
android关于fragment的构造函数用法建议
错误信息 Avoid non-default constructors in fragments: use a default constructor plus Fragment#setArgumen ...
利用Com组件产Excel完整操作
最近公司要批次产出报表,是利用控制台应用程序操作Excel,并设置各种样式. 在网上搜索此类的例子,但是感觉一些用法都已经发生了变化,我用的.net 4.0 ,Microsoft.Office.Int ...

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

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

随机推荐

热门专题