JavaScript+jQuery案例(一)

最新推荐文章于 2023-07-31 17:54:12 发布

三两茶饭事

最新推荐文章于 2023-07-31 17:54:12 发布

阅读量893

点赞数

CC 4.0 BY-SA版权

分类专栏：编程日常学习大数据文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_60142726/article/details/126437728

日常学习同时被 3 个专栏收录

14 篇文章

订阅专栏

大数据

13 篇文章

订阅专栏

编程

7 篇文章

订阅专栏

本文通过实例解析了JavaScript在HTML中的位置、常用输出语句的应用、用户输入处理、验证逻辑和基本计算功能，包括<script>标签的位置选择、alert(), console.log()和document.write()的用法，以及验证和计算组件的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

案例:

1.< script>标签在html中的书写位置

在head中编写JavaScript代码查找id="context"的div元素，控制台打印。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> JavaScript标识放置在<Head>...</Head>头部之间</title>
		<script type="text/javascript">
			var ODiv = document.getElementById("context"); //内嵌式,自定义右键菜单
       	     console.log(ODiv); // 打印出null
		</script>
	</head>
    <body>
      		<div id="context">你好</div>		
    </body>
</html>

在body中编写JavaScript代码查找id="context"的div元素，控制台打印。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> JavaScript标识放置在<Body>...</Body>之间</title>
	</head>
	<body>
		<div id="context">你好</div>
		<script type="text/javascript">
			var ODiv = document.getElementById("context");
        	     console.log(ODiv); // 打印出<div id="context">你好</div>
		</script>
	</body>
</html>

2.常用输出语句

alert()、console.log()、document.write()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用输出语句</title>
	</head>
	<body>
		<script type="text/javascript">
			// alert() 弹出警告框
			alert('登录成功！'); 
			// console.log() 控制台输出
            console.log('控制台输出')
 			// 在HTML文档中输出
 			document.write('在HTML文档中输出')
 		</script>
 	</body>
 </html>

3.输出用户输入的信息。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>输出用户输入的信息</title>
</head>
<body>
	<script type="text/javascript">
		var msg = prompt("请输入您的信息"); // 输入框
		document.write(msg);
	</script>	
</body>
</html>

4.验证用户名和密码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>验证用户名和密码</title>
</head>
<body>
	<script>
		// 输入用户名和密码，如果正确，给出弹出框提示“登录成功”，如果不对，提示“输入错误”
		var userName = prompt("请输入用户名");
		var passWord = prompt("请输入密码");
		if(userName =='admin' && passWord =='123456'){
			alert('登录成功');
        }
      else{
			alert('用户名或密码输入错误');
		}
	</script>
</body>
</html>

5.计算年龄小游戏。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>计算年龄</title>
</head>
<body>
	<input type="button" onclick="disp_year()" value="请输入您的出生年份" /> <!--onlick使用了函数-->
	<script type="text/javascript">
		function disp_year(){
		   var year=prompt("请输入您的出生年份");
		   if (year!=null && year!="")
		   {
				document.write('您今年'+(2022-year)+'岁');
		    }
		  }
	</script>
</body>
</html>

6.简单加法器计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
  <title>简单加法器计算</title>
  <script>
    var num1 = prompt('请您输入第一个值：');
    var num2 = prompt('请您输入第二个值：');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('您的结果是:' + result);
  </script>
</body>
</html>