HTML练习(网页计算器)

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5 <title>Insert title here</title>
 6 <script>
 7     var str;
 8     var num;
 9     function count(ch)
10     {
11         str=document.getElementById("show");
12         if(ch=="C")
13         {
14             str.value="0";
15         }
16         else if(ch=="←")
17         {
18             str.value=str.value.substr(0,str.value.length-1);
19             if(str.value.length==0)
20                 str.value="0";
21         }
22         else if(ch==‘%‘&&str.value=="0")
23         {
24             ;
25         }
26         else
27         {
28             if(str.value=="0")
29                 str.value="";
30             str.value=str.value+ch;
31         }
32     }
33     function ans()
34     {
35         str=document.getElementById("show");
36         num=eval(str.value);
37         str.value=num;
38     }
39 </script>
40 </head>
41 <body>
42 <form action="" name="cal">
43 <h1 align="center" style="color:#FF00FF;">计算器</h1>
44 <p align="center"> <input type="text" id="show" value="0" style="text-align: right;width: 250px; height: 30px;color:#0000FF;"></input></p>
45 <p align="center"> <input type="button" name="cal_cle" value="C" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘C‘)"></input>
46                    <input type="button" name="cal_pre" value="←" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘←‘)"></input>
47                    <input type="button" name="cal_pre" value="%" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘%‘)"></input>
48 </p>
49 <p align="center"> <input type="button" name="cal_1" value="1" style="width: 50px; height: 30px;font-size:20px;" onClick="count(1)"></input>
50                    <input type="button" name="cal_2" value="2" style="width: 50px; height: 30px;font-size:20px;" onClick="count(2)"></input>
51                    <input type="button" name="cal_3" value="3" style="width: 50px; height: 30px;font-size:20px;" onClick="count(3)"></input>
52                    <input type="button" name="cal_mul" value="*" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘*‘)"></input>
53 </p>
54 <p align="center"> <input type="button" name="cal_4" value="4" style="width: 50px; height: 30px;font-size:20px;" onClick="count(4)"></input>
55                    <input type="button" name="cal_5" value="5" style="width: 50px; height: 30px;font-size:20px;" onClick="count(5)"></input>
56                    <input type="button" name="cal_6" value="6" style="width: 50px; height: 30px;font-size:20px;" onClick="count(6)"></input>
57                    <input type="button" name="cal_div" value="/" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘/‘)"></input>
58 </p>
59 <p align="center"> <input type="button" name="cal_7" value="7" style="width: 50px; height: 30px;font-size:20px;" onClick="count(7)"></input>
60                    <input type="button" name="cal_8" value="8" style="width: 50px; height: 30px;font-size:20px;" onClick="count(8)"></input>
61                    <input type="button" name="cal_9" value="9" style="width: 50px; height: 30px;font-size:20px;" onClick="count(9)"></input>
62                    <input type="button" name="cal_add" value="+" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘+‘)"></input>
63 </p>
64 <p align="center"> <input type="button" name="cal_0" value="0" style="width: 50px; height: 30px;font-size:20px;" onClick="count(0)"></input>
65                    <input type="button" name="cal_dot" value="." style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘.‘)"></input>
66                    <input type="button" name="cal_equ" value="=" style="width: 50px; height: 30px;font-size:20px;" onClick="ans()"></input>
67                    <input type="button" name="cal_sub" value="-" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘-‘)"></input>
68 </p>
69 </form>
70 </body>
71 </html>

时间: 2024-10-03 02:02:45

HTML练习(网页计算器)的相关文章

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

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

ASP.NET 网页计算器的实现

一.页面设计 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

CSS+JS打造的黑白风格网页计算器

JavaScript版网页计算器,仿Vista风格,计算器中的按钮做的想当漂亮,由此也增加了对此计算器的专业好感.鼠标移在计算器上,有响应效果. <!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

JSP实现网页计算器

(1)jsp实现网页计算器代码如下:只有两个jsp页面 myCal.jsp如下: <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.g

js网页计算器(按键+点击)

var text = document.getElementById('text');// 显示文本 var by = document.getElementById('by'); //按钮生成区域 //按键的value var str = new Array('2', '√', '=', '清除', '1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '×', '0', '.', '±', '÷'); var x = '',// 计算的

js+html实现简易网页计算器

前言 很早之前就想用js写一个简单的计算器,今天这个心愿算是完成了,作为用js做的第一个小项目,挣扎了一下午,代码其实挺简单的,无奈本人太菜了,代码十分钟,bug半小时: 图片展示 其实第一张图才是我想做的计算器,但是最上面一行的功能无法实现,并且第一张是用grid布局写的,添加js不方便,于是我又写了第二张图的界面 这个计算器的主要特点就是可以在屏幕上显示出用户想要计算的整个表达式,然后直接计算出结果,而不需要每进行一次加减乘除的运算都要按等于号:功能与界面是仿照的vivo手机自带的计算器,由

网页计算器

功能描述: +-*/.平方.开方.退格-清零.求余.另一累赘换肤器 功能实现概述 主要分四部分:头部<计算器>.上面<显示屏和清零>.主体<数字键和其余功能键>.结尾<版权> 主要是通过在整个主体和清零功能键上设置onclick事件,方法的实现步骤: 得到点击的节点(IE:srcElement,FF:target<这个顺序不知道对不对>) 判断节点类型(只考虑并接收按钮<input type="button">)

jQuery/javascript实现简单网页计算器

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="jquery.js"></script> 6 7 <style type="text/css"> 8 table{background-color:pink;width:300px;he

利用事件冒泡实现简单的网页计算器

效果: 代码: <!DOCTYPE HTML> <html> <head> <title>取消与利用冒泡</title> <meta charset="utf-8"/> </head> <body> <div id="keys"> <button>1</button> <button>2</button> <