html计算器_(MVC)带数据储存的计算器

最新推荐文章于 2022-11-03 21:30:25 发布
最新推荐文章于 2022-11-03 21:30:25 发布
阅读量142 收藏
点赞数
文章标签： html计算器

带数据储存的计算器

HTML 
<！DOCTYPE html>
<html lang =“ zh_CN”>

<head>
  <meta charset =“ UTF-8”>
  <meta name =“ viewport”
    content =“ width = device-width，initial-scale = 1，minimum-scale = 1，maximum-scale = 1，user-scaleable = no，viewport-fit = cover”>
  <meta http-equiv =“ X-UA-Compatible” content =“ ie = edge”>
  <title> MVC演示</ title>
</ head>

<body>
  <div class =“ page”>

    <section id =“ app1”>      //section标签

      <div class =“ output”>   //输出值
        <span id =“ number”> 100 </ span>
      </ div>

      <div class =“ actions”>
        <button id =“ add1”> + 1 </ button>
        <button id =“ minus1”>-1 </ button>
        <button id =“ mul2”> * 2 </ button>
        <button id =“ divide2”>÷2 </ button>
      </ div>

    </ section>

  </ div>
  <script src =“ main.js”> </ script> //引入main.js
</ body>

</ html>
CSS 
#app1 {
  width: 50vw;
  height: 50vh;
}
#app1 .output {
}
#app1 .actions {
}
reset.css(重置CSS) 
* {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
JS 
import "./app1.css";     //JS自己调用CSS
import $ from "jquery";  //JS自己调用jquery

const $button1 = $("#add1");
const $button2 = $("#minus1");
const $button3 = $("#mul2");
const $button4 = $("#divide2");
const $number = $("#number");
const n = localStorage.getItem("n");//获取本地存储的值
$number.text(n || 100);            //把n写入

$button1.on("click", () => { 
  let n = parseInt($number.text());//获取n（把字符串解析为整数）
  n += 1;
  localStorage.setItem("n", n);    //修改本地储存的值
  $number.text(n);                 //修改html中的值
});
$button2.on("click", () => {
  let n = parseInt($number.text());
  n -= 1;
  localStorage.setItem("n", n);
  $number.text(n);
});
$button3.on("click", () => {
  let n = parseInt($number.text());
  n *= 2;
  localStorage.setItem("n", n);
  $number.text(n);
});
$button4.on("click", () => {
  let n = parseInt($number.text());
  n /= 2;
  localStorage.setItem("n", n);
  $number.text(n);
});
gloal.css 
body{
  overflow: hidden;
}
body > .page{
  display: flex;
  flex-wrap: wrap;
}
body > .page > section{
  width: 50vw;
  height: 50vh;
  border: 1px solid grey;
}
main.js（外部引入） 
import "./reset.css";  
import "./global.css";

import "./app1.js";
import "./app2.js";
import "./app3.js";
import "./app4.js";

优化MVC

带数据储存的计算器

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MVC Demo</title>
</head>

<body>
  <div class="page">
    <section id="app1"></section>
    <section id="app2"></section>
  </div>
  <script src="main.js"></script>
</body>

</html>
CSS 
#app1 {
  width: 50vw;
  height: 50vh;
}
#app1 .output {
}
#app1 .actions {
}
reset.css(重置CSS) 
* {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
JS 
import './app1.css'
import $ from 'jquery'

const eventBus = $(window)
// 数据相关都放到m
const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))  //获取data（n）本地储存（字符串变成整数）
  },
  create() {},   //增
  delete() {},   //删
  update(data) { //改
    Object.assign(m.data, data)          //替换data
    eventBus.trigger('m:updated')        //触发eventBus事件
    localStorage.setItem('n', m.data.n)  //替换本地储存数据data
  },
  get() {}       //查
}
// 视图相关都放到v
const v = {
  el: null,
  html: `
  <div>
    <div class="output">
      <span id="number">{{n}}</span>
    </div>
    <div class="actions">
      <button id="add1">+1</button>
      <button id="minus1">-1</button>
      <button id="mul2">*2</button>
      <button id="divide2">÷2</button>
    </div>
  </div>
`,
  init(container) {      //初始化
    v.el = $(container)  //获取传入的参数（容器container）并声明v.el
  },
  render(n) {            //渲染
    if (v.el.children.length !== 0) v.el.empty()
    $(v.html.replace('{{n}}', n))  //把html中占位符替换
      .appendTo(v.el)              //再写入html
  }
}
// 其他都c
const c = {
  init(container) {
    v.init(container)
    v.render(m.data.n)      // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      console.log('here')
      v.render(m.data.n)
    })
  },
  events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },
  autoBindEvents() {
    for (let key in c.events) {
      const value = c[c.events[key]]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      v.el.on(part1, part2, value)
    }
  }
}

