当前位置：首页 > CMS教程 > Thinkphp > 列表

thinkPHP框架实现的简单计算器示例

发布:smiling　来源: PHP粉丝网 　添加日期：2021-11-02 10:18:24　浏览: 评论：0　

这篇文章主要介绍了thinkPHP框架实现的简单计算器,结合实例形式分析了基于thinkPHP框架的用户登陆、数值计算、数据库读写、历史记录保存等功能相关实现技巧与操作注意事项,需要的朋友可以参考下。

本文实例讲述了thinkPHP框架实现的简单计算器，分享给大家供大家参考，具体如下：

HTML部分 文件名 index.html

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.   <meta charset="UTF-8"> 
  5.   <title>计算器</title> 
  6.   <script type="text/javascript" src="public/js/jquery-2.2.3.js"></script> 
  7.   <link rel="stylesheet" href="public/css/index.css" rel="external nofollow" > 
  8. </head> 
  9. <body> 
  10.   <div class="login"> 
  11.       <span>登录</span> 
  12.   </div> 
  13.   <div class="register"> 
  14.       <form action=""> 
  15.         <span>请输入你的手机号开始使用</span> 
  16.         <br><br> 
  17.         <input id="myphone" type="text"> 
  18.         <input id="use" type="button" value="使用"> 
  19.         <br><br> 
  20.       </form> 
  21.   </div> 
  22.   <div class="calculator"> 
  23.       <div class="counter"> 
  24.         <span class="brand">计算器</span> 
  25.         <br><br> 
  26.         <input class="import" type="text" style="text-align: right;"> 
  27.         <br><br> 
  28.         <form class="snap" action=""> 
  29.           <br><br> 
  30.           <input class="order" id="one" type="button" value="1"> 
  31.           <input class="order" id="two" type="button" value="2"> 
  32.           <input class="order" id="three" type="button" value="3"> 
  33.           <input class="order" id="four" type="button" value="4"> 
  34.           <input class="order" id="five" type="button" value="5"> 
  35.           <br><br> 
  36.           <input class="order" id="six" type="button" value="6"> 
  37.           <input class="order" id="seven" type="button" value="7"> 
  38.           <input class="order" id="eight" type="button" value="8"> 
  39.           <input class="order" id="nine" type="button" value="9"> 
  40.           <input class="order" id="zero" type="button" value="0"> 
  41.           <br><br> 
  42.           <input class="operator" id="plus" type="button" value="+"> 
  43.           <input class="operator" id="add" type="button" value="-"> 
  44.           <input class="operator" id="mul" type="button" value="*"> 
  45.           <input class="operator" id="sub" type="button" value="/"> 
  46.           <input class="" id="equal" type="button" value="="> 
  47.           <br><br> 
  48.           <input class="order" type="button" value="."> 
  49.           <input id="backspace" type="button" value="←"> 
  50.           <input id="clear" type="button" value="c"> 
  51.           <input type="button" value="CE"> 
  52.           <input type="button" value="MC"> 
  53.         </form> 
  54.       </div> 
  55.       <div class="result"> 
  56.         <div> 
  57.           <span>当前结果:</span><span id="current_results"></span> 
  58.         </div> 
  59.         <br><br> 
  60.         <span>历史记录:</span> 
  61.         <ul id="cal_result" style="list-style-type: none"> 
  62.           <li><span>删除</span></li> 
  63.         </ul> 
  64.       </div> 
  65.   </div> 
  66. </body> 
  67.   <script type="text/javascript" src="public/js/index.js"> 
  68.   </script> 
  69. </html> 

CSS样式 文件名 index.css

  1. .login{/*登录*/ 
  2.   height: 30px; 
  3.   width: 100px; 
  4.   background-color: #00a2d4; 
  5.   text-align: center; 
  6.   cursor: pointer; 
  7.   padding-top: 10px; 
  8.   position: fixed; 
  9. } 
  10. .register{ 
  11.   display: none; 
  12.   position: fixed; 
  13. } 
  14. .calculator{ 
  15.   display: none; 
  16.   position: fixed; 
  17. } 
  18. .counter{ 
  19.   border: 1px solid black; 
  20.   height: 400px; 
  21.   width: 320px; 
  22.   float: left; 
  23. } 
  24. .import{ 
  25.   height: 20px; 
  26.   width: 180px; 
  27.   margin-top: 50px; 
  28.   margin-left: 50px; 
  29. } 
  30. .snap{ 
  31.   margin-left: 50px; 
  32.   margin-top: -30px; 
  33. } 
  34. .snap input{ 
  35.   height: 30px; 
  36.   width: 30px; 
  37. } 
  38. .result{ 
  39.   border: 1px solid black; 
  40.   height: 400px; 
  41.   width: 320px; 
  42.   float: left; 
  43.   margin-left: 50px; 
  44. } 
  45. .brand{ 
  46.   position: relative; 
  47.   top: 50px; 
  48.   left: 90px; 
  49. } 

