用javascript编写计算器,javascript编程例子

chatgpt002

于 2023-12-07 17:11:09 发布

阅读量101

点赞数

文章标签： javascript 前端开发语言 AI写作

本文链接： https://blog.csdn.net/chatgpt002/article/details/134860345

版权

本文详细介绍了如何用JavaScript编写一个简单的计算器，包括基本的算术运算、运算符使用、逻辑运算以及流程控制（if-else、三元运算符）示例。还涉及了DOM编程，用于获取用户输入判断季节的事件处理。

摘要由CSDN通过智能技术生成

大家好，小编来为大家解答以下问题，用javascript编写计算器，javascript编程例子，今天让我们一起来看看吧！

1.js的基本使用方法

使用方式一(内部方式)

<>
document.write("输入的内容")
//向浏览器输出的内容
console.log("输入的内容") ;
//可以在浏览器的控制台输出日志  ,使用控制台对象
alert("输入的内容") ;
//弹出一个提示框出来
</>

使用方式二(外部方式)

/*外部方式:1单独在js文件夹中,单独创建后缀为.js的文件
         2在xxx.js文件中,书写js代码
		 3在当前某个html页面中,导入这个xxx.js文件*/
		 < src="导入外部xxx.js文件的路径"></>
		 //<!-- 导入外部js文件-->

2.js的运算符

1)算术运算符:+,-,*,/,%(模:求余数) 赋值运算符:=
如:var a = 10 ;将=右边的值赋值给左边的这个变量a;
2)比较运算符: <,<=,>,>=,!=,==
这些符号不管连接的表达式是复杂的还是简单的,最终要么就true,要么就false
3)逻辑运算符基本符号:& 逻辑单与,有false,则false
| 逻辑单或,有true,则true
! 逻辑非
非true,则false
非false,则true
     一般情况下:开发中用的都是&&,||
逻辑双与&&:多个条件是并列关系,必须同时满足条件:有false,则false
逻辑双或||:多个条件是或者的关系,有一个成立,就成立了!,有true,则true
     4)三元运算符(三目)
      语法格式:表达式可以是简单的或者复杂,要么是true,要么false(表达式?)执行true的结果:执行 false的结果;
执行流程:首先判断表达式是否成立,如果成立,则执行true的结果如果不成立,则执行false的结果;

<>
			//算术运算符:
			var a = 3 ;  
            //将3赋值给变量a
			var b = 4 ;
            //将4赋值给变量b
			var c = 5 ;
            //将5赋值给变量c
			//var d = true ;
			//var f = false ;
			//document.write((a+d)+"<br/>") ;
			//document.write((a-f)+"<br/>") ;
			document.write((a+b)+"<br/>") ;
			document.write((a-b)+"<br/>") ;
			document.write((a*b)+"<br/>") ;
			document.write((a/b)+"<br/>") ;
			document.write((a%b)+"<br/>") ;
			document.write("<hr/>") ;
			document.write((a+b)==(a+c)+"<br/>") ;
			document.write("<hr/>") ;
			document.write((a>=b)+"<br/>") ;
			document.write((a==c)+"<br/>") ;
			document.write("<hr/>") ;
			
			//逻辑双与
			document.write((a==b) && (a+b)==7) ; //有false,则false
			document.write("<hr/>") ;
			document.write((b+c)==7 || (a==3)+"<br/>") ; //有true,则true
			document.write("<hr/>") ;
			document.write(!!(a!=b)+"<br/>") ;
			/*提示
			js代码或者java逻辑代码, 在一些判断的时候,会使用逻辑非,针对相反的一面进行错误登录 
            场景
            前台用户输入的用户和后台查出的用户名不一样,这个时候前面使用非!*/
		    document.write("<hr/>") ;
		    /*(表达式)?执行true的结果:执行false的结果;
		    执行流程:
		   	首先判断表达式是否成立,如果成立,则执行true的结果如果不成立,则执行false的结果; */
			var age = 20 ;
			document.write((age>18)?"这是一个成年人":"是一个未成年人") ;
			document.write("<hr/>") ;
			//有两个值,求两个最大值
			var num1 = 25 ;
			var num2 = 40 ;
			//定义一个变量接收
			var max = (num1>num2)?num1:num2 ;
			document.write("最大值是:"+max) ;
		 </>

3.js的流程控制语句

三种格式
格式1
if(表达式){
语句1;
}
执行流程:
表达式是否成立,如果成立,才能执行语句1
格式2:开发中使用最多(针对两种结果判断) (java语言中的if格式2也是使用最多的)
if(表达式){
语句1;
}else{
语句2;
}
执行流程:
①先判断表达式是否成立成立,则执行语句1
②否则不成立,执行语句2
格式3:针对多种结果判断的
if...else if...else
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
...
...
}else{
语句n;
}
执行流程:先判断表达式1是否成立①如果成立,执行语句1
②如果不成立,继续判断表达式2是否成立,
③如果成立,执行语句2,不成立,依次执行下面的语句..
④如果上面都不成立,执行else中的语句n;

<>
//选择结构语句之if格式2:使用最多 
/** 在js中if中的内容,跟js数据类型有关系,(特例)
1整数类型number,如果是非0的整数,if成立;否则,不成立
2字符串类型string,如果是非空字符串,if成立;否则,不成立
3对象类型object,如果是对象,new Object(),if成立;如果是null,空对象!*/
if(null){
	alert("成立") ;
}else{
	alert("不成立") ;
} */
//求最大值
//已知两个变量
var a = 30 ;
var b = 20 ;
//定义一个结果变量
var max  ; //定义了
if(a>b){
	max = a  ; //a赋值max
}else{
	max = b ; //b赋值max
}
document.write("max的值是:"+max) ;
document.write("<hr/>") ;
//三元运算符 :比较两个数据最大值
var max2 = (a>b)?a:b;
document.write("max2的值是:"+max2)  ;
document.write("<hr/>") ;
//如果是三个运算符进行比较
var m = 10 ;
var n = 20 ;
var z = 5 ;
//使用中间变量的方式 (开发中经常用到的)
//先使用m和n进行比较,将结果赋值给中间变量 
var temp = (m>n)?m:n;
//temp和z比较
var max3 = (temp>z)?temp:z ;
document.write("max3的值是:"+max3)  ;
document.write("<hr/>") ;
//定义一个变量max4
var max4 ;
if(m>n){
//m值大
   if(m>z){
//m大
   max4 = m ;
}else{
//z大
	max4 = z ;
}
}else{
//n大
if(n>z){
//n大
	max4 = n ;
}else{
	//z大
	max4 = z;
}
}
document.write("max4的值是:"+max4)  ;
</>

4.js事件编程的基本用法

练习:根据输入的值,判断季节
           3,4,5月春季
           6,7,8月夏季
           9,10,11月秋季
           12,1,2月冬季
分析:
获取文本输入框的输入的值
此处 js的核心技术: dom编程 ,就是获取标签对象,然后通过特有的方法改变标签对象的属性

function myClik(){
	var inputObj=document.getElementById("month")
	content=inputObj.value;
	// 获取输入框的值
	if(content==3||content==4||content==5){
		alert("春季");
	}else if(content==6||content==7||content==8){
		alert("夏季");
	}else if(content==9||content==10||content==11){
		alert("秋季");
    }else if(content==12||content==1||content==2){
		alert("冬季");
	}else{
		alert("请输入正确的日期")
	}
	//完成判断
}


<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		< src="js/控制语句.js"></>
	</head>
	<body>
		<input type="text" id="month" value="点击事件" />
		<input type="button" onclick="myClik()" value="点击" />
	</body>
</html>