使用jQuery如何实现进制转换计算器

　　介绍

本篇文章给大家分享的是有关使用jQuery如何实现进制转换计算器,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

动画效果:

使用jQuery如何实现进制转换计算器

& lt; !DOCTYPE html> 　　& lt; html lang=癳n"祝辞 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title>计算器& lt;/title> 　　& lt;脚本https://www.yisu.com/zixun/src=" . ./jquery.min.js "> 　　<时尚> 　　* { 　　保证金:0; 　　填充:0; 　　} 　　#{计算器 　　位置:相对; 　　保证金:50 px汽车; 　　填充:5 px; 　　宽度:230 px; 　　身高:316 px; 　　背景:rgb (190210224); 　　} 　　#{屏幕 　　宽度:230 px; 　　高度:60 px; 　　背景:rgb (153153153); 　　border - radius: 5 px; 　　text-align:正确; 　　溢出:隐藏; 　　} 　　# txt1 { 　　高度:20 px; 　　padding-top: 10 px; 　　字体大小:10 px; 　　} 　　# txt2 { 　　高度:30 px; 　　字体大小:20 px; 　　} 　　# num { 　　浮:左; 　　宽度:130 px; 　　} 　　# num输入{ 　　宽度:40像素; 　　高度:40像素; 　　margin-top: 3 px; 　　} 　　# del { 　　浮:正确; 　　宽度:70 px; 　　高度:30 px; 　　} 　　#输入{德尔 　　margin-top: 4 px; 　　宽度:70 px; 　　高度:31 px; 　　} 　　#{运营商 　　margin-top: 5 px; 　　浮:正确; 　　宽度:70 px; 　　身高:180 px; 　　} 　　#操作员输入{ 　　宽度:70 px; 　　高度:31 px; 　　margin-top: 4 px; 　　} 　　#转炉{ 　　浮:正确; 　　margin-top: 5 px; 　　宽度:70 px; 　　 　　 　　} 　　#转炉,告诉{ 　　位置:绝对的; 　　底部:5 px; 　　宽度:70 px; 　　高度:30 px; 　　字体大小:10 px; 　　} 　　#转炉div { 　　显示:没有; 　　位置:绝对的; 　　左:150 px; 　　前:100像素; 　　} 　　#转炉div输入{ 　　宽度:85 px; 　　高度:25 px; 　　margin-top: 5 px; 　　}> 头 　　身体<> 　　
　　
　　

　　

　　
　　 　　
　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　 　　
　　
　　
　　
　　 　　 　　 　　 　　 　　
　　
　　 　　 　　 　　 　　 　　 　　
　　<输入类="显示" type="按钮" value="进制转换”> 　　 　　
　　 　　
　　
　　 　　<脚本> 　　$(函数(){ 　　var=0;//我为清空标志,i=1时需要清空# txt2的数据//获取输入的数字 　　$ (" # num输入”)。点击(函数(){//先判断# txt2中是否保存着上次计算的结果,如果是则将其清空 　　如果(我===1){ 　　$ (" # txt2 ")。text (" "); 　　}//保证数字以正确的格式显示//使用开关语句实现 　　 　　开关($ ().val ()) { 　　例“继续教育”: 　　$ (" # txt2 ")。text (" "); 　　 　　打破; 　　”。”: 　　如果($ (" # txt2”)。text () .indexOf (“。”) !=1) { 　　打破; 　　其他}{$ (" # txt2”) .append($(这).val ());} 　　打破; 　　默认值: 　　如果($ (" # txt2 ")。text ()===" 0 ") { 　　$ (" # txt2 ")。text($(这).val ()); 　　其他}{ 　　$ (" # txt2 ") .append($(这).val ()); 　　} 　　} 　　我=0;//将清空标志设为0 　　})；//获取运算符 　　$(" #操作员输入:没有(去年):“)。点击(函数(){ 　　$ (" # txt1 ")。text ($ (" # txt2 ")。text() +()美元.val ()); 　　$ (" # txt2 ")。text (" "); 　　})；//按下“=奔屑扑? 　　$(" #操作员输入”).last ()。点击(函数(){//使用eval()函数//$ (" # txt2 ")。text (eval ($ (" # txt1 ")。text () + $ (" # txt2 ")。text ()));//使用常规方法 　　var str=$ (" # txt1”)。text (); 　　var n1=parseFloat (str); 　　var n2=parseFloat ($ (" # txt2 ")。text ()); 　　var卡尔=str (str.length-1); 　　开关(cal) { 　　例“+”: 　　$ (" # txt2”)。文本(n1 + n2); 　　打破; 　　例“-”: 　　$ (" # txt2”)。文本(n1-n2); 　　打破; 　　例“*”: 　　$ (" # txt2”)。文本(n1 * n2); 　　打破; 　　例“/? 　　$ (" # txt2”)。文本(n1、n2); 　　打破; 　　默认值:休息; 　　} 　　$ (" # txt1”)。文本(" "); 　　i=1;//将清空标志设为1 　　})；//按下“←”回删数字 　　$ (" # del”)。点击(函数(){ 　　var str=$ (" # txt2”)。text (); 　　如果(i==0) { 　　$ (" # txt2 ")。text (str。片(0,str.length - 1)); 　　} 　　})；//按下“进制转换”,出现几种进制转换按钮 　　$(" #转炉,告诉”)。点击(函数(){ 　　$(" #转炉div) .toggle (); 　　$(" #操作符”).toggle (); 　　})；//进行进制转换 　　$(" #转炉div输入”)。点击(函数(){ 　　var指数=this.name; 　　var n=$ (" # txt2 ")。text (); 　　开关(指数){ 　　“1”: 　　n=方法(n, 10); 　　$ (" # txt2”)。text (n.toString (16)); 　　打破; 　　“2”: 　　n=方法(n, 10); 　　$ (" # txt2”)。text (n.toString (8)); 　　打破; 　　案例3: 　　n=方法(n, 10); 　　$ (" # txt2”)。text (n.toString (2)); 　　打破; 　　案例4: 　　n=方法(n, 16); 　　$ (" # txt2”)。text (n.toString (10)); 　　打破; 　　例“5”: 　　n=方法(n, 8); 　　$ (" # txt2”)。text (n.toString (10)); 　　打破; 　　例“6”: 　　n=方法(n, 2); 　　$ (" # txt2”)。text (n.toString (10)); 　　打破; 　　 　　} 　　i=1;//将清空标志设为1 　　})； 　　})；>

使用jQuery如何实现进制转换计算器