JS部分  文件名 index.js

  1. //计算屏幕宽高 
  2. var w_width = $(window).width(); 
  3. var w_height = $(window).height(); 
  4. var operator = 0;//运算符号 
  5. var change = 0;//属于运算符后需要清空上一数值 
  6. var num1 = 0;//元算的第一个数据 
  7. var num2 = 0;//运算的第二个数据 
  8. var sum = 0;//运算结果 
  9. //居中 
  10. function setCenter(obj){ 
  11.   var this_width = $(obj).width(); 
  12.   var this_height = $(obj).height(); 
  13.   var this_left = parseInt((w_width-this_width)/2); 
  14.   var this_height = parseInt((w_height-this_height)/2); 
  15.   $(obj).css({left:this_left,top:this_height}); 
  16. } 
  17. //正则 
  18. function testReg() { 
  19.   //定义参数 
  20.   var regType = arguments[0]?arguments[0]:'phone'; 
  21.   var myString = arguments[1]?arguments[1]:false; 
  22.   var regArray = new Array(); 
  23.   regArray['phone'] = /^1[3|4|5|7|8]\d{9}$/; 
  24.   regArray['email'] = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//邮箱 *代表{0,}　+代表{1,}　?代表{0,1} 
  25.   //判断 
  26.   if (myString){ 
  27.     return regArray[regType].test(myString); 
  28.   } 
  29.   return false; 
  30. } 
  31. //发送数据到后台 
  32. function sendMessage() { 
  33.   //手机号 
  34.   var myphone = $("#myphone").val(); 
  35.   //计算器 
  36.   var myUrl = '/app/base.php'; 
  37.   var myData = {num1:num1,num2:num2,cal_option:operator,cal_result:sum,myphone:myphone,type:'add'}; 
  38.   $.post(myUrl,myData,function (msg) { 
  39.     //TODO 
  40.   },'json') 
  41.   getResultByPhone(); 
  42. } 
  43. //获取结果 
  44. function getResultByPhone() { 
  45.   var myphone = $("#myphone").val(); 
  46.   var myUrl = '/app/base.php'; 
  47.   var myData = {myphone:myphone,type:'getResult'}; 
  48.   $.post(myUrl,myData,function (msg) { 
  49.     //TODO 
  50.     $("#cal_result").html(msg); 
  51.   },'text') 
  52. } 
  53. //获取数据 
  54. function deleteHistory(id) { 
  55.   var myUrl = '/app/base.php'; 
  56.   var MyData = {id:id,type:'delete'}; 
  57.   $.post(myUrl,MyData,function (msg) { 
  58.     //TODO 
  59.   },'json') 
  60.   getResultByPhone(); 
  61. } 
  62. $(function () { 
  63.   //登录居中 
  64.   setCenter($(".login").show(8000)); 
  65.   //点击登录显示输入 
  66.   $(".login").click(function(){ 
  67.     setCenter($(".register").show()); 
  68.     $(this).hide(); 
  69.   }); 
  70.   //点击使用显示计算器 
  71.   $("#use").click(function () { 
  72.     if (testReg('phone',$("#myphone").val())){ 
  73.       setCenter($(".calculator").show()); 
  74.       $(".register").hide(); 
  75.       getResultByPhone() 
  76.     }else { 
  77.       alert ("你输的手机格式不对"); 
  78.       return false; 
  79.     } 
  80.   }) 
  81.   $(".order").click(function () {//点击数字 
  82.     var num = $(this).val(); 
  83.     var oldValue = $(".import").val(); 
  84.     if (change ==1){ 
  85.       oldValue = "0"; 
  86.       change = 0; 
  87.     } 
  88.     var newValue = ""; 
  89.     if (num == -1){ 
  90.       oldValue = parseFloat(oldValue); 
  91.       newValue = oldValue * -1; 
  92.     }else if (num == "."){ 
  93.       if (oldValue.indexOf('.') == -1) 
  94.         newValue = oldValue + "."; 
  95.       else 
  96.         newValue = oldValue; 
  97.     }else { 
  98.       if (oldValue == 0 && oldValue.lastIndexOf('.') == -1){ 
  99.         newValue = num; 
  100.       }else { 
  101.         newValue = oldValue + num; 
  102.       } 
  103.     } 
  104.     $(".import").val(newValue); 
  105.   }); 
  106.   $("#clear").click(function () {//清除 
  107.     $(".import").val("0"); 
  108.     operator = 0; 
  109.     change = 0; 
  110.     num1 = 0; 
  111.     num2 = 0; 
  112.   }); 
  113.   $("#backspace").click(function () {//退格 
  114.     if (change ==1){ 
  115.       operator = 0; 
  116.       change = 0; 
  117.     } 
  118.     var value = $(".import").val(); 
  119.     if (value.length == 1){ 
  120.       $(".import").val("0"); 
  121.     }else { 
  122.       value = value.substr(0,value.length - 1); 
  123.       $(".import").val(value); 
  124.     } 
  125.   }); 
  126.   $(".operator").click(function() {//点击运算符号触发事件 
  127.     change = 1; 
  128.     operator = $(this).val(); 
  129.     var value = $(".import").val(); 
  130.     var dianIndex = value.indexOf("."); 
  131.     if (dianIndex == value.length) { 
  132.       value = value.substr(0, value.length - 1); 
  133.     } 
  134.     num1 = parseFloat(value); 
  135.   }); 
  136.   $("#equal").click(function () {//点击等号 
  137.     var value = $(".import").val(); 
  138.     var dianIndex = value.indexOf("."); 
  139.     if (dianIndex == value.length){ 
  140.       value = value.substr(0,value.length - 1); 
  141.     } 
  142.     var equal = $(this).val(); 
  143.     num2 = parseFloat(value); 
  144.     if (operator == "+"){ 
  145.       sum = num1 + num2; 
  146.     }else if (operator == "-"){ 
  147.       sum = num1 - num2; 
  148.     }else if (operator == "*"){ 
  149.       sum = num1 * num2; 
  150.     }else if (operator == "/"){ 
  151.       sum = num1 / num2; 
  152.     }else if (operator == "" || num1 ==0 || num2 == 0){ 
  153.       sum = num1 +num2; 
  154.     } 
  155.     var re = /^[0-9]+.?[0-9]*$/; 
  156.     if (re.test(sum)){ 
  157.       sum = sum.toFixed(2); 
  158.     } 
  159.     $(".import").val(sum); 
  160.     sendMessage(); 
  161.     $("#current_results").text(num1 + operator + num2 + equal + sum); 
  162.     change = 1; 
  163.     operator = 0; 
  164.     num1 = 0; 
  165.     num2 = 0; 
  166.   }); 
  167. }) 

