一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>javascript 运算符</title>
  7. </head>
  8.  
  9. <body>
  10.     <!--javascriptyu运算符-->
  11.     <p>惦记按钮计算</p>
  12.     <button onclick="myFunction0()">点击这里</button>
  13.     <p id="demo0"></p>
  14.     <script>
  15.     function myFunction0() {
  16.         y = 5;
  17.         z = 2;
  18.         x = y + z;
  19.         document.getElementById("demo0").innerHTML = x;
  20.     }
  21.     </script>
  22.     <!--用于字符串的+运算符-->
  23.     <p>点击按钮创建及增加字符串变量</p>
  24.     <button onclick="myFunction()">点击这里</button>
  25.     <p id="demo"></p>
  26.     <script>
  27.     function myFunction() {
  28.         txt1 = "What a very";
  29.         txt2 = "nice day";
  30.         txt3 = txt1 + txt2;
  31.         document.getElementById("demo").innerHTML = txt3;
  32.     }
  33.     </script>
  34.     <!--在字符串中增加空格-->
  35.     <p>点击按钮创建及增加字符串变量。</p>
  36.     <button onclick="myFunction1()">点击这里</button>
  37.     <p id="demo1"></p>
  38.     <script>
  39.     function myFunction1() {
  40.         txt1 = "What a very ";
  41.         txt2 = "nice day";
  42.         txt3 = txt1 + txt2;
  43.         document.getElementById("demo1").innerHTML = txt3;
  44.     }
  45.     </script>
  46.     <p>点击按钮创建及增加字符串变量</p>
  47.     <button onclick="myFunction2()">点击这里</button>
  48.     <p id="demo2"></p>
  49.     <script>
  50.     function myFunction2() {
  51.         txt1 = "what a very";
  52.         txt2 = "nice day";
  53.         txt3 = txt1 + " " + txt2;
  54.         document.getElementById("demo2").innerHTML = txt3;
  55.     }
  56.     </script>
  57.     <!--对字符串和数字进行加法运算-->
  58.     <P>点击按钮创建及增加字符串变量</p>
  59.     <button onclick="myFunction()">点击这里</button>
  60.     <p id="demo3"></p>
  61.     <script>
  62.     function myFunction() {
  63.         var x = 5 + 5;
  64.         var y = "5" + 5;
  65.         var z = "hello" + 5;
  66.  
  67.         var demoP = document.getElementById("demo");
  68.         demoP.innerHTML = x + "<br>" + y + "<br>" + z;
  69.     }
  70.     </script>
  71. </body>
  72.  
  73. </html>

参考资料：《菜鸟教程》

【代码笔记】Web-JavaScript-JavaScript 运算符的更多相关文章

  1. WEB前端--JavaScript

    JavaScript JavaScript基础 一.JavaScript简介 JavaScript是一种嵌入到HTML文件中的描述性语言,由浏览器的解释器将其动态地处理成可执行的代码,能独立地完成与客 ...

  2. JavaScript instanceof 运算符深入剖析

    简介: 随着 web 的发展,越来越多的产品功能都放在前端进行实现,增强用户体验.而前端开发的主要语言则是 JavaScript.学好 JavaScript 对开发前端应用已经越来越重要.在开发复杂产 ...

  3. JavaScript instanceof 运算符深入剖析【转载】

    http://www.ibm.com/developerworks/cn/web/1306_jiangjj_jsinstanceof/   instanceof 运算符简介 在 JavaScript ...

  4. Web Worker javascript多线程编程（一）

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  5. Web Worker javascript多线程编程（二）

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  6. javascript算术运算符详解

    算术运算符 +.-.*./.%.++.-- ++.--分为前缀形式和后缀形式 前缀形式先加减1在执行 后缀形式先执行再加减1 注意 +号用来连接两个字符串 只要+连接的操作数中有一个是字符串型,JS就 ...

  7. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  8. WEB 技术分类 Javascript DOM(Element Node) BOM

    Web technology for developers   Web 技术文档 备注:本文介绍web technology的分类,各自职责,因为之前一直就没有搞明白各种技术.各种名词究竟是属于哪个范 ...

  9. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  10. JavaScript instanceof 运算符

    instanceof运算符简介 在 JavaScript 中 判断一个变量的类型常常会用 typeof 运算符 判断一个实例是否属于某种类型会使用instanceof 与 typeof 方法不同的是, ...

随机推荐

  1. 微信小程序wx.request接口

    微信小程序wx.request接口 wx.request是小程序客户端与服务器端交互的接口 HTTPS 请求 一个微信小程序,只能同时(同时不能大于5个)有5个网络请求 wx.request(OBJE ...

  2. 安装MySQL时候最后一步报无法定位程序输入点fesetround于动态链接库MSVCR120.dll

    今天在装MySQL时到最后一步出现了一个问题[报无法定位程序输入点fesetround于动态链接库MSVCR120.dll]这是由什么原因引起的呢,其实是缺少一个vcredist_x64.exe插件 ...

  3. Vue 中是如何解析 template 字符串为 VNode 的?

    在接触 React 时候,我只了解到通过 babel 可以把 JSX 转成 VNode(通过调用 React.createElement 方法),但是对其具体是如何转换的却不了解. 很明显,回答失败. ...

  4. sql server 索引阐述系列八 统计信息

    一.概述 sql server在快速查询值时只有索引还不够,还需要知道操作要处理的数据量有多少,从而估算出复杂度,选择一个代价小的执行计划,这样sql server就知道了数据的分布情况.索引的统计值 ...

  5. Spring Aop分析

    前言 上文讲述ioc框架的实现,本文开始讲述aop.在spring中aop也有3种配置方式,注解形式的我们先不讨论.我们先看看xml形式的配置方式. <aop:config> <ao ...

  6. 基于saltstack自动化部署高可用kubernetes集群

    SaltStack自动化部署HA-Kubernetes 本项目在GitHub上,会不定期更新,大家也可以提交ISSUE,地址为:https://github.com/skymyyang/salt-k8 ...

  7. tensorflow 1.12.0 gpu + python3.6.8 + win10 + GTX1060 + cuda9.0 + cudnn7.4 + vs2017）

    在安装tensorflow-gpu时,也看过不少的博客,讲得乱七八糟的,也不能这样说,只是每个人安装的环境或需求不一样,因此没有找到一个适合自己的教程去安装tensorflow-gpu版本.当然,入手 ...

  8. vmware vcsa-6.5 网络架构之虚拟机的分布式交换机

    一.配置VDS 必须来用vcenter server来配置 下面一些理论是抄的王老师的,供大家学习,主意在于学习技术,分享知识. 1.VDS架构图如下: 2.架构图里面有两个逻辑层,数据面板,管理面板 ...

  9. 脚本解决.NET MVC按钮重复提交问题

    见于:Avoiding Duplicate form submission in Asp.net MVC by clicking submit twice 脚本代码: $(document).on(' ...

  10. 第一册：lesson forty nine。

    原文: At the butcher's A:Do you want any meat today,Mrs.B? B:Yes,please. A:Do you want beef or lamb? B ...