export default c  //传出c

注意：bottom初始化比rander早会导致页面失效.

采取的方式用initial(){}函数 
init(){
        c.ui={
            button1 : $('#add1'),
            button2 : $('#sub1'),
            button3 : $('#mul2'),
            button4 : $('#div2'),
            number : $('#number')
        }
        c.bindEvents()
    },
gloal.css 
body{
  overflow: hidden;
}
body > .page{
  display: flex;
  flex-wrap: wrap;
}
body > .page > section{
  width: 50vw;
  height: 50vh;
  border: 1px solid grey;
}
main.js（外部引入） 
import './reset.css'
import './global.css'

import x from './app1.js'  //x === c
import y from './app2.js'
import './app3.js'
import './app4.js'

x.init('#app1')            //x.init('#app1') === c.init('#app1')，传入到app2.js
y.init('#app2')

（大师级）优化MVC

带数据储存的计算器

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>MVC Demo</title>
</head>

<body>
  <div class="page">
    <section id="app1"></section>
    <section id="app2"></section>
  </div>
  <script src="main.js"></script>
</body>

</html>
CSS 
#app1 {
  width: 50vw;
  height: 50vh;
}
#app1 .output {
}
#app1 .actions {
}
reset.css(重置CSS) 
* {
  margin: 0;
  padding: 0;
}
* {
  box-sizing: border-box;
}
*::before,
*::after {
  box-sizing: border-box;
}
ol,
ul {
  list-style: none;
}
JS 
import './app1.css'
import Vue from 'vue'

const init = (el) => {

  const m = {
    get() {
      return parseFloat(localStorage.getItem('n'))
    },
    set(n) {
      localStorage.setItem('n', n)
    }
  }
  new Vue({
    el: el,
    data: {n: m.get()},
    methods: {
      add() {
        this.n += 1
      },
      minus() {
        this.n -= 1
      },
      mul() {
        this.n *= 2
      },
      div() {
        this.n /= 2
      },
    },
    watch: {
      n: function () {
        m.set(this.n)
      },
    },
    template: `
      <section>
        <div class="output">
          <span id="number">{{n}}</span>
        </div>
        <div class="actions">
          <button @click="add">+1</button>
          <button @click="minus">-1</button>
          <button @click="mul">*2</button>
          <button @click="div">÷2</button>
        </div>
      </section>
    `
  })
}

export default init

思考

  • data: {}是什么？
  • methods: {}是什么？
  • {{n}}是什么？
  • @click是什么？
  • 为什么可以导出export default init？

注意：this.n中的n并不是函数！当n变化的时候执行一个函数！

ee770cad6952390628511a6bbb356c45.png
gloal.css 
body{
  overflow: hidden;
}
body > .page{
  display: flex;
  flex-wrap: wrap;
}
body > .page > section{
  width: 50vw;
  height: 50vh;
  border: 1px solid grey;
}
main.js（外部引入） 
import './reset.css'
import './global.css'

import x from './app1.js'  //x === c
import y from './app2.js'
import './app3.js'
import './app4.js'

x.init('#app1')           
y.init('#app2')

Base(完成了EventBus的继承)

EventBus.js 
import $ from 'jquery'

class EventBus {
  constructor() {
    this._eventBus = $(window)
  }

  on(eventName, fn) {
    return this._eventBus.on(eventName, fn)
  }

  trigger(eventName, data) {
    return this._eventBus.trigger(eventName, data)
  }

  off(eventName, fn) {
    return this._eventBus.off(eventName, fn)
  }
}

export default EventBus
Model.js

用自身的函数覆盖原型链上函数

import EventBus from './EventBus'

//简化版的函数
class Model extends EventBus {
//处于对象的自身上
  constructor(options) {
    super()
    const keys = ['data', 'update', 'create', 'delete', 'get']
    keys.forEach((key) => {
      if (key in options) {
        this[key] = options[key]
      }
    })
  }