接口 文件名 IDB.php

  1. <?php 
  2. namespace mao; 
  3. interface IDB{ 
  4.   public function insert($data); 
  5.   public function update($data); 
  6.   public function select($data); 
  7.   public function del($data); 
  8. } 

创建一个Mysqli类继承接口实现增删改查

文件名 MySqli.clsaa.php

  1. <?php 
  2. namespace mao; 
  3. include "IDB.php"; 
  4. class MySqli implements IDB{ 
  5.   private $conn = null; 
  6.   private $table = null; 
  7.   private $sysConfig = array( 
  8.     'host' => '', 
  9.     'user' => '', 
  10.     'pwd' => '', 
  11.     'db' => '' 
  12.   ); 
  13.   private static $_instance = null; 
  14.   private function __construct($config){ 
  15.     if(is_array($config)){ 
  16.       $this->sysConfig = array_merge($this->sysConfig,$config); 
  17.       $this->conn = new \Mysqli($this->sysConfig['host'],$this->sysConfig['user'],$this->sysConfig['pwd'],$this->sysConfig['db']); 
  18.       if (!$this->conn){ 
  19.         echo "连接失败".mysqli_error(); 
  20.       } 
  21.     } 
  22.   } 
  23.   public static function getInstance($config){ 
  24.     if (is_null(self::$_instance)){ 
  25.       self::$_instance = new self($config); 
  26.     } 
  27.     return self::$_instance; 
  28.   } 
  29.   //设计表 
  30.   public function table($table){ 
  31.     $this->table = $table; 
  32.     return $this; 
  33.   } 
  34.   //查询 
  35.   private function changeCondition($condition){ 
  36.     $where_array = array(); 
  37.     foreach($condition as $k => $v){ 
  38.       if(is_array($v)){ 
  39.         if(strtolower($v[0])=='like'){ 
  40.           $where_array[] = $k.' '.$v[0].' \'%'.$v[1].'%\''; 
  41.         }else{ 
  42.           $where_array[] = $k.' '.$v[0].' \''.$v[1].'\''; 
  43.         } 
  44.       } 
  45.       if(is_string($v)){ 
  46.         $where_array[] = $k.' = \''.$v.'\''; 
  47.       } 
  48.     } 
  49.     $where = implode(' AND ',$where_array); 
  50.     return $where?$where:1; 
  51.   } 
  52.   public function select($condition){ 
  53.     $where = $this->changeCondition($condition); 
  54.     $sql = "select * from $this->table where ".$where."order by id desc limit 10"; 
  55.     $res = $this->conn->query($sql); 
  56.     $ret = array(); 
  57.     while ($row = $res->fetch_assoc()){ 
  58.       $ret[] = $row; 
  59.     } 
  60.     return $ret; 
  61.   } 
  62.   public function insert($data){ 
  63.     $sql = "insert into `{$this->table}` ( `id` ,`user_phone` ,`num1` ,`num2` ,`option` ,`result` ,`status` ,`admin_user` ) VALUES ( NULL , '{$data['myphone']}', '{$data['num1']}', '{$data['num2']}', '{$data['cal_option']}', '{$data['cal_result']}', '1', 'mao' )"; 
  64.     $this->conn->query($sql); 
  65.   } 
  66.     public function update($id){ 
  67.     $sql = "UPDATE `{$this->table}` SET `status` = '-1' WHERE `id` ={$id}"; 
  68.     $this->conn->query($sql); 
  69.   } 
  70.   public function del($condition){ 
  71.   } 
  72. } 

