Java_web_script_实例

最新推荐文章于 2023-03-16 20:08:35 发布

梦转千痕

最新推荐文章于 2023-03-16 20:08:35 发布

阅读量724

点赞数 1

分类专栏： java_web

本文链接：https://blog.csdn.net/MengHen_0_0/article/details/96881145

版权

java_web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
JS的代码实例

编程实例1

用javaScript完成图片中的大写小写的操作
用js完成上图

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#cssid{
			width:500px;
			height: 300px;
			background-color: yellow;
		}
		#textid{
			background-color: #ccc;
			
		}
	</style>
	<script type="text/javascript">
			function change(){
				var selectNode=document.getElementById("selid");
				var value=selectNode.options[selectNode.selectedIndex].value;
				var div1Node=document.getElementById("cssid");
				var div2Node=document.getElementById("textid");

				div1Node.style.textTransform=value;
				div2Node.innerText="text-transform:"+value+";";
			}
	</script>
</head>
<body>
	<div id="cssid">
	Good good study,Day day up!
	</div>
	<p></p>
	<select id="selid" onchange="change()">
	<option value="none">---text-transform---</option>
	<option value="capitalize">首字母大写</option>
	<option value="uppercase">所有字母大写</option>
	<option value="lowercase">所有字母小写</option>
	</select>
	<div id="textid">
	 text-transform:none;
	</div>
</body>
</html>

编程实例2

用javaScript生成菜单列表
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{
			border: #0066ff 1px solid;
		}
		table td{
			border: #0000FF 1px solid;
		}
		table td div{
			background-color: #66ffcc;
			display: none;
		}
		table td a:link,table td a:visited{
			text-decoration: none;
			color: #993300;
		}
		.open{
			display: block;
		}
		.close{
			display: none;
		}
	</style>
	<script type="text/javascript">
		function list2(){
			var aNode=event.srcElement;
			var tdNode=aNode.parentNode;
			var divNode=tdNode.getElementsByTagName("div")[0];
			var tableNode=document.getElementsByTagName("table")[0];
			var divNodes=tableNode.getElementsByTagName("div");
			for (var i = 0; i <divNodes.length; i++) {
				if(divNodes[i]==divNode){
					if(divNode.className=="open"){
						divNode.className="close";
					}else{
						divNode.className="open";
					}
				}else{
					divNodes[i].className="close";
				}
			}
		}
	</script>
</head>
<body>
	<table>
		<tr>
		<td>
			<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
			<div>
				老大<br/>
				老二<br/>
				老三<br/>
				老四<br/>
				老五<br/>
			</div>
		</td>
		</tr>
		<tr>
		<td>
			<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
			<div>
				老大<br/>
				老二<br/>
				老三<br/>
				老四<br/>
				老五<br/>
			</div>
		</td>
		</tr>
		<tr>
		<td>
			<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
			<div>
				老大<br/>
				老二<br/>
				老三<br/>
				老四<br/>
				老五<br/>
			</div>
		</td>
		</tr>
		<tr>
		<td>
			<a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>
			<div>
				老大<br/>
				老二<br/>
				老三<br/>
				老四<br/>
				老五<br/>
			</div>
		</td>
		</tr>
	</table>
	
</body>
</html>

编程实例3

用javaScript实现展出和缩进操作
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
     body,div,span{
	    margin:0;
		padding:0;
 	 }
	 #div1{
	    width:200px;
		height:200px;
		background:red;
		position:relative;
		left:-200px;
		top:0;
	 }

	 #div1 span{
	    width:20px;
		height:50px;
		background:blue;
		position:absolute;
		left:200px;
		top:75px;
	 
	 }
  </style>
	<script type="text/javascript">
		window.onload =function(){
		var divNode = document.getElementById("div1");
		divNode.onmouseover = function(){
			startMove(0);
		}
		divNode.onmouseout = function(){
			startMove(-200);
		}
	}
		var timer = null;
		function startMove (iTarger) {
			clearInterval(timer);
			timer = setInterval(function(){
				var speed = 0;
				if(speed > iTarger){
					speed = -10;
				}else{
					speed = 10;
				}
				var divNode = document.getElementById("div1");
				if(divNode.offsetLeft == iTarger){
					clearInterval(timer);
				}else{
					divNode.style.left = divNode.offsetLeft+speed+'px';
				}
			},30)
		}
	</script>
</head>
<body>
	<div id="div1">
		<span id="share">分享</span>
	</div>
</body>
</html>

Javascript被归类为直译语言，因为主流的引擎都是每次运行时加载代码并解译。V8是将所有代码解译后再开始运行，其他引擎则是逐行解译（SpiderMonkey会将解译过的指令暂存，以提高性能，称为实时编译），但由于V8的核心部份多数用Javascript撰写（而SpiderMonkey是用C++），因此在不同的测试上，两者性能互有优劣。与其相对应的是编译语言，例如C语言，以编译语言编写的程序在运行之前，必须经过编译，将代码编译为机器码，再加以运行。