本文實(shí)例講述了thinkPHP框架實(shí)現(xiàn)的簡(jiǎn)單計(jì)算器。分享給大家供大家參考,具體如下:
HTML部分 文件名 index.html
!DOCTYPE html> html lang="en"> head> meta charset="UTF-8"> title>計(jì)算器/title> script type="text/javascript" src="public/js/jquery-2.2.3.js">/script> link rel="stylesheet" href="public/css/index.css" rel="external nofollow" > /head> body> div class="login"> span>登錄/span> /div> div class="register"> form action=""> span>請(qǐng)輸入你的手機(jī)號(hào)開始使用/span> br>br> input id="myphone" type="text"> input id="use" type="button" value="使用"> br>br> /form> /div> div class="calculator"> div class="counter"> span class="brand">計(jì)算器/span> br>br> input class="import" type="text" style="text-align: right;"> br>br> form class="snap" action=""> br>br> input class="order" id="one" type="button" value="1"> input class="order" id="two" type="button" value="2"> input class="order" id="three" type="button" value="3"> input class="order" id="four" type="button" value="4"> input class="order" id="five" type="button" value="5"> br>br> input class="order" id="six" type="button" value="6"> input class="order" id="seven" type="button" value="7"> input class="order" id="eight" type="button" value="8"> input class="order" id="nine" type="button" value="9"> input class="order" id="zero" type="button" value="0"> br>br> input class="operator" id="plus" type="button" value="+"> input class="operator" id="add" type="button" value="-"> input class="operator" id="mul" type="button" value="*"> input class="operator" id="sub" type="button" value="/"> input class="" id="equal" type="button" value="="> br>br> input class="order" type="button" value="."> input id="backspace" type="button" value="←"> input id="clear" type="button" value="c"> input type="button" value="CE"> input type="button" value="MC"> /form> /div> div class="result"> div> span>當(dāng)前結(jié)果:/span>span id="current_results">/span> /div> br>br> span>歷史記錄:/span> ul id="cal_result" style="list-style-type: none"> li>span>刪除/span>/li> /ul> /div> /div> /body> script type="text/javascript" src="public/js/index.js"> /script> /html>
CSS樣式 文件名 index.css
.login{/*登錄*/ height: 30px; width: 100px; background-color: #00a2d4; text-align: center; cursor: pointer; padding-top: 10px; position: fixed; } .register{ display: none; position: fixed; } .calculator{ display: none; position: fixed; } .counter{ border: 1px solid black; height: 400px; width: 320px; float: left; } .import{ height: 20px; width: 180px; margin-top: 50px; margin-left: 50px; } .snap{ margin-left: 50px; margin-top: -30px; } .snap input{ height: 30px; width: 30px; } .result{ border: 1px solid black; height: 400px; width: 320px; float: left; margin-left: 50px; } .brand{ position: relative; top: 50px; left: 90px; }
JS部分 文件名 index.js
//計(jì)算屏幕寬高 var w_width = $(window).width(); var w_height = $(window).height(); var operator = 0;//運(yùn)算符號(hào) var change = 0;//屬于運(yùn)算符后需要清空上一數(shù)值 var num1 = 0;//元算的第一個(gè)數(shù)據(jù) var num2 = 0;//運(yùn)算的第二個(gè)數(shù)據(jù) var sum = 0;//運(yùn)算結(jié)果 //居中 function setCenter(obj){ var this_width = $(obj).width(); var this_height = $(obj).height(); var this_left = parseInt((w_width-this_width)/2); var this_height = parseInt((w_height-this_height)/2); $(obj).css({left:this_left,top:this_height}); } //正則 function testReg() { //定義參數(shù) var regType = arguments[0]?arguments[0]:'phone'; var myString = arguments[1]?arguments[1]:false; var regArray = new Array(); regArray['phone'] = /^1[3|4|5|7|8]\d{9}$/; regArray['email'] = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;//郵箱 *代表{0,} +代表{1,} ?代表{0,1} //判斷 if (myString){ return regArray[regType].test(myString); } return false; } //發(fā)送數(shù)據(jù)到后臺(tái) function sendMessage() { //手機(jī)號(hào) var myphone = $("#myphone").val(); //計(jì)算器 var myUrl = '/app/base.php'; var myData = {num1:num1,num2:num2,cal_option:operator,cal_result:sum,myphone:myphone,type:'add'}; $.post(myUrl,myData,function (msg) { //TODO },'json') getResultByPhone(); } //獲取結(jié)果 function getResultByPhone() { var myphone = $("#myphone").val(); var myUrl = '/app/base.php'; var myData = {myphone:myphone,type:'getResult'}; $.post(myUrl,myData,function (msg) { //TODO $("#cal_result").html(msg); },'text') } //獲取數(shù)據(jù) function deleteHistory(id) { var myUrl = '/app/base.php'; var MyData = {id:id,type:'delete'}; $.post(myUrl,MyData,function (msg) { //TODO },'json') getResultByPhone(); } $(function () { //登錄居中 setCenter($(".login").show(8000)); //點(diǎn)擊登錄顯示輸入 $(".login").click(function(){ setCenter($(".register").show()); $(this).hide(); }); //點(diǎn)擊使用顯示計(jì)算器 $("#use").click(function () { if (testReg('phone',$("#myphone").val())){ setCenter($(".calculator").show()); $(".register").hide(); getResultByPhone() }else { alert ("你輸?shù)氖謾C(jī)格式不對(duì)"); return false; } }) $(".order").click(function () {//點(diǎn)擊數(shù)字 var num = $(this).val(); var oldValue = $(".import").val(); if (change ==1){ oldValue = "0"; change = 0; } var newValue = ""; if (num == -1){ oldValue = parseFloat(oldValue); newValue = oldValue * -1; }else if (num == "."){ if (oldValue.indexOf('.') == -1) newValue = oldValue + "."; else newValue = oldValue; }else { if (oldValue == 0 oldValue.lastIndexOf('.') == -1){ newValue = num; }else { newValue = oldValue + num; } } $(".import").val(newValue); }); $("#clear").click(function () {//清除 $(".import").val("0"); operator = 0; change = 0; num1 = 0; num2 = 0; }); $("#backspace").click(function () {//退格 if (change ==1){ operator = 0; change = 0; } var value = $(".import").val(); if (value.length == 1){ $(".import").val("0"); }else { value = value.substr(0,value.length - 1); $(".import").val(value); } }); $(".operator").click(function() {//點(diǎn)擊運(yùn)算符號(hào)觸發(fā)事件 change = 1; operator = $(this).val(); var value = $(".import").val(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num1 = parseFloat(value); }); $("#equal").click(function () {//點(diǎn)擊等號(hào) var value = $(".import").val(); var dianIndex = value.indexOf("."); if (dianIndex == value.length){ value = value.substr(0,value.length - 1); } var equal = $(this).val(); num2 = parseFloat(value); if (operator == "+"){ sum = num1 + num2; }else if (operator == "-"){ sum = num1 - num2; }else if (operator == "*"){ sum = num1 * num2; }else if (operator == "/"){ sum = num1 / num2; }else if (operator == "" || num1 ==0 || num2 == 0){ sum = num1 +num2; } var re = /^[0-9]+.?[0-9]*$/; if (re.test(sum)){ sum = sum.toFixed(2); } $(".import").val(sum); sendMessage(); $("#current_results").text(num1 + operator + num2 + equal + sum); change = 1; operator = 0; num1 = 0; num2 = 0; }); })
接口 文件名 IDB.php
?php namespace mao; interface IDB{ public function insert($data); public function update($data); public function select($data); public function del($data); }
創(chuàng)建一個(gè)Mysqli類繼承接口實(shí)現(xiàn)增刪改查
文件名 MySqli.clsaa.php
?php namespace mao; include "IDB.php"; class MySqli implements IDB{ private $conn = null; private $table = null; private $sysConfig = array( 'host' => '', 'user' => '', 'pwd' => '', 'db' => '' ); private static $_instance = null; private function __construct($config){ if(is_array($config)){ $this->sysConfig = array_merge($this->sysConfig,$config); $this->conn = new \Mysqli($this->sysConfig['host'],$this->sysConfig['user'],$this->sysConfig['pwd'],$this->sysConfig['db']); if (!$this->conn){ echo "連接失敗".mysqli_error(); } } } public static function getInstance($config){ if (is_null(self::$_instance)){ self::$_instance = new self($config); } return self::$_instance; } //設(shè)計(jì)表 public function table($table){ $this->table = $table; return $this; } //查詢 private function changeCondition($condition){ $where_array = array(); foreach($condition as $k => $v){ if(is_array($v)){ if(strtolower($v[0])=='like'){ $where_array[] = $k.' '.$v[0].' \'%'.$v[1].'%''; }else{ $where_array[] = $k.' '.$v[0].' \''.$v[1].'''; } } if(is_string($v)){ $where_array[] = $k.' = \''.$v.'''; } } $where = implode(' AND ',$where_array); return $where?$where:1; } public function select($condition){ $where = $this->changeCondition($condition); $sql = "select * from $this->table where ".$where."order by id desc limit 10"; $res = $this->conn->query($sql); $ret = array(); while ($row = $res->fetch_assoc()){ $ret[] = $row; } return $ret; } public function insert($data){ $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' )"; $this->conn->query($sql); } public function update($id){ $sql = "UPDATE `{$this->table}` SET `status` = '-1' WHERE `id` ={$id}"; $this->conn->query($sql); } public function del($condition){ } }
配置項(xiàng) 文件名 config.php
?php return [ 'db'=>[ 'host' => '127.0.0.1', 'user' => 'root', 'pwd' => 'root', 'db' => 'cal' ], 'author' =>[ 'adminuser' => 'mao', ] ];
操作計(jì)算器 文件名 base.php
?php namespace mao; define("ROOT_PATH",dirname(dirname(__FILE__))); $config = include ROOT_PATH."/lib/config/config.php"; include ROOT_PATH."/lib/db/MySqli.class.php"; $db = MySqli::getInstance($config['db']); if ($_POST){ //查詢 if ($_POST['type'] == 'getResult'){ $condition = array( 'user_phone' =>array('like',$_POST['myphone']), 'status'=> '1' ); $result = $db->table('calculate')->select($condition); $result_string = ''; foreach ($result as $k => $v){ $result_string .= "li>span class='mydelte' onclick='deleteHistory({$v['id']})'>刪除/span>{$v['num1']} {$v['option']} {$v['num2']} = {$v['result']} /li>"; } echo $result_string; } //刪除 if ($_POST['type'] == 'delete'){ $id = isset($_POST['id'])?$_POST['id']:''; $db->table('calculate')->update($id); } if ($_POST['type'] == 'add'){ $data = $_POST; $db->table('calculate')->insert($data); } }
目錄結(jié)構(gòu)
sql語(yǔ)句
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- 資料庫(kù): `cal` -- -- -------------------------------------------------------- -- -- 表的結(jié)構(gòu) `calculate` -- CREATE TABLE IF NOT EXISTS `calculate` ( `id` int(10) NOT NULL AUTO_INCREMENT COMMENT '序號(hào) 主鍵 自增', `user_phone` varchar(100) NOT NULL COMMENT '用戶手機(jī)號(hào)', `num1` varchar(100) NOT NULL COMMENT '第一個(gè)數(shù)字', `num2` varchar(100) NOT NULL COMMENT '第二個(gè)數(shù)字', `option` varchar(10) NOT NULL COMMENT '加減乘除選項(xiàng)', `result` varchar(100) NOT NULL COMMENT '結(jié)果', `status` int(10) NOT NULL COMMENT '狀態(tài)-1 刪除 0 禁用 1 正常', `admin_user` varchar(100) NOT NULL COMMENT '管理員', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='計(jì)算表' AUTO_INCREMENT=40 ; -- -- 轉(zhuǎn)存資料表中的資料 `calculate` -- INSERT INTO `calculate` (`id`, `user_phone`, `num1`, `num2`, `option`, `result`, `status`, `admin_user`) VALUES (1, '15727228076', '', '', '', '', 0, ''), (2, '15727228076', '7', '6', '+', '13', -1, 'jingshan'), (3, '13880425377', '9', '6', '+', '15', -1, 'jingshan'), (4, '13880425377', '8', '7', '+', '15', -1, 'jingshan'), (5, '13880425377', '8', '9', '*', '72', -1, 'jingshan'), (6, '13880425377', '6', '7', '+', '13', 1, 'jingshan'), (7, '13880425377', '89', '7', '+', '96', -1, 'jingshan'), (8, '13880425377', '67', '8', '+', '75', 1, 'jingshan'), (9, '13880425377', '2', '7', '+', '9', 1, 'jingshan'), (10, '13880425377', '78', '7', '+', '85', 1, 'jingshan'), (11, '13880425377', '12', '9', '*', '108', 1, 'jingshan'), (12, '13880425377', '23', '7', '-', '16', 1, 'jingshan'), (13, '13880425377', '67', '2', '-', '65', 1, 'jingshan'), (14, '13880425377', '34', '7', '+', '41', 1, 'jingshan'), (15, '13880425377', '78', '8', '/', '9.75', 1, 'jingshan'), (16, '13880425377', '72', '9', '+', '81', 1, 'jingshan'), (17, '13880425377', '78', '9', '+', '0', 1, 'mao'), (18, '13880425377', '67', '9', '+', '0', 1, 'mao'), (19, '13880425377', '78', '9', '+', '0', 1, 'mao'), (20, '13880425377', '78', '9', '+', '0', 1, 'mao'), (21, '13880425377', '67', '8', '+', '0', 1, 'mao'), (22, '13880425377', '62', '8', '+', '0', 1, 'mao'), (23, '13880425377', '12', '9', '*', '0', 1, 'mao'), (24, '13880425377', '12', '9', '+', '0', 1, 'mao'), (25, '13880425377', '7', '8', '-', '0', 1, 'mao'), (26, '13880425377', '2', '4', '+', '0', 1, 'mao'), (27, '13880425377', '8', '9', '*', '0', 1, 'mao'), (28, '13880425377', '8', '9', '+', '0', 1, 'mao'), (29, '13880425377', '12', '9', '*', '108.00', 1, 'mao'), (30, '13880425377', '7', '8', '+', '15.00', 1, 'mao'), (31, '13880425377', '1', '9', '*', '9.00', 1, 'mao'), (32, '13880425377', '29', '7', '*', '203.00', 1, 'mao'), (33, '13880425377', '95', '8', '/', '11.88', 1, 'mao'), (34, '13880425377', '67', '98', '*', '6566.00', 1, 'mao'), (35, '13880425377', '22', '9', '-', '13.00', 1, 'mao'), (36, '13880425377', '45', '9', '/', '5.00', 1, 'mao'), (37, '13880425377', '555', '777', '+', '1332.00', 1, 'mao'), (38, '13880425377', '89', '0', '-', '89.00', 1, 'mao'), (39, '13880425377', '0', '89', '0', '89.00', 1, 'mao'); /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; ---------------------
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
標(biāo)簽:呼倫貝爾 安康 金華 溫州 紹興 萊蕪 綏化 清遠(yuǎn)
巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《thinkPHP框架實(shí)現(xiàn)的簡(jiǎn)單計(jì)算器示例》,本文關(guān)鍵詞 thinkPHP,框架,實(shí)現(xiàn),的,簡(jiǎn)單,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。