java-Web——java script（第一天练习）

最新推荐文章于 2024-08-18 23:21:29 发布
最新推荐文章于 2024-08-18 23:21:29 发布
阅读量477 收藏 4
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jxcncb/article/details/108628112
版权

题一：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物简易计算器</title>
		<script type="text/javascript">
			
			//加法
			function add(){
				var x=document.getElementById("num1").value;
				var y=document.getElementById("num2").value;
				var z=parseInt(x)+parseInt(y);
    	        document.getElementById("result").value=z;
			}
			
			//减法
			function jianfa(){
				var x=document.getElementById("num1").value;
				var y=document.getElementById("num2").value;
				var z=parseInt(x)-parseInt(y);
				document.getElementById("result").value=z;
				
			}
			
			//乘法
			function chengfa(){
				var x=document.getElementById("num1").value;
				var y=document.getElementById("num2").value;
				var z=parseInt(x)*parseInt(y);
				document.getElementById("result").value=z;
			}
			
			//除法.
			function chufa(){
				var x=document.getElementById("num1").value;
				var y=document.getElementById("num2").value;
				var z=parseInt(x)/parseInt(y);
				document.getElementById("result").value=z;
			}
		</script>
	</head>
	<body>
		<div>
			<form>
				<table>
					<tr>
						<td>
							<img src="img/picture.png" /><span style="font-size: large; font-weight: bold; line-height: 40px;">购物简易计算器</span>
						</td>
					</tr>
					
					<tr>
						<td>
							第一个数<input type="text" id="num1" size="40" />
						</td>
					</tr>
					
					<tr>
						<td>
							第二个数<input type="text" id="num2" size="40" />
						</td>
					</tr>
					
					<tr>
						<td>
							<input type="button" value="+" onclick="add()" />
							<input type="button" value="-" onclick="jianfa()" />
							<input type="button" value="x" onclick="chengfa()" />
							<input type="button" value="÷" onclick="chufa()" />
						</td>
					</tr>
					
					<tr>
						<td>
							计算结果<input type="text" id="result" size="40" />
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述

题二：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var a=prompt("请输入三角形的行数");
			for(var i=0;i<a;i++) {
				for(var j=0;j<a-i;j++) {
					document.write("&nbsp");
				}

				for(var k=0;k<=2*i;k++){
					document.write("*");
				}
				document.write("<br />");
			}
		</script>
	</head>
	<body>
	</body>
</html>

实现效果：
在这里插入图片描述在这里插入图片描述

题三：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>调试工具</title>
		<script type="text/javascript">
			alert("上午好！欢迎来到贵美");
		</script>
	</head>
	<body>
		
	</body>
</html>

实现效果：
在这里插入图片描述

题四：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		  	function computer(){
			     var result;
			     var num1 = prompt("请输入第一个数");
			     var num2 = prompt("请输入第一个数");
			     var oper = prompt("请输入运算符");
			    switch (oper){
			        case "+":
			          result = parseInt(num1) +parseInt(num2);
			           break;
			        case "-":
			            result = num1 - num2;
			            break;
			        case "*":
			            result = num1 * num2;;
			            break;
			        case "/":
			            result = num1 / num2;;
			            break;
			    }
			      alert("计算结果为"+num1+oper+num2+"="+result);
			 }
		</script>
	</head>
	<body>
		<input type="button" value="计算" onclick="computer()" />
	</body>
</html>

实现效果：
在这里插入图片描述

题五：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>模拟建议购物车</title>
		<script type="text/javascript">
			window.onload=function(){
				window.open("example08.html","广告","height=1030,width=1920,fullscreen=yes");
			}
		</script>
	</head>
	<body>
		这是当前页......
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*window.οnlοad=guanbi(){
				window.close()
			}*/
			function methed(){
				window.close();
			}
			
			function submit(){
				if(confirm("您确定提交订单吗？")){ 
					alert("您已经成功提交订单！");   
				}else{
					alert("您已经取消！");
				}
			}
		</script>
	</head>
	<body>
		<img src="img/untitled.png" />
		<input type="button" value="提交订单" onclick="submit()" />
		<input type="button" value="关闭当前页" onclick="methed()" />
	</body>
</html>

实现效果：
在这里插入图片描述

题六：
在这里插入图片描述

实现代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作12小时时钟</title>
		<script type="text/javascript">
			function displayTime(){
				var date= new Date();
				var yy=date.getFullYear();
				var mo=date.getMonth()+1;
				var dd=date.getDate();
				var hh=date.getHours();
				if(hh>12){
					var x=hh-12;
				}else{
					var x =hh;
				}
				var mm=date.getMinutes();
				var ss=date.getSeconds();
				var da=date.getDay();
				switch(da){
					case 0:
					str="星期日";
					break;
					
					case 1:
					str="星期一";
					break;
					
					case 2:
					str="星期二";
					break;
					
					case 3:
					str="星期三";
					break;
					
					case 4:
					str="星期四";
					break;
					
					case 5:
					str="星期五";
					break;
					
					case 6:
					str="星期六";
					break;
				}
				document.getElementById("myclock").innerHTML=yy+"年"+mo+"月"+dd+"日          "+
				x+"："+mm+"："+ss+"     "+str;
			}
			
			function clock(){
				setInterval("displayTime()",1000);
			}
		</script>
	</head>
	<body onload="clock()">
		<div id="myclock">
			
		</div>
	</body>
