JavaScript之------综合应用

最新推荐文章于 2022-09-28 15:57:40 发布
最新推荐文章于 2022-09-28 15:57:40 发布
阅读量1.9k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： html网页编程 文章标签： javascript combobox checkbox 列表 表单提交
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/x121850182/article/details/51702347
本文详细介绍了DHTML技术在JavaScript中的应用，包括列表菜单、快捷设置文本字体、表格操作、选择框功能、下拉框交互及正则表达式在用户注册中的运用。内容涵盖事件处理、DOM操作和CSS样式设置，提供了丰富的示例代码。

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

DHTML技术使用的基本思路：
1. 用标签封装数据---html范畴
2. 定义样式---css范畴
3. 明确事件源、事件和要处理的节点---dom范畴
4. 明确具体的操作方式，其实就是事件的处理内容(过程)---js范畴


一、列表菜单

1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容(允许和不允许同时打开多个菜单项)

<html>
  <head>
    <title>DHTML技术演示---菜单列表1</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <style type="text/css">
		/*老版本的IE支持，新版本不支持了
		dl{
			height:18px;
			overflow:hidden;
		}*/
		
		/*
		ul{
			//display:none;//不显示
			display:block;//块显示
		}
		*/
		table {
			/*border:#ff80ff;*/
			width:80px;
		}
		
		table ul{
			list-style:none;
			margin:0px;
			padding:0px;
			background-color:#ff8000;
			display:none;
		}
		table td{
			/*border:#0000ff 1px solid;*/
			background:#80ff00;
		}
		
		table td a:link, table td a:visited{
			color:#8080c0;
			text-decoration:none;
		}
		table td a:hover{
			color:#0000ff;;
		}
		
		.open{
			display:block;
		}
		.close{
			display:none;
		}
		
	 </style>
	 
	 <script type="text/javascript">
	 	/*当前菜单的开关切换，当点开其他菜单时，此菜单不会关闭
	 	function list(node){
			var oTdNode = node.parentNode;
			//alert( oTdNode.nodeName);//TD
			var oUlNode = oTdNode.getElementsByTagName("ul")[0];
			//alert( oUlNode.nodeName);//UL
			if( oUlNode.className =="open"){
				oUlNode.className ="close";
			}else{
				oUlNode.className ="open";
			}
		}
		*/
		//实现当前菜单开关切换的同时，把其它菜单全部关闭，即只能打开一个菜单
	 	function list(node){
			var oTdNode = node.parentNode;
			var oUlNode = oTdNode.getElementsByTagName("ul")[0];
			//获取菜单表格(tableMenu)对象 下的所有 菜单块(Ul)对象
			var oTableNode = document.getElementById("tableMenu");
			var arrUlNodes = oTableNode.getElementsByTagName("ul");
			//遍历所有菜单块(Ul)对象，分别对它进行开关显示设置			
			for(var x=0; x<arrUlNodes.length; x++){
				if(arrUlNodes[x]==oUlNode && oUlNode.className!="open"){
					oUlNode.className ="open";//等价于：arrUlNodes[x].className ="open";
				}else{
					arrUlNodes[x].className="close";
				}
			}
		}
	 
	 </script>
  </head>
  
  <body>
	<table id="tableMenu">
		<tr>
			<td>
				<a href="javascript:void(0)" onclick="list(this)">文件菜单</a>
				<ul>
					<li>菜单项一</li>
					<li>菜单项二</li>
					<li>菜单项三</li>
					<li>菜单项四</li>
				</ul>
		    </td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" onclick="list(this)">编辑菜单</a>
				<ul>
					<li>菜单项一</li>
					<li>菜单项二</li>
					<li>菜单项三</li>
					<li>菜单项四</li>
				</ul>
		    </td>
		</tr>
		<tr>
			<td>
				<a href="javascript:void(0)" onclick="list(this)">调试菜单</a>
				<ul>
					<li>菜单项一</li>
					<li>菜单项二</li>
					<li>菜单项三</li>
					<li>菜单项四</li>
				</ul>
		    </td>
		</tr>
	</table>
	
  </body>
  
</html>

2、实现功能：鼠标放在菜单条上时，显示菜单块，离开菜单条和菜单块时，隐藏菜单块，且鼠标放的行有颜色变化 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表菜单</title>
<style type="text/css">
	#newsid ul{
		list-style:none;
	}
	#newslist li{
		float:left;
		width:180px;
	}
	#newslist li ul{
		margin:0px;
		padding:0px;
	}
	#newslist li ul li{
		line-height:25px;
	}
	#newslist li a{
		display:block;
		color:#ffffff;
		background-color:#0066cc;
		text-decoration:none;
		line-height:25px;
		text-align:center;
	}
	#newslist li a:hover{
		color:#0066cc;
		background-color:#999999;
	}
	#newslist li ul a{
		color:#000000;
		background-color:#0099ff;
	}
	#newslist li ul li a:hover{
		color:#0066ff;
		background-color:#999999;
	}
	#newslist li ul{
		display:none;
	}
