正文

javascrip基础以及一个计算器的小案例

司机刹一脚  司机刹一脚  2022-08-31  494

关键词：

1.js的概述

js是一种脚本语言
js是可插入html页面的编程代码
js插入html页面后,可由所有的浏览器执

2.js的基本语法

与java一样,变量,函数名,运算符以及其他一切东西都是区分大小写的
js是弱类型的语言,与java不同

　　　　java:int i =3;String s = "123";

　　　　js:var i = 3;var s = "123";

　　　　分号可有可无

　　　　变量名需要遵守两条简单的规则:1.第一个字符必须是字母,下划线(_)或美元符号($)

　　　　余下的字符可以是下划线,美元符号或任何字母或数字字符

3.js的数据类型

　　*原始类型

　　　　undefined:未定义类型

　　　　boolean:布尔类型

　　　　number:数字类型

　　　　string:字符或字符串

　　　　null:空

　　*引用类型

　　　　对象类型,对象类型默认值是null

4.js的运算符

　　js中的运算符与java中基本一致

　　js中有一个===全等于,全等于是类型和数值都一致的情况才为true

5.js的引入方式

　　*页面内直接编写js代码,js代码需要使用<script>标签

　　*将js的代码编写到一个.js文件中,在html中引入该js代码即可

6.html的window对象

　　*setInterval();每隔多少毫秒执行某个表达式(重复执行)

　　*setTimeout();隔多少毫秒执行一个表达式(不重复执行,只执行一次)

　　*clearInterval();取消由setInterval()设置的timeout;

　　*clearTimeout();取消由setTimeout方法设置的timeout;

7.window对象的方法

8.Navigator对象的属性

9.Screen对象属性

10.History对象的方法

11.Location对象属性

12.DOM的概述

　　*DOM:文档对象模型

　　　　将一个html的文档加载到内存形成一个树形结构,从而操作树结构就可以改变html的样子

　　* DOM的使用

　　　　document,element,attribute的属性和方法

Ø 获得元素：

* document.getElementById(); -- 通过ID获得元素.

* document.getElementsByName(); -- 通过name属性获得元素.

* document.getElementsByTagName(); -- 通过标签名获得元素.

Ø 创建元素：

* document.createElement(); -- 创建元素

* document.createTextNode(); -- 创建文本

Ø 添加节点：

* element.appendChild(); -- 在最后添加一个节点.

* element.insertBefore(); -- 在某个元素之前插入.

Ø 删除节点:

* element.removeChild(); -- 删除元素

13.js的内置对象

14.array的方法

15.Boolean

16.Date

17.Math

18.js的全局函数

19.下面是一个js+css实现的一个计算器的效果图和代码

代码

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>计算器改进</title>
       <style>
           table{
               border-collapse: collapse;
               margin: auto auto;
           }
           td{
               width: 150px;
               line-height: 70px;
           }
           #view{
               width: 600px;
               line-height: 100px;
               text-align: right;
           }
           .clearbutton{
               width: 300px;
               line-height: 70px;
           }
           .numbutton{
               width: 150px;
               line-height: 70px;
           }
       </style>
   </head>
   <script>
           function jsq(num) {
               //获取当前输入的数据
               document.getElementById("view").value += document.getElementById(num).value;
           }
           //计算输入的结果
           function eva() {
               document.getElementById("view").value = eval(document.getElementById("view").value);
           }
           //AC键
           function clearNum() {
               document.getElementById("view").value = null;
           }
           //DEL键
           function tuiGe() {
               var arr = document.getElementById("view");
               arr.value = arr.value.substr(0,arr.value.length-1);
           }
       </script>
   <body>
       <table>
           <tr>
               <td colspan="4">
                   <input id="view" type="text" name="view" class="screen"/>
               </td>
           </tr>
           <tr>
               <td colspan="2">
                   <input type="button" id="AC" onclick="clearNum()" value="AC" class="clearbutton"/>
               </td>
               <td colspan="2">
                   <input type="button" id="DEL" onclick="tuiGe()" value="DEL" class="clearbutton" />
               </td>
           </tr>
           <tr>
               <td>
                   <input type="button" id="7" onclick="jsq(this.id)" value="7" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="8" onclick="jsq(this.id)" value="8" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="9" onclick="jsq(this.id)" value="9" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="*" onclick="jsq(this.id)" value="*" class="numbutton" />
               </td>
           </tr>
           <tr>
               <td>
                   <input type="button" id="4" onclick="jsq(this.id)" value="4" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="5" onclick="jsq(this.id)" value="5" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="6" onclick="jsq(this.id)" value="6" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="/" onclick="jsq(this.id)" value="/" class="numbutton" />
               </td>
           </tr>
           <tr>
               <td>
                   <input type="button" id="1" onclick="jsq(this.id)" value="1" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="2" onclick="jsq(this.id)" value="2" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="3" onclick="jsq(this.id)" value="3" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="-" onclick="jsq(this.id)" value="-" class="numbutton" />
               </td>
           </tr>
           <tr>
               <td>
                   <input type="button" id="0" onclick="jsq(this.id)" value="0" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="." onclick="jsq(this.id)" value="." class="numbutton" />
               </td>
               <td>
                   <input type="button" id="+" onclick="jsq(this.id)" value="+" class="numbutton" />
               </td>
               <td>
                   <input type="button" id="eva" onclick="eva()" value="=" class="numbutton" />
               </td>
           </tr>
       </table>
   </body>
