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. ...
随机推荐
- 机房收费系统之【只允许一个MDI窗体 错误：426】 标签： vb 2014-08-15 10:36 1149人阅读 评论(23)
机房收费系统的主窗体是MDI窗体,为了在这个窗体上添加控件,所以我们在窗体上添加了picture控件,在MDI窗体中,子窗体实际上位于MDIClient里,即子窗体的父窗体就是MDIClient,而放 ...
- 让开发部署提速 8 倍，我参与贡献这款 IDE 插件的全过程
如何像参与开源那样,去参与一款 IDE 插件的设计? 作为一款 IDE 插件的使用者,我是否能决定下一个版本的功能? 自从产品经理银时小伙和他的开发小哥们在去年12月发布 Cloud Toolkit( ...
- php配置文件php.ini中文详解
转自:http://www.cnblogs.com/hbl/archive/2008/02/15/1069367.html [PHP] ; PHP还是一个不断发展的工具,其功能还在不断地删减 ; 而p ...
- PHP程序连接Redis报read error on connection问题
线上PHP程序动不动就报PHP Fatal error: Uncaught RedisException: read error on connection错误,就是连接Redis在那么1秒钟有问题, ...
- 【LINUX】降级安装低版本GCC，G++
由于要制作crosstool,需要用到gcc 4.1.2来编译,而Ubuntu 12.04下的gcc版本是gcc 4.6.3,高版本的gcc也不是好事啊. 下面介绍gcc 4.1.2的编译安装方法: ...
- 为什么不喜欢在 QQ 群里回答问题？
为什么不喜欢在 QQ 群里回答问题? 没有主题,主题随时都在变. 回答后无法备份,当然自己有心可以总结一下. 实时性要求太强,可能回答但是突然有事离开,再回头看已经是 几十条的留言. QQ 群用来闲聊 ...
- 2019-10-22-win7-无法启动-WPF-程序-D3Dcompiler_47.dll-丢失
title author date CreateTime categories win7 无法启动 WPF 程序 D3Dcompiler_47.dll 丢失 lindexi 2019-10-22 18 ...
- 阿里云IPv6 DDoS防御被工信部认定为“网络安全技术应用试点示范项目”
近日,阿里云数据中心骨干网IPv6 DDoS网络安全防御被工业和信息化部认定为“网络安全技术应用试点示范项目”,本次评选由工业和信息部网络安全管理局发起,从实用性.创新性.先进性.可推广性等维度展 ...
- 阿里开源！轻量级深度学习端侧推理引擎 MNN
阿里妹导读:近日,阿里正式开源轻量级深度学习端侧推理引擎“MNN”. AI科学家贾扬清如此评价道:“与 Tensorflow.Caffe2 等同时覆盖训练和推理的通用框架相比,MNN 更注重在推理时的 ...
- console.log详细介绍
console.log详细介绍 效果图: 代码如下: console.log("%c hello world!:http://www.baidu.com","color: ...