、
<body>
<input type="text" name="num1" id="num1">
<input type="radio" name="radio1" value="radio1" checked="checked">
+
<input type="radio" name="radio1" value="radio2">
-
<input type="text" name="num2" id="num2">
=
<input type="text" name="num3" id="num3">
<input type="button" name="button1" id="button2" value="运算"
onclick="operation()">
</body>
文本显示后如下图
+
-
=
点运算后显示如下图
+
-
=
<script type="text/javascript">
function operation() {
//获取填入表单的数值并转化成浮点数值;
var num1 = parseFloat(document.getElementById("num1").value);
var num2 = parseFloat(document.getElementById("num2").value);
//获取num3的Id
var num3 = document.getElementById("num3");
//获取单选按钮的组的Id
var radio = document.getElementsByName("radio1");
var commend;
//遍历单选按钮判断哪个按钮被选中
for ( var i = 0; i < radio.length; i++) {
if (radio[i].checked == true) {
commend = radio[i].value;
break;
}
}
//判断填入的内容是否为数字
if (num1 != null && num2 != null) {
if (isNaN(num1) || isNaN(num2)) {
if (isNaN(num1)) {
alert("第一个输入框输入的不是数字或者没有输入数值");
} else {
alert("第二个输入框输入的不是数字或者没有输入数值");
}
//判断选中的单选框的属性,
} else if (commend == "radio1") {
var num4 = num1 + num2;
num3.value = num4;
} else if (commend == "radio2") {
var num4 = num1 - num2;
num3.value = num4;
}
}
}
</script>
分享到:
相关推荐
【jsp+java留言板】是一个基于Java Web技术实现的简单在线交流平台,主要使用JSP(JavaServer Pages)作为视图层,结合Java后端处理数据,实现用户留言、查看留言的功能。这个实训项目旨在帮助学习者掌握Web开发的...
JSPExample5.jsp JSP页面中字符数据的简单使用 JSPExample6.jsp 结合布尔类型变量判断学生成绩等级 JSPExample7.jsp text.html页面提交至该页,并显示提交数据 text.html 页面数据提交至...
JSP文件在服务器端被编译为Servlet,然后发送到客户端,使得服务器端的处理能力得以利用,比如数据库交互、逻辑运算等。 **CSS(Cascading Style Sheets)** 是用于描述网页及应用程序用户界面外观和表现的样式表...
在本系统中,模型可能是数据访问对象(DAO)和业务逻辑组件,视图由jsp页面构成,而servlet扮演控制器的角色。 3. **数据库设计**:系统需要一个数据库来存储员工信息、部门信息、职位信息等。可能包括员工表...
在本项目中,"JSP简单的计算器"是一个基于JAVA WEB技术实现的简易计算工具,主要目的是让学生或开发者熟悉JSP(JavaServer Pages)的基本用法和动态网页开发。以下是关于这个项目的详细知识点: 1. **JSP基础**: ...
下面是一个简单的JSP示例,展示了如何在JSP页面中嵌入Java代码: ```jsp ;charset=gb2312" %> <h1>jsp1 int a = 0; int b = 9; int c = a + b; out.println("hello, world!, 世界你好!" + c); %> ``` #### ...
通过这个简单的项目,开发者可以学习到JSP的基本语法、JavaScript的前端交互以及如何结合两者实现一个动态Web应用。此外,还可以了解到如何处理用户输入、进行错误检查以及如何在Web环境中返回动态生成的内容。对于...
5. **EL(Expression Language)**:EL是一种轻量级的表达式语言,用于在JSP页面中获取和设置JavaBean的属性,以及执行基本的算术和逻辑运算。 6. **JSTL(JavaServer Pages Standard Tag Library)**:JSTL是一套...
在这个“计算器实现四则运算”的项目中,我们聚焦于使用JSP(JavaServer Pages)技术来实现这一功能。JSP是Java平台上用于创建动态网页的一种技术,它结合了HTML和Java代码,使得开发者可以方便地处理服务器端的业务...
示例描述:演示JavaScript的简单应用及JavaScript特效。 1.1.html 用JavaScript开发的弹出式“Hello World”实例。 1.2.html 在页面中输出的“Hello World”。 1.3.html 使用JavaScript进行文本框值的...
总的来说,"mvc模式jsp计算器"是一个很好的学习实例,它演示了如何使用MVC模式来构建一个简单的Web应用,同时利用JSP技术实现了用户友好的界面交互。理解这个例子有助于提升对Web开发架构和设计模式的理解。
这里使用了`Date`对象获取当前时间和目标时间,并通过简单的算术运算计算出时间差。根据时间差的大小,输出剩余天数或提示已经超过了目标日期。 **第二段代码**: ```javascript function show_student163_time() {...
1. **表达式语言(EL)增强**:JSP 2.1引入了EL 2.1,增强了表达式语言的功能,支持更复杂的逻辑运算和类型转换,使得在JSP页面中处理数据更加简洁。 2. **统一的标签库(Tag Library)**:JSP 2.1规范统一了自定义...
JavaScript提供了丰富的数学运算,我们可以编写函数来完成这些转换。 5. **用户界面更新**:一旦获取到颜色,我们需要将其显示在界面上,这可能包括色块的填充、颜色代码的显示等。这需要对DOM(文档对象模型)有...
【Ajax实现的简单计算器】 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互,提高了用户体验。在这...
3. **EL(Expression Language)**:EL是JSP 2.0引入的一种简洁的表达式语言,用于从作用域(如page, request, session, application)中获取和设置对象的属性,或者进行简单的算术和逻辑运算。 4. **JSTL(Java...
- 尽管简单的JavaScript编写可以用记事本完成,但更复杂的开发通常使用IDE,如MyEclipse,现在的Web开发者更倾向于使用Visual Studio Code、Sublime Text或WebStorm等专业编辑器。 4. **案例分析**: - 案例1展示...
这个简单的HTML代码会在浏览器支持的情况下显示一个日期选择器。然而,不是所有浏览器都支持HTML5的日期输入类型,尤其是较老的版本和某些非主流浏览器。因此,通常需要使用JavaScript库来提供更广泛的兼容性。 ...
在此案例中,当尝试执行除法运算且除数为零时,将抛出异常,并跳转到指定的错误处理页面`4-03.jsp`。 #### 三、JSP的六大基本对象 JSP提供了六个内置对象,它们分别是: 1. **out对象**: 用于向客户端输出数据。 ...
【JSP月历时间源代码】是一个典型的Java服务器页面(JSP)开发示例,它提供了展示日期和时间,特别是包含农历节日功能的功能。在Web应用程序中,这样的功能常常用于日程管理、事件提醒或者创建用户友好的界面。下面...