HTML自制计算器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自制计算器</title>
<link href="css\bootstrap.css.map" rel="stylesheet" />
<script src="js\bootstrap.js"></script>
<script src='js\jquery-1.8.2.js'></script>
<script type="text/javascript">
$(function(){
var $btn=$("#calc")
// 取消已绑定的事件:
$btn.off('click');
$btn.click(function() {
var x=parseFloat($('#x').val()),
op=$('#op').val(),
y=parseFloat($('#y').val()),
r;
r=x+op+y;
document.getElementById("result").value=eval(r);
// alert('计算结果：'+r);
try{
if(isNaN(x)||isNaN(y)){
throw new Error("输入有误！");
}
}catch(e){
alert("输入有误！"+e);
}finally{
alert('计算结果：'+x+op+y+"="+eval(r));
}
}); //创建过去7天的数组
$("#calendar").click(function() {
var DateArray=[...Array(7).keys()].map(days=>new Date(Date.now()+86400000*days));
console.log(DateArray);
alert(DateArray);
});
//生成随机ID
$("#RanNum").click(function() {
//生成长度为11的随机字母数字字符串
var RanNum=Math.random().toString(36).substring(2);
//hg7znok52x
console.log(RanNum);
alert(RanNum);
});
//本地时间
$("#time").click(function() {
var time=setInterval(()=>document.getElementById("timeDiv").innerHTML=new Date().toLocaleString().slice(10,19))
});
//生成随机十六进制代码（生成随机颜色）如：'#c618b2']
$("#RanCode").click(function() {
var RanCode='#'+Math.floor(Math.random()*0xffffff).toString(16).padEnd(6,'0');
console.log(RanCode);
alert(RanCode);
});
//数组去重
$("#arrlist").click(function() {
var arr=Array[1,2,2,3,5,6,6,9,8];
var arred=[...new Set(arr)];
console.log(arred);
alert(arred);
});
//返回一个键盘（惊呆了）
//用字符串返回一个键盘图形
$("#Graphical").click(function() {
var Graphical=(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)();
});
}); function calcul(){
var Graphical=(_=>[..."`1234567890-=~~QWERTYUIOP[]\\~ASDFGHJKL;'~~ZXCVBNM,./~"].map(x=>(o+=`/${b='_'.repeat(w=x<y?2:' 667699'[x=["BS","TAB","CAPS","ENTER"][p++]||'SHIFT',p])}\\|`,m+=y+(x+' ').slice(0,w)+y+y,n+=y+b+y+y,l+=' __'+b)[73]&&(k.push(l,m,n,o),l='',m=n=o=y),m=n=o=y='|',p=l=k=[])&&k.join`
`)();
}
</script>
</head>
<body onblur="calcul();">
<form>
<div id="calculateDiv">
<input type="text" id="x" />
<select name="option" id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="y" />
=<input type="text" id="result"/>
<input class="btn btn-success" type="submit" style="text-align:center;margin:0px auto;font-size:14px;font-family:'微软雅黑'" value="计算" id="calc" />
</div>
</form>
<div>
<button id="calendar" value="">日历</button>
<button id="RanNum" value="">获取随机ID</button>
</div>
<div>
<button id="time" value="">获取本地时间</button>
<span id="timeDiv"></span>
<button id="RanCode" value="">获取随机颜色代码</button>
<button id="arrlist" value="">数组去重</button>
<button id="Graphical" value="">返回键盘图形</button>
</div>
</body>
</html>
HTML自制计算器的更多相关文章
- 用php实现简单的自制计算器
存档: <!DOCTYPE html> <html> <head> <title>PHP实现计算器</title> </head> ...
- JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。
编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...
- 自制计算器 v1.1
之前的v1.0版本功能还不够完善,这个版本一并做了修改. 代码,每个sub表示哪个按钮做了注释. Dim a, temp, ans As Integer Dim op As String Sub sh ...
- VB自制计算器
使用visual basic编写. 绘制如下的按钮界面: 然后代码如下: Dim a, temp, ans As Integer Dim op As String Sub showans() Text ...
- JS-计算器制作
不完善,接下来想着把运算符分开成一个一个的按钮... <!DOCTYPE html><html> <head> <meta charset="UTF ...
- 自制c#简易计算器
这是一个课堂作业,我觉得作为一个简易的计算器不需要态度复杂的东西,可能还有一些bug,有空再慢慢加强. using System;using System.Collections.Generic;us ...
- 《自制编程语言》笔记：使用yacc与lex制作简单计算器
1.代码 1.1)test.l 1.2)test.y 1.3)Makefile (因为是在linux环境下,所以使用了Makefile) 2.编译与运行 2.1)编译 2.2)运行 1.代码(也可以在 ...
- JS计算器（自制）
<!doctype html><html><header><meta charset="utf-8"><script src= ...
- 栈的应用1——超级计算器（中缀与后缀表达式）C语言
这里要学的程序主要用来实现一个功能——输入表达式输出结果,也就是一个计算器.效果如下: 这个程序主要有两个步骤:1.把中缀表达式转换为后缀表达式:2.计算后缀表达式的结果. 首先先明白几个问题: 1. ...
随机推荐
- thinkphp5.0 验证提示信息的类型
以上是5.0.12版本 下面是5.0.5版本,没有elseif 上图中红方格的值只能是string类型,但是这种情况是在5.0.5版本是可以设置为array类型的
- 序列化类型为“System.Data.Entity.DynamicProxies..."对象时检测到循环引用
这是因为EF外键引起的序列化问题. 解决方案: context.Configuration.ProxyCreationEnabled = false; 这里我用的是一个基类控制器用于被继承 返回EF实 ...
- 个人总结OLinux上安装oracle11G Data Guard
一.准备环境 1.swap要求 swap最好设置3G以上,如果安装过程中报swap不足,可参考: https://www.jianshu.com/p/46635a12c8d0 2.官网必须安装包列表: ...
- 阿里云发布 Redis 5.0 缓存服务：全新 Stream 数据类型带来不一样缓存体验
4月24日,阿里云正式宣布推出全新 Redis 5.0 版本云数据库缓存服务,据悉该服务完全兼容 4.0 及早期版本,继承了其一贯的安全,稳定,高效等特点并带来了全新的 Stream 数据结构及多项优 ...
- @atcoder - AGC036D@ Negative Cycle
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 N 个点的有向带权图,从 0 编号到 N - 1.一开 ...
- @loj - 2091@ 「ZJOI2016」小星星
目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 Y 是一个心灵手巧的女孩子,她喜欢手工制作一些小饰品.她有 ...
- HZOJ Function
比较神仙的一道dp,考试的时候还以为是打表找规律啥的. 我们重新描述一下这道题:一个10 9 × n的网格,每个格子有一个权值,每一列格子的权值都是相同的.从一个起点开始,每次可以向上走一格或者向左上 ...
- 11-1 css属性选择器
一 基础选择器 标签选择器:选择的标签的‘共性’,而不是特性 div{}.ul{}.ol{}.form{} 类选择器:.box{} id选择器:#box{} 只能选择器的特性,主要是为了js *通配符 ...
- TCP/IP 、HTTP和SOCKET
TCP/IP协议概念 TCP/IP(Transmission Control Protocol/Internet Protocol)的简写,中文译名为传输控制协议/因特网互联协议,又叫网络通讯协议,这 ...
- 05Redis入门指南笔记(持久化)
Redis的强劲性能很大程度上是由于将所有数据都存储在了内存中,然而当Redis重启后,所有存储在内存中的数据就会丢失.在一些情况下,希望Redis能将数据从内存中以某种形式同步到硬盘中,使得重启后可 ...