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

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

  1. JS——制作简单的网页计算器

    用JS做了一个简易的网页计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  2. jsp学习---使用jsp和JavaBean实现超简单网页计算器

    一.需求 如题,用jsp实现一个超简单的网页计算器. 二.实现 1.效果图 1)初始界面: 2)随便输入两个数进行相乘: 3)当除数为零时提示报错: 2.代码 Calculator.java pack ...

  3. 利用Eric+Qt Designer编写倒计时时钟

    [前言]前几日通过编写命令行通讯录,掌握了Python的基本语法结构,于是开始向更高水平冲击,利用Eric与Qt Designer 编写一个带界面的小程序.本次实操中也确实遇到了不少问题,通过学习也都 ...

  4. 一个简易的 LED 数字时钟实现方法

    这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了. 首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心. L ...

  5. PPT 倒计时时钟，用 GIF 动画实现，可直接使用 -- 附 Python 实现代码

    在上课时,有时需要显示一个倒计时时钟,让学生做题. PPT 没有简单有效的方法实现倒计时时钟,参考了多个方案,最终决定采用 GIF 动画来实现. 这样使用起来很简单,只要把事先做好的各个时长的倒计时动 ...

  6. 原创：C语言打开、下载、删除网页，统计网页字符个数

    本程序由本人在华夏联盟的ID闪电笨笨原创,首发地址:http://bbs.hx95.com/ 写此程序希望可以可以激发新手学习C语言的积极性! C语言代码实现功能如下:            1.实现 ...

  7. 静态网页VS动态网页

    干<沙朗新闻发布系统>什么时候.我们已经建立的网页.html的,并且.aspx,第一次接触.我认为这些东西是一样的,因为它,在观看ASP.NET视频的时候.听见里面讲课的老师有提到了这两样 ...

  8. 如何用phpcms将静态网页生成动态网页？

    在前两篇随笔中已经简单介绍了phpcms,那么现在让我们来看一下如何用phpcms将静态网页生成动态网页? 1.在templates文件夹下新建模板文件夹ceshi(名字可以自己随笔起) 2.在ces ...

  9. 易语言关于使用CURL，网页_访问,网页_访问S,网页_访问_对象,鱼刺（winHttpW）发送Get性能测试

    易语言关于使用 CURL,网页_访问,网页_访问S,网页_访问_对象,鱼刺(winHttpW)发送Get性能测试 测试模块情况: |-精易模块5.8  |-鱼刺类Http  |-libCURL +++ ...

随机推荐

  1. js函数调用与声明 (for时注意)

    可以的: test();  // 直接function 方式声明的函数可以直接调用,后声明 function test(){} aa();   //error  var 方式声明的函数需先声明后调用v ...

  2. Java Nio注意事项

    Selector  : public abstract class Selector extends Object SelectableChannel 对象的多路复用器. 可通过调用此类的 open ...

  3. UVA10154 Weights and Measures

    https://vjudge.net/problem/UVA-10154 ↑Vjudge大法好 堆一个乌龟塔.每只乌龟有重量w和承重能力s(也要承受自己的重量,所以实际可托起s-w),问最多能堆几只乌 ...

  4. C++ delete 两次

    转载自:http://blog.csdn.net/jxluofeng/article/details/19766801 <问题>危险的代码: int* p=new int(1);   de ...

  5. Golang/Go语言/Go IDE/Go windows环境搭建/Go自动提示编译器/GoSublime

    Go是Google开发的一种编译型,并发型,并具有垃圾回收功能的编程语言. 罗伯特·格瑞史莫(Robert Griesemer),罗勃·派克(Rob Pike)及肯·汤普逊于2007年9月开始设计Go ...

  6. springboot结合swagger自动生成接口文档

    前后台分离的开发渐渐已成趋势.那么前后端的沟通就成了问题,包括移动端,web端.如果有一个东西在我们写完代码的时候,自动将接口的所有注释,调用文档提供出来,是不是一件很美好的事情.那就是使用swagg ...

  7. Scala学习随笔——控制语句

    Scala只内置了为数不多的几种程序控制语句:if.while.for.try catch以及函数调用,这是因为从Scala诞生开始就包含了函数字面量,Scala内核没有定义过多的控制结构,而是可以通 ...

  8. RANSAC中迭代次数的计算

    假设 $w=\frac{内点个数 }{所有点的个数}$. 则 $p_{0}=w^n$表示采样的$n$个点全为内点的概率(可重复) 则至少有一个为外点的概率$p_{1}=1-p_{0}$ 则重复$K$次 ...

  9. ESXI和vSphere的安装配置-实现一台电脑硬件虚拟化为两台

    本篇文章包含以下几个部分: 1EXSI软件和vSphere软件的安装 2在vSphere上安装虚拟系统 3对虚拟系统通过配置实现硬件虚拟化,实现硬件直通 1.EXSI安装 通过网上下载EXSI ISO ...

  10. 牛客小白月赛3 I 排名【结构体排序/较复杂/细节】

    链接:https://www.nowcoder.com/acm/contest/87/I 来源:牛客网 题目描述 Cwbc和XHRlyb都参加了SDOI2018,他们特别关心自己的排名. 我们定义每一 ...