配置项  文件名 config.php

  1. <?php 
  2. return [ 
  3.   'db'=>[ 
  4.     'host' => '127.0.0.1', 
  5.     'user' => 'root', 
  6.     'pwd' => 'root', 
  7.     'db' => 'cal' 
  8.   ], 
  9.   'author' =>[ 
  10.     'adminuser' => 'mao', 
  11.   ] 
  12. ]; 

操作计算器 文件名 base.php

  1. <?php 
  2. namespace mao; 
  3. define("ROOT_PATH",dirname(dirname(__FILE__))); 
  4. $config = include ROOT_PATH."/lib/config/config.php"; 
  5. include ROOT_PATH."/lib/db/MySqli.class.php"; 
  6. $db = MySqli::getInstance($config['db']); 
  7. if ($_POST){ 
  8.   //查询 
  9.   if ($_POST['type'] == 'getResult'){ 
  10.     $condition = array( 
  11.       'user_phone' =>array('like',$_POST['myphone']), 
  12.       'status'=> '1' 
  13.     ); 
  14.     $result = $db->table('calculate')->select($condition); 
  15.     $result_string = ''; 
  16.     foreach ($result as $k => $v){ 
  17.       $result_string .= "<li><span class='mydelte' onclick='deleteHistory({$v['id']})'>删除</span>{$v['num1']} {$v['option']} {$v['num2']} = {$v['result']} </li>"; 
  18.     } 
  19.     echo $result_string; 
  20.   } 
  21.   //删除 
  22.   if ($_POST['type'] == 'delete'){ 
  23.     $id = isset($_POST['id'])?$_POST['id']:''; 
  24.     $db->table('calculate')->update($id); 
  25.   } 
  26.   if ($_POST['type'] == 'add'){ 
  27.     $data = $_POST; 
  28.     $db->table('calculate')->insert($data); 
  29.   } 
  30. } 

目录结构