   /*未简化的代码
      this.data = options.data
      this.update = options.data
      this.create = options.create
      this.delete = options.delete
      this.get = options.get
      */

//下面的函数是处于原型链中
  create() {
    console && console.error && console.error('你还没有实现 create')
  }

  delete() {
    console && console.error && console.error('你还没有实现 delete')
  }

  update() {
    console && console.error && console.error('你还没有实现 update')
  }

  get() {
    console && console.error && console.error('你还没有实现 get')
  }
}

export default Model
View.js 
import $ from 'jquery'
import EventBus from './EventBus'

class View extends EventBus{
  // constructor({el, html, render, data, eventBus, events}) {
  constructor(options) {
    super() // EventBus#constructor()
    Object.assign(this, options)
    this.el = $(this.el)
    this.render(this.data)
    this.autoBindEvents()
    this.on('m:updated', () => {
      this.render(this.data)
    })
  }

  autoBindEvents() {
    for (let key in this.events) {
      const value = this[this.events[key]]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      this.el.on(part1, part2, value)
    }
  }
}

export default View

b5e88c40cca4b545788558d6f8ab83a8.png

8b0963268d9c4dff4e97f6feae5d89b1.png

f2072a8bea6c59ea344e055bbc8dccdd.png
weixin_39775106
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python 爬取网页内容并保存到数据库_python爬取数据并保存到数据库中（第一次练手完整代码）...
weixin_42405705的博客
01-12 1016
2. 创建conndb py,包括数据库连接断开,添加、删除、修改、和其他操作:# !\/usr\/bin\/env python # - * -编码:utf - 8 - *进口pymysqldef conn_db(): #连接到数据库函数康涅狄格州=(主机=\u201Clocalhost\u201D,用户=数据库用户名,密码=数据库密码,db =数据库名称,charset = use utf8)...
第二次作业——前后端交互计算器
最新发布
m0_62370131的博客
10-17 79
学习和探索： 在实现过程中，我学习了如何使用HTML和CSS来布局和样式化页面，了解并实践了JavaScript在浏览器中的应用，如操作DOM，事件处理等。处理表达式： 代码替换了 “Math.sin”, “Math.cos”, “Math.tan”, 和 “Math.log” 为 Python 的 math 模块对应的函数，以便可以正确计算。通过这个项目，我不仅实践了前后端开发的知识，也学到了很多项目管理和问题解决的方法，是一次非常宝贵的经验。一个简单的数据库模型被创建，用于存储计算表达式和它们的结果。
网页计算器
iteye_8011的博客
09-09 135
网页计算器 var initData="";//初始数据 var lastop="";//定义最后一个操作符 var num2=0;//第二个计算数 var num1=0;//第一个计算数 function getNum(num){ initData+=num; showData(initData); } //在文本框中显示输入数据 func...
webmagic结果保存到mysql_webmagic自定义存储（mysql、redis存储）
weixin_29182481的博客
02-03 467
在很多时候，我们使用webmagic爬取网站的时候，爬取的数据希望存储在mysql、redis中。因此需要对其扩展，实行自定义PipeLine。首先我们了解一下webmagic 的四个基本组件一、 WebMagic的四个组件1、DownloaderDownloader负责从互联网上下载页面，以便后续处理。WebMagic默认使用了HttpClient作为下载工具。2、PageProcessorPa...
使用java获得网页数据并保存到mysql数据库(oracle大致同理)
F_xiao_chou的博客
09-05 2441
这个大多数会运用在跨境物流上,还有银行项目(温馨提示:只有公开的数据源才可以安全的使用--切勿自误)比如说是获取海关信息,获取汇率信息 ......等等。
calculate.zip_Qt 表达式计算_qt 计算器_qt计算器_计算器_计算器 qt
09-21
Qt提供了QVariant类型，它可以存储多种数据类型，包括整数、浮点数和复数，方便进行数学运算。我们还需要处理运算符优先级和括号，这可能需要递归下降解析器或者栈来实现。 5. **结果显示**: 计算完成后，结果应该...
JiSuanQi_计算器QT_Qt简单计算器_ablem2u_
10-01
本项目名为“JiSuanQi_计算器QT_Qt简单计算器_ablem2u_”，是一个基于Qt5.9.1框架开发的简易计算器应用。Qt是一个跨平台的C++图形用户界面应用程序开发框架，广泛应用于桌面、移动和嵌入式设备。这个项目的目标是...
caculator_java_java编程_计算器_
10-04
在设计过程中，遵循了MVC（Model-View-Controller）架构模式，分离了数据模型、用户界面和控制逻辑。 在代码实现中，可能会使用ActionListener接口来响应用户点击按钮的事件，通过重写actionPerformed()方法来执行...
mvc模式jsp计算器
05-30
**MVC模式与JSP计算器应用** 在Web开发领域，MVC（Model-View-Controller）模式是一种常用的设计模式，它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。MVC模式的主要目标是...
MVC_Calculator:使用Java MVC的计算器
05-17
在Java MVC计算器中，视图可能由HTML页面或者Swing、JavaFX等图形用户界面组件构成。视图负责展示模型中的数据，并在用户与界面交互时更新显示。例如，当用户输入数字或选择运算符时，视图会根据用户输入更新显示；...
html5带计算记录功能计算器在线计算代码
10-04
html5带计算记录功能计算器在线计算代码
具有存储记忆功能的计算器app
09-05
简单计算器APP ·基于HBuilder编写 ·用到html JavaScript ·计算器具有存储记忆功能 ·需要自己打包
带有历史记录的计算器
03-19
这是一个比较完善的计算器，功能比较好的是带有历史记录。
模仿QQ邮箱项目
09-18
自己做的项目,做了好久,呵呵,不过没有抄别人的 模仿QQ, 邮箱 ,登陆 ,注册 ,jsp ,sql ,java
calculator:使用MVC模式的香草JavaScript计算器
03-13
计算器 使用Model-View-Controller（MVC）设计模式的香草JavaScript计算器。 如何运行：计算器上线后，将包含一个查看链接。 模型 描述 管理数据，该数据将是计算器将评估并计算结果的数学表达式。 执行 计算用户的中缀表达式，转换为后缀，然后计算结果。 单独使用LinkedList实现基础堆栈（LIFO）数据结构 看法 描述 使用HTML，CSS和DOM操作（事件侦听器）生成并呈现计算器的显示。 控制器 描述 连接计算器和视图，该视图将使用视图给出的用户数学表达式，并调用计算器来评估该表达式，然后处理回调以提供用户反馈。 充当模型和视图之间的链接和中介，因为根据MVC模式，这两个对象之间不应相互交互（或了解）。
计算器一位加法计算，并将实际值，测试结果输出，最终导入到本地
dianta4519的博客
06-26 178
'计算器一位加法计算，并将实际值，测试结果输出，最终导入到本地 DimiDiminputDimexpertvalue,actualvaluedatatable.ImportSheet"C:\Users\Administrator\Desktop\UFT活动讲课资料\加法运算case.xlsx","Sheet1","Action1"'wait 3systemutil.Run"C...
获取页面数据保存到数据库的方法（1）
weixin_44116816的博客
06-09 5823
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：VS与MVC js 作者：陈锦通 撰写时间：2019年6月4日星期二 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
记录用SpringMVC框架编写一个简单的加减乘除计算器
qq_52469201的博客
11-03 1933
这里问题不大，要注意的就是RequestMapping要有斜杠。这里配置欢迎页的时候出了问题，我希望他是在我设好的文件夹下的。但是配的时候找不准服务器是从什么路径开始搜索默认页。这里没什么问题就是配置了视图解析器、还有控制器罢了。用SpringMVC框架写一个计算器。配置SpringMVC.xml。经过试错之后发现是从。
html页面直接做计算,网页版计算器的实现(js实现计算功能)
weixin_35912365的博客
06-04 4115
今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下: 可以看到界面还是挺清爽的,但是功能呢?这里呢,界面上看到的这些按钮的功能都是可以用的 可以看到有括号也是可以算的.好了,接下来带大家来实现一下:首先就是布局,这个没有什么好说的,学点html和css马上就可以弄出这个界面,所以我就直接贴出代码:123*/456+-789()c0.del=* {margin: 0px;pad...
java模拟计算器_Java模拟计算器
06-08
你想要使用Java模拟计算器，可以按照以下步骤进行： 1. 创建一个Java类，命名为Calculator。 2. 在Calculator类中，定义一个main方法，用于程序的执行入口。 3. 在main方法中，创建一个Scanner对象，用于从控制台...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值