</html>

java基础案例2-2(代码片段)

前言这是书本《Java基础案例教程第二版》中提供的小案例，书里没有答案。以下的答案是本人编写的，仅供参考，若有误，评论区交流哈~【案例2-2】小明都可以买什么编写一个智能购物计算小程序，在一家商... 查看详情

web前端---javascrip基础

avaScrip基础JavaScrip简介第一个JavaScrip代码数据类型运算符数据类型转换流程控制常用内置对象一、JavaScrip简介1.JavaScrip历史背景介绍　　　　布兰登?艾奇（BrendanEich，1961年～），1995年在网景公司，发明的JavaScript。　　一开始JavaS... 查看详情

servlet以及一个简单的登录案例

1.servlet的概述　　就是一个运行在web服务器上的小的java程序,用来接收和响应从客户端发送过来的请求,通常使用http协议　　就是sun公司提供的一个动态网页开发技术　　作用:用来处理从客户端浏览器发送的请求,并且可以对请求... 查看详情

cookie的基础以及小案例

1.会话技术　　用户打开一个浏览器访问页面,访问网站的很多页面,访问完成后将浏览器关闭的过程称为是一次会话 cookie:将数据保存到客户端浏览器 session:将数据保存到服务器端向浏览器保存数据: response.addCookie(Cookiecookie)获取... 查看详情

tensorflow的小案例

...分别是构造模型和训练。在构造模型阶段，我们需要构建一个图(Graph)来描述我们的模型。所谓图，也可以理解为流程图，就是将数据的输入->中间处理->输出的过程表示出来，注意此时是不会发生实际运算的。而在模型构建... 查看详情

javase之基础篇——idea中debug调试以及综合案例练习

前言上篇文章我们给大家介绍了java中比较重要的一个知识点——方法的应用和使用。主要给大家介绍了方法的定义和使用，包括无参方法定义和使用、带参方法定义和使用、带返回值方法的定义和使用以及在使用... 查看详情

javase之基础篇——idea中debug调试以及综合案例练习

flink基础入门（含案例）(代码片段)

一、flink简介flink引入大数据技术框架发展阶段总共有四代，mr-->DAG框架（tez）--->Spark流批处理框架，内存计算（伪实时）-->flink流批处理，内存计算（真正的实时计算）flinkvsspark什么是flin... 查看详情

接口测试基础以及postman案例实战(代码片段)

接口测试基础以及postman案例实战接口测试　　　　1、就是功能测试;　　　　2、对于咱们班来说测的都是程序对外的接口　　　　3、接口其实就是各种操作数据库　　　　前端（客户端包括客户后台）后... 查看详情

高通量计算框架htcondor——案例准备(代码片段)

...不可或缺的就是运行的任务程序了。说到底分布式计算的基础还是单机运算，必须要保证发送的每个任务在单机下就能正确运行，才能谈任务调度的问题。在这里我用的是一个C/C++的任务程序查看详情

dp(动态规划)的本质以及基础优化

DP的本质：DP的本质是通过记录之前的计算结果来计算之后的计算，从而减少重复计算。DP的基本计算过程以及思维方式：抽象而言DP的基本过程是就是假设之前的数据已经计算完成的情况下利用这个已经计算完成的数... 查看详情

人工智能数学基础---定积分1：定积分的概念以及近似计算

一、引言在日常计算中，需要进行一些非线性的计算，如曲边型的面积和变速直线运动的总里程等，由于非线性，导致这些计算不能使用常规的方法来进行。但如果将这些计算涉及的函数在其定义区间上细分成n&#x... 查看详情

总结一些关于javascript的小技巧！(代码片段)

...实践得到的,博客中学习的以及在一些项目源码中看到的javascrip 查看详情

一个简单的代码风格优化的小案例(代码片段)

一、背景最近review了一些代码，其中有一个函数的写法看着别扭，而且对应同学不太清楚还可以怎么优化。由于案例比较典型，值得分享一下。本文给出对应的伪代码和自己的修改建议，并推荐可以提交代码质量... 查看详情

pyqt5小案例，界面与逻辑分离的小计算器程序(代码片段)

直接看下最终效果：使用技术总结使用Designer设计界面使用pyuic5命令导出到python文件新建逻辑处理文件，继承pyuic5导出的文件的类，在里面编写信号与槽的处理逻辑使用Designer设计界面要使用Designer，安装一个Python... 查看详情

python基础教程，流程控制语句详解

1.程序结构计算机在解决问题时，分别是顺序执行所有语句、选择执行部分语句、循环执行部分语句，分别是：顺序结构、选择结构、循环结构。如下图：很多人学习python，不知道从何学起。很多人学习python，掌握了基本语法过... 查看详情

javascrip的入门基础1

1.1 JS的插入使用<script>标签在HTML网页中插入JavaScript代码，<script>标签要成对出现，并把JavaScript代码写在<script></script>之间。<scripttype="text/javascript">表示在<script></script>之间的是文本类查看详情

java基础黑马程序员教材案例4-5..图形的面积与周长计算程序案例4-7经理与员工工资代码(代码片段)

一、4-5图形的面积与周长计算程序importjava.util.Scanner;importjava.math.*;publicclassareaCountpublicvoidmenu()System.out.println("输入1计算圆的周长、面积");System.out.println("输入2计算长方形的周长、面积");Scannerscanner& 查看详情