js实现加减乘除的小程序

<!DOCTYPE html>
<html>
 <head>
  <title> 事件</title>
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var x=parseInt(document.getElementById("txt1").value);
    //获取第二个输入框的值
    var y=parseInt(document.getElementById("txt2").value);
    //获取选择框的值
    var myselect=document.getElementById("select");
    var index=myselect.selectedIndex;
    var selectedvalue=myselect.options[index].value;

    var result=0;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则

    switch(selectedvalue){
        case "+":
            result=x+y;
            break;
        case "-":
            result= x-y;
            break;
        case "*":
            result= x*y;
            break;
        case "/":
            result= x/y;
    }
    //设置结果输入框的值
    document.getElementById("fruit").value = result ;
   }
  </script>
 </head>
 <body>
   <input type=‘text‘ id=‘txt1‘ />
   <select id=‘select‘>
        <option value=‘+‘>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
   </select>
   <input type=‘text‘ id=‘txt2‘ />
   <input type=‘button‘ value=‘ = ‘ onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果-->
   <input type=‘text‘ id=‘fruit‘ />
 </body>
</html>
时间: 2024-10-14 05:06:48

js实现加减乘除的小程序的相关文章

纯正商业级应用-Node.js Koa2开发微信小程序服务端

第1章 前言.导学与node.js如何理解Node.js?前端到底要不要学习Node.js?本课程能让你学到什么? 第2章 Koa2的那点事儿与异步编程模型Koa非常的精简,基本上,没有经过二次开发的Koa根本“不能”用.本章我们讲解Koa的重要特性,理解什么是洋葱模型?以及在KOA中如何进行异步编程?很多同学都了解以上知识点,但听完本章,你会有一些不一样的理解,比如:为什么要有洋葱模型?没有会怎样?Koa中间件一定是异步的吗? ... 第3章 路由系统的改造Koa-router需要进行一些改造

微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 1 "use strict"; 2 Object.defineProperty(exports, "__esModule", { 3 value: true 4 }); 5 const http = require('./utils/http.js'); 6 const api = require('./config.js'); 7

前端面试题总结(js、html、小程序、React、ES6、Vue、算法、全栈热门视频资源)持续更新 &#362414;

原文: http://blog.gqylpy.com/gqy/438 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

JS格式化时间(支持小程序,兼容IOS)

const REGEX = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/export const formatTime = (val, format)=>{ if (val) { /** * @instructions 如果不是时间戳格式,且含有字符 '-' 则将 '-' 替换成 '/' && 删除小数点及后面的数字 * @reason 将 '-' 替换成 '/' && 删除小数点及后面的数字 的原因是safari

微信小程序app配置指南

//app.json页面 { //页面注册,有几个页面都要在pages里面注册 "pages":[ "pages/index/index", "pages/logs/logs", "pages/main/main", "pages/main1/main1", "pages/main2/main2", "pages/main3/main3", ], //上导航配置及ap

微信小程序开发个人笔记

1,配置文件.json 小程序的全局配置app.json和页面配置page.json每单页页面也有相应的.json文件,设置每个页面中.json配置,会覆盖与app.json相同的配置项.如下:是一个包含了所有配置选项的简单配置app.json "pages": [//设置页面的路径 "pages/index/index", //不需要写index.wxml,index.js,index,wxss,框架会自动寻找并整合 "pages/logs/logs&q

小程序实现原理解析

概述 作为一名前端开发,如果你还停留在应用开发层面,那你就OUT了,快来跟我一起探讨下小程序框架本身底层实现的一些技术细节吧,让我们从小程序的运行机制来深度了解小程序. 小程序是基于WEB规范,采用HTML,CSS和JS等搭建的一套框架,微信官方给它们取了一个很牛逼的名字:WXML,WXSS,但本质上还是在整个WEB体系之下构建的. WXML,个人猜测在取这个名字的是微信的Xml,说到底就是xml的一个子集.WXML采用微信自定义的少量标签WXSS,大家可以理解为就是自定义的CSS.实现逻辑部分

wx小程序初体验

小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=201716 接下来,我们要实现的小程序效果如下,源码地址:https://github.com/caiya/weapp-ywgo: 1.注册 打开微信公众平台,单击"小程序",按步骤开始注册即可,附地址:https://mp.weixin.qq.com/cgi-bin/

微信小程序开发思路

小程序还没有完全开放,不能真实体验,但通过文档和开发工具,可以了解到他的开发思路 下面就介绍下小程序的开发方式,希望能帮助有兴趣的朋友对整体思路有个快速了解 整体结构 默认示例项目的目录结构 从后缀名上可以看到,一共有4种类型: js 逻辑代码wxml 视图文件wxss 样式文件json 配置信息/app.js 中可以定义小程序在启动时做哪些业务逻辑.全局函数.全局数据-- App({ onLaunch: function () { ... }, getUserInfo:function(cb)