</html>

实现效果：
在这里插入图片描述以上绝味个人所写，如有错误，欢迎指正，谢谢！

新时代的农民工
关注
Java script
一纸淡然
04-13 8948
JavaScript主要包括3种数据类型：简单数据类型、特殊数据类型、复合数据类型。 简单数据类型：数值型、字符型、布尔型 复合数据类型：对象、数组、函数 特殊数据类型：null、undefined 数值型：以不带引号的数字形式出现在JavaScript的程序中，主要用于进行各种数学运算。 null类型：它的值是JavaScript 的保留关键字null，表示没有值存在。 undefi
攻防系列——pikachu靶场通关练习
weixin_43140411的博客
10-23 2064
从来没有哪个时代的黑客像今天一样热衷于猜解密码 ---奥斯特洛夫斯基
Java Script 基本语法
m0_67333901的博客
02-26 701
今天我给大家分享一下 JavaScript的一些基本语法 打印 console控制台 log日志 相当于SYSO*/ console.log("HELLO WORLD") console.log('你好 世界') //定义整数变量 int i=1; //js中所有的变量全部使用var来定义 //整数,小数叫做number var i=10; var f=1.234; 定义字符变量 string var s="1"; var s2='数字...
Java Script
最新发布
k11582kk的博客
08-18 924
input type-"button" value-"点亮" onclick = "on()"><input type="button" value="熄灭" onclick = "off()">1.获取img元素对象2.进行图片的更换//修改元素属性。
javascript —— tow
weixin_38173324的博客
05-25 455
1、Javascript数据类型 在JavaScript里面中支持以下数据类型： 1.1 数字类型 var n = 100; var m = 11.22;1212 1.2 字符串 var error = "error"; var message = "hello" + "world";1212 1.3 布尔值 var flag = false; var a = 5;
java script
weixin_47967388的博客
02-21 2130
HTML页面是静态的，而JavaScript可以弥补HTML语言的缺陷，实现Web页面客户端的动态效果。JavaScript的作用有以下几点： 1、动态改变页面内容 HTML页面是静态的，一旦编写，内容是无法改变的。JavaScript可以弥补这个不足，可以将内容动态地显示在网页中。 2、动态改变网页的外观 JavaScript通过修改网页元素的CSS样式，达到动态地改变网页的外观。 3、验证表单数据 我们常见的在各大网站中的注册中的验证功能，就是JavaScript实现的。 4、响应事件 JavaScri
“21天好习惯”第一期－1
xzyYYDS的博客
10-23 291
实现无刷新用户名验证。当用户名文本框失去焦点时，发送请求到服务器，判断用户名是否存在，如果已经存在提示 “用户名已被使用”，如果不存在则提示 “用户名可以使用”。 1.前后端用json交换数据。 2.同时用原生js和jquery库两种方式实现 CheckUserName.java import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io...
webmagic采集CSDN的Java_WebDevelop页面
热门推荐
hepanlaurence的专栏
05-23 1万+
使用webmagic采集博客类的网站示例
Web安全深度剖析-笔记
qq_30378851的博客
11-20 3413
Web安全深度剖析-笔记 文章目录Web安全深度剖析-笔记HTTP基础知识http请求方法http状态码http消息头（字段）截取HTTP请求搜索引擎劫持SQLmap注入注入基础知识使用DVWA来练习使用sqlmapSQLmap基本使用方法更多的选项简述利用过程其他常用的参数用法SQLmap能检测到的注入类型其他检测SQL注入的工具上传漏洞WEB解析漏洞简介IIS6.0解析漏洞APACHE漏洞PH...
黑马就业班（02.JavaWeb+项目实战\10.用户信息案例开发）：基于之前用户信息查询案例（视频21-13.50，使用断点debug查找错误，重点！！）
LKJgdut的博客
02-25 1847
今日内容 1. 综合练习 1) 简单功能 1. 列表查询 2. 登录 3. 添加 4. 删除 5. 修改 2) 复杂功能 1. 删除选中 2. 分页查询 * 好处： 1. 减轻服务器内存的开销 2. 提升用户体验 3. 复杂条件查询   在之前用户信息查询案例的基础上，添加新的功能。之前只有列表查询的功能，现在将其他功能补充上。...
JavaScript的学习之路---第四天
weixin_45390009的博客
09-11 87
JavaScript 语法 JavaScript 是一个程序语言。语法规则定义了语言结构。它是一个轻量级，但功能强大的编程语言。 一、JavaScript 字面量 在编程语言中，一般固定值称为字面量，如 3.14。 数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)。 实例1： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript 字面量
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值