sql语句

  1. SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; 
  2. SET time_zone = "+00:00"; 
  3. /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; 
  4. /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; 
  5. /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; 
  6. /*!40101 SET NAMES utf8 */; 
  7. -- 
  8. -- 資料庫: `cal` 
  9. -- 
  10. -- -------------------------------------------------------- 
  11. -- 
  12. -- 表的結構 `calculate` 
  13. -- 
  14. CREATE TABLE IF NOT EXISTS `calculate` ( 
  15.  `id` int(10) NOT NULL AUTO_INCREMENT COMMENT '序号 主键 自增', 
  16.  `user_phone` varchar(100) NOT NULL COMMENT '用户手机号', 
  17.  `num1` varchar(100) NOT NULL COMMENT '第一个数字', 
  18.  `num2` varchar(100) NOT NULL COMMENT '第二个数字', 
  19.  `option` varchar(10) NOT NULL COMMENT '加减乘除选项', 
  20.  `result` varchar(100) NOT NULL COMMENT '结果', 
  21.  `status` int(10) NOT NULL COMMENT '状态-1 删除 0 禁用 1 正常', 
  22.  `admin_user` varchar(100) NOT NULL COMMENT '管理员', 
  23.  PRIMARY KEY (`id`) 
  24. ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='计算表' AUTO_INCREMENT=40 ; 
  25. -- 
  26. -- 轉存資料表中的資料 `calculate` 
  27. -- 
  28. INSERT INTO `calculate` (`id`, `user_phone`, `num1`, `num2`, `option`, `result`, `status`, `admin_user`) VALUES 
  29. (1, '15727228076', '', '', '', '', 0, ''), 
  30. (2, '15727228076', '7', '6', '+', '13', -1, 'jingshan'), 
  31. (3, '13880425377', '9', '6', '+', '15', -1, 'jingshan'), 
  32. (4, '13880425377', '8', '7', '+', '15', -1, 'jingshan'), 
  33. (5, '13880425377', '8', '9', '*', '72', -1, 'jingshan'), 
  34. (6, '13880425377', '6', '7', '+', '13', 1, 'jingshan'), 
  35. (7, '13880425377', '89', '7', '+', '96', -1, 'jingshan'), 
  36. (8, '13880425377', '67', '8', '+', '75', 1, 'jingshan'), 
  37. (9, '13880425377', '2', '7', '+', '9', 1, 'jingshan'), 
  38. (10, '13880425377', '78', '7', '+', '85', 1, 'jingshan'), 
  39. (11, '13880425377', '12', '9', '*', '108', 1, 'jingshan'), 
  40. (12, '13880425377', '23', '7', '-', '16', 1, 'jingshan'), 
  41. (13, '13880425377', '67', '2', '-', '65', 1, 'jingshan'), 
  42. (14, '13880425377', '34', '7', '+', '41', 1, 'jingshan'), 
  43. (15, '13880425377', '78', '8', '/', '9.75', 1, 'jingshan'), 
  44. (16, '13880425377', '72', '9', '+', '81', 1, 'jingshan'), 
  45. (17, '13880425377', '78', '9', '+', '0', 1, 'mao'), 
  46. (18, '13880425377', '67', '9', '+', '0', 1, 'mao'), 
  47. (19, '13880425377', '78', '9', '+', '0', 1, 'mao'), 
  48. (20, '13880425377', '78', '9', '+', '0', 1, 'mao'), 
  49. (21, '13880425377', '67', '8', '+', '0', 1, 'mao'), 
  50. (22, '13880425377', '62', '8', '+', '0', 1, 'mao'), 
  51. (23, '13880425377', '12', '9', '*', '0', 1, 'mao'), 
  52. (24, '13880425377', '12', '9', '+', '0', 1, 'mao'), 
  53. (25, '13880425377', '7', '8', '-', '0', 1, 'mao'), 
  54. (26, '13880425377', '2', '4', '+', '0', 1, 'mao'), 
  55. (27, '13880425377', '8', '9', '*', '0', 1, 'mao'), 
  56. (28, '13880425377', '8', '9', '+', '0', 1, 'mao'), 
  57. (29, '13880425377', '12', '9', '*', '108.00', 1, 'mao'), 
  58. (30, '13880425377', '7', '8', '+', '15.00', 1, 'mao'), 
  59. (31, '13880425377', '1', '9', '*', '9.00', 1, 'mao'), 
  60. (32, '13880425377', '29', '7', '*', '203.00', 1, 'mao'), 
  61. (33, '13880425377', '95', '8', '/', '11.88', 1, 'mao'), 
  62. (34, '13880425377', '67', '98', '*', '6566.00', 1, 'mao'), 
  63. (35, '13880425377', '22', '9', '-', '13.00', 1, 'mao'), 
  64. (36, '13880425377', '45', '9', '/', '5.00', 1, 'mao'), 
  65. (37, '13880425377', '555', '777', '+', '1332.00', 1, 'mao'), 
  66. (38, '13880425377', '89', '0', '-', '89.00', 1, 'mao'), 
  67. (39, '13880425377', '0', '89', '0', '89.00', 1, 'mao'); 
  68. /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; 
  69. /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; 
  70. /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; 
  71. ---------------------

Tags: thinkPHP计算器

分享到：

推荐文章

热门文章

最新评论文章