</style>
<script type="text/javascript">
	function list(liNode){
		var ulNode = liNode.getElementsByTagName("ul")[0];
		with(ulNode.style){
			display = display=="block"?"none":"block";
		}
	}
</script>
</head>
<body background="bg-img.jpg">
<!--  制作一个下拉菜单：1)封装数据 2)定义基本样式    -->
<div id="newsid">
	<ul id="newslist">
		<li onmouseover="list(this)"; onmouseout="list(this)" >
			<a href="javascript:void(0)">城院新闻</a>
			<ul style="display:none;">
				<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">校园新闻内容摘要</a></li>
			</ul>
		</li>
		<li onmouseover="list(this)"; onmouseout="list(this)" >
			<a href="javascript:void(0)">大学新闻</a>
			<ul style="display:none;">
				<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">大学新闻内容摘要</a></li>
			</ul>
		</li>
		<li onmouseover="list(this)"; onmouseout="list(this)" >
			<a href="javascript:void(0)">社会新闻</a>
			<ul style="display:none;">
				<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">社会新闻内容摘要</a></li>
			</ul>
		</li>
		<li onmouseover="list(this)"; onmouseout="list(this)" >
			<a href="javascript:void(0)">就业新闻</a>
			<ul style="display:none;">
				<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
				<li><a href="http://www.hncu.net/">就业新闻内容摘要</a></li>
			</ul>
		</li>
		
	</ul>
	
</div>

</body>
</html>


二、快捷设置文本字体

实现功能：将文字设置为超链接，用来设置文本的字体

1、通过获取文本的节点，单独设置样式中的字体和颜色

2、通过获取文本的节点，设置此节点的className，与导进的css样式中的通过className方式设置的样式对应起来，从而实现对文本的字体设置

3、写超链接时href=""若为空，默认调本地文件地址，即弹出文件夹，若写成：href=“javascript:void(0)”则不会开新窗口，停在原处，若有其他操作也不会干扰他们进行；还有一种href=“#”不建议使用，会在地址后加上"#"号

<html>
  <head>
    <title>DHTML技术演示---新闻字体3--换套装</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <link rel="stylesheet" type="text/css" href="1.css" id="linkChgSuit">
	 <style type="text/css">
	 	span:hover{
	 		background-color:#ff0000;
			cursor:hand;
	 	}
	 </style>
	 
	 <script type="text/javascript">
	 	//更改类样式
		function changeFont(sClass){
			var oNewsDiv = document.getElementById("newsDiv") ;
			//利用js+dom的方式来更改节点的样式---class属性
			oNewsDiv.className = sClass;
		}
		
		//换套装
		function changeSuit(sNum
最低0.47元/天 解锁文章

200万优质内容无限畅学
JavaScript之 ------ 综合应用
寻找、发现、追求、获得———这就是狼的生活要素
10-24 3205
一、列表菜单 二、快捷设置文本字体 三、对表格的一些操作（创建，删除，设置颜色，排序等） 四、选择框的应用（类似如邮件管理） 五、正则表达式的应用（用户注册） 六、下拉框的应用（设置字体颜色、两个下拉框的对应）
JavaScript的综合应用案例
TrineaShao' Blog
01-05 1472
实现以上功能： 1、文字的填充、form表单数据 2、改变颜色、改变宽高、隐藏内容、显示内容、恢复 3、代码如下 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;style样式&lt;/title&am
javascript DOM编程综合示例
08-10
根据JavaScript DOM 编程艺术这本书之前所介绍的内容，做的本书最后的一个综合简单示例
Javascript综合应用小案例
weixin_34032827的博客
05-04 217
按需求弄了一个 取词 以及 标红 的小应用。 先上demo ：http://qianduannotes.sinaapp.com/getKeyword/ 很多平时常用的东西，都用上了，所以拿出来说说。   一、代码 var GetKeywords = { str: "", limit: 11, keywords:[], init : function(){ ...
javascript_综合应用（1）
星宇非凡
09-29 269
参考内容：妙味课堂 <style> #div1{ width:180px; height:180px; overflow:hidden; position:relative;} #div1 span{ width:100px; height:100px; background:yellow; opacity:0.5; filter:alpha(opacity=50); positi...
JavaScript之DOM综合应用练习
Web小笨猪的博客
04-07 873
效果图： 实现代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt
基于JavaScript的E-UI前端UI设计源码免费使用
最新发布
02-25
E-UI作为一款基于JavaScript的前端UI设计源码项目，它的开源和免费特性，丰富多样的资源，以及详尽的文档支持，使得它成为了前端开发者不可或缺的工具之一。无论是在初创项目中快速构建原型，还是在大型企业级应用中...
基于JavaScript的mrxu-monitor前端监控平台设计源码
10-03
在实际应用中，mrxu-monitor前端监控平台可以用于各种网络应用和网站。它的设计初旨是为开发者提供一个清晰、高效的监控工具，以帮助他们及时捕捉到网页运行中可能出现的问题，如性能瓶颈、用户行为异常等。通过这个...
javascript-machine-learning:一些带有React的机器学习可视化工具
05-19
综合以上信息，这个项目可能是一个教学或演示性质的资源，它向开发者展示了如何在React应用程序中整合机器学习，特别是通过JavaScript实现线性回归模型，并用可视化的方式展示结果。开发者可以在这个项目中学习到...
javascript实例应用---综合类.rar
03-23
这个"javascript实例应用---综合类.rar"压缩包可能包含了多个JavaScript的应用示例，旨在帮助学习者理解并掌握JavaScript在实际开发中的多种用法。 在JavaScript的世界里，实例应用通常涵盖了以下核心概念： 1. **...
Javascript的运用
12-28
是JAVASCRIPT和CSS的综合运用
trs置标用法
03-03
trs相关置标的用法及详细说明，含用过及示例
复习前端基础知识7之JavaScript综合应用
weixin_46079817的博客
11-27 147
复习前端基础知识7之JavaScript综合应用 制作如上图所示的小购物车页面，这里需要经常用到我们之前复习过的盒子模型。 首先要利用页面布局的div布局把我们所需要的盒子画出来。 先做第一个店铺中的内容。 将一整个页面当作一个最大的div盒子里面嵌套小盒子 那么第一个店铺的店铺名称上面有一个稍大的盒子，里面有四个小盒子。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
简单的javascript运用
yrr13142300290的博客
11-09 324
在通过做出等腰和直角三角形后有一些收获： 1：script代码可以放置在任何一个位置，只是代码的执行顺序不一样而已，还有就是一般与标签有关的script代码会放置在body后面，而与标签无关的一般会放置在head里面。 2：函数的格式有三种，三种都能够表达出相同的作用，第一种是直接的function zz(){}，第二种是var zz=function(){},第三种是var zz=new f
黑马程序员_java基础笔记(09)...HTML基本知识、CSS、JavaScript、DOM
面朝大海，春暖花开
02-06 994
—————————— ASP.Net+Android+IOS开发、.Net培训、期待与您交流！ —————————— 基本标签（a、p、img、li、table、div、span）、表单标签、iframe、frameset、样式 1：Html  (Hypertext Markup Language) 超文本标记语言 2：CSS   (Cascading Style S
Dom编程（邮件的全选、反选、删除选中项）
程序员
08-20 804
邮件的全选、反选、删除选中项 table{ border:1px solid #06F; width:60%; } th{ background-color:#0C0; } td, th{ border:1px solid #00C; } .one{ background-color:#FF0; } .two{ background-color:#0CF; } .over{ bac
JavaScript事件及应用(表单元素的常用事件)(9.27)
weixin_65824274的博客
09-28 711
onscroll 事件是指窗口的滚动条被拖动时触发，onresize 事件是指窗口的大小发生改变时触发，onload 事件在浏览器完成对象的装载后立即触发。用得比较多的是 onscroll 事件，上新浪和搜狐这些门户站点，经常会发现页面上除随机漂浮的广告外，还有的广告会随着滚动页面而滚动，页面的左边和页面的右边各有一个，形成对联效果。，onkeydown事件是指在文档中按下某个键时触发，ondrag事件是指在文档中进行拖曳操作时持续触发的事件。表单提交时触发，返回值是false将不提交表单数据。
Javascript-网页编程-DHTML-复选框加强
Discovering,Thinking and Finding——This Is My Logic
07-18 464
选择框的应用（类似如邮件管理） 实现功能：类似如邮箱中对邮件的管理： 选择邮件，删除邮件，全选，反选，取消全选等 [java] view plain copy               DHTML技术演示---checkbox的使用2        "Content-Type" content="text/html; cha
Web综合应用实验（html css javascript）
半岛落枫的博客
11-15 4513
default_order function panduan(str){         if(str==""||str==null){             return 0;             }         else         return 1;     } function emailpanduan(str){      var l;      l
JavaScript加密库crypto-js使用详解
在选择时，开发者需要根据项目需求、兼容性、性能和社区支持等多方面因素综合考量。 综上所述，"crypto-js.zip" 是一个包含了Crypto-js加密库的压缩包，而Crypto-js作为一个JavaScript加密库，提供了一系列加密功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值