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

最新推荐文章于 2024-03-09 16:28:36 发布
最新推荐文章于 2024-03-09 16:28:36 发布
阅读量3.1k 收藏 2
点赞数
分类专栏： JavaScript java web java学习笔记 文章标签： javascript 表格 下拉框 选择按钮 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011479875/article/details/49384905
版权
这篇博客主要介绍了JavaScript在实际应用中的各种技巧，包括列表菜单的交互、快捷设置文本字体的方法、表格的操作（创建、删除、设置颜色和排序）、选择框的应用（类似邮件管理）、正则表达式在用户注册中的应用，以及下拉框的功能实现（设置字体颜色和两个下拉框的对应）。内容详实，适合提升JavaScript实战技能。
摘要由CSDN通过智能技术生成


一、列表菜单

1、实现功能：点击菜单，显示菜单下的内容，再次点击，隐藏内容

注：把height+overflow样式同时设在<d1>能够解决菜单块显示重叠问题

<span style="font-size:14px;"><!DOCTYPE html>
<html>
    <head>
    	<title>演示列表菜单</title>
		<style type="text/css">
			dd{
				margin:0px;
			}
			dl{
				height:16px;
				overflow:hidden;
			}
			
			.open{
				height:90px;
				overflow:visible;
			}
			.close{
				height:16px;
				overflow:hidden;
			}
			
		</style>
		
        <script type="text/javascript">
        	var flag = true;
			function list(x){
				//alert("aa");
				var oDlNode = document.getElementsByTagName("dl")[x];
				if(flag){
				   oDlNode.style.overflow="visible";//这种单独设置overflow样式，会出现菜单块重叠的问题
				   flag=false;
				}else{
					oDlNode.style.overflow="hidden";
					flag=true;
				}
			}
        
        </script>
    </head>
    <body>
    	<dl>
    		<dt οnclick="list(0)">菜单条1</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		<dl>
    		<dt οnclick="list(1)">菜单条2</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		<dl>
    		<dt οnclick="list(2)">菜单条3</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		
		
		
		<!-- -------------------------   -->
		<script type="text/javascript">
        	function list2( oDtNode ){
				//alert(oDlNode.className);
				//alert(oDlNode.nodeName);
				var oDlNode = oDtNode.parentNode;
				if(oDlNode.className=="open"){
				   oDlNode.className = "close";//而这种high+overflow的方式可以解决菜单块重叠的问题
				}else{
					oDlNode.className = "open";
				}
			}
        
        </script>
		<hr/>
		
		<dl>
    		<dt οnclick="list2(this)">菜单条1</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		<dl>
    		<dt οnclick="list2(this)">菜单条2</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		<dl>
    		<dt οnclick="list2(this)">菜单条3</dt>
			<dd>菜单项1</dd>
			<dd>菜单项2</dd>
			<dd>菜单项3</dd>
			<dd>菜单项4</dd>
    	</dl>
		
    </body>
</html>
</span>
结果：

2、实现功能：在1的基础上，通过表格封装菜单，且同时只能打开一个菜单块

<span style="font-size:14px;"><!DOCTYPE html>
<html>
    <head>
        <title>演示列表菜单</title>
        <style type="text/css">
			ul{
			    list-style:none;
				margin:0px;
				padding:0px;
				display:none;
			}
			table{
				border:#8080ff solid 1px;
				width:80px;
			}
			table td a:link, table td a:visited{
				text-decoration:none;
				color:#8080FF;
			}
			.open{
				display:block;
			}
			.close{
				display:none;
			}
        </style>
        <script type="text/javascript">
        	function list( node ){
				var oTdNode = node.parentNode;
				var oUlNode = oTdNode.getElementsByTagName("ul")[0];
				
				//获取表格对象
				var oTabelNode = document.getElementById("tableFriends");
				var colUlNodes = oTabelNode.getElementsByTagName("ul");
				for(var x=0; x<colUlNodes.length; x++){
					/*
					if(colUlNodes[x]==oUlNode){
						if(oUlNode.className=="open"){
							oUlNode.className="close";
						}else{
							oUlNode.className="open";
						}
					}else{
						colUlNodes[x].className="close";
					}
					*/
					if(colUlNodes[x]==oUlNode && oUlNode.className!="open" ){
						oUlNode.className="open";
					}else{
						colUlNodes[x].className="close";
					}
				}
				
			}
        
        </script>
    </head>
    <body>
       <table id="tableFriends">
          <tr>
        	 <td>
        	 	<a href="javascript:void(0)" οnclick="list(this)">好友菜单</a>
        		<ul>
        	       <li>一个好友1</li>
			       <li>一个好友2</li>
			       <li>一个好友3</li>
			       <li>一个好友4</li>
                </ul>
        	</td>
          </tr>
          <tr>
        	 <td>
        	 	<a href="javascript:void(0)" οnclick="list(this)">同事菜单</a>
        		<ul>
        	       <li>一个同事1</li>
			       <li>一个同事2</li>
			       <li>一个同事3</li>
			       <li>一个同事4</li>
                </ul>
        	</td>
          </tr>
          <tr>
        	 <td>
        	 	<a href="javascript:void(0)" οnclick="list(this)">黑友菜单</a>
        		<ul>
        	       <li>一个黑友1</li>
			       <li>一个黑友2</li>
			       <li>一个黑友3</li>
			       <li>一个黑友4</li>
                </ul>
        	</td>
          </tr>
          <tr>
        	 <td>
        	 	<a href="javascript:void(0)" οnclick="list(this)">黑友菜单</a>
        		<ul>
        	       <li>一个黑友1</li>
			       <li>一个黑友2</li>
			       <li>一个黑友3</li>
			       <li>一个黑友4</li>
                </ul>
        	</td>
          </tr>
	   </table>
    </body>
</html>
</span>
现象：

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

<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>演示列表菜单</title>
		<style type="text/css">
			#newsid ul{
				list-style:none;
			}
			#newslist li{
				float:left;
				width:180px;
			}
			#newslist li ul{
				margin:0px;
				padding:0px;
				display:none;
			}
			#newslist li ul li{
				line-height:25px;
			}
			#newslist li a{
				display:block;
				text-decoration:none;
				color:#ffffff;
				background-color:#0000ff;
				line-height:25px;
				text-align:center;
			}
			#newslist li a:hover{
				color:#06c;
				background-color:#cccccc;
			}
		</style>
		<script type="text/javascript">
			function list(node){
				//var pNode=node;
				var ulNode=node.getElementsByTagName("ul")[0];
				with(ulNode.style){
					display=(display=="block")?"none":"block";
				}
			}
		</script>
    </head>
    <body>
        <div id="newsid">
            <ul id="newslist">
                <li οnmοuseοver="list(this)";  οnmοuseοut="list(this)">
                    <a href="javascript:void(0)">csdn新闻</a>
                    <ul>
                        <li>
                            <a href="http://www.baidu.com">csdn新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.baidu.com">csdn新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.baidu.com">csdn新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.baidu.com">csdn新闻内容摘要</a>
                        </li>
                        <li>
                            <a href="http://www.baidu.com">csdn新闻内容摘要</a>
                        </
最低0.47元/天 解锁文章
饿狼干爹
关注
专栏目录
react-native-numberFactsApp
03-25
React Native是由Facebook开发的开源框架，它允许开发者使用JavaScript和React来构建原生的iOS和Android应用。React Native将React的组件化思想引入到移动平台，使得开发者可以复用代码，提高开发效率。在这个项目中...
JavaScript常见的运用场景
weixin_46121540的博客
01-29 2044
JavaScript常见的运用场景
javascript相关应用有哪些,javascript可以用来做什么
2301_79533350的博客
11-19 360
56、原生JavaScript全角半角转换,iCase: 0全到半，1半到全，其他不转化。56、原生JavaScript全角半角转换,iCase: 0全到半，1半到全，其他不转化。91、原生JavaScript实现窗体改变事件resize的操作（兼容所以的浏览器）91、原生JavaScript实现窗体改变事件resize的操作（兼容所以的浏览器）82、原生JavaScript用正则表达式清除相同的数组(低效率)83、原生JavaScript用正则表达式清除相同的数组(高效率)
javascript日常用途有哪些,javascript的主要应用领域
阿发狗伪原创
11-06 226
大家好，小编为大家解答javascript主要应用哪些方面的问题。很多人还不知道javascript相关应用包括哪些，现在让我们一起来看看吧！1、HTML：页面结构 2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果 3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能 外链式格式： 行内式格式： 二. 变量、数据类型及基本语法规范 1、变量定义 变量定义语法： var 变量名=值变量命名参考：2、数据类型 js分为6种数据类型， 用type
6.7笔记
HXHZYY的博客
06-07 175
JS特点：js是一种小型、轻量级、面向对象、跨平台的客户端脚本语言js是嵌入到浏览器软件当中的，只要你的电脑有浏览器就可以运行js程序js是面向对象的程序语言：在程序中，对象是由“属性”和“方法”构成JS作用：表单验证：js基本功能动态html网页：实现动态的、重复的效果交互式：人机交互，通过键盘或者鼠标输入，与网页中的元素进行交互变量1、变量的概念变量可以看成是一个“未知数”。X=30变量可以看成是一个“符号” “代号”变量指的程序当中的数据变量是运行在内存当中的变量是临时存在的数据，可以看成计算机内容中
JavaScript基础应用----消息对话框综合应用
这个函数可导的博客
12-05 201
所示的效果完成代码编写。
ema-john-server
03-28
综合来看，【ema-john-server】项目展示了一个完整的、基于Node.js和MongoDB的Web服务架构，利用JavaScript进行全栈开发。它体现了当前Web开发的主流趋势，即前后端分离、数据驱动和轻量化框架的运用。开发者需要对...
Music-player:https
04-30
项目以纯JavaScript（vanilla-javascript）开发，展现了JavaScript在构建交互式网页应用方面的强大能力。 【描述】中的关键知识点： 1. **音乐播放器**：这是一个用于在线播放音乐的软件，用户可以选择特定的艺术...
goblin-nabu
03-17
综合以上信息，我们可以推测 "goblin-nabu" 是一个用JavaScript编写的，基于Node.js的翻译服务项目。它提供了测试脚本来确保代码质量，可能包括与第三方翻译API的集成，以及自定义的翻译逻辑。用户或开发者可以通过...
Javascript教程--从入门到精通.rar
07-09
JavaScript教程——从入门到精通，这是一份专为想要学习或深入理解JavaScript编程语言的人们设计的综合资源。JavaScript，通常简称为JS，是互联网上最广泛使用的客户端脚本语言，用于实现网页的动态交互。它与HTML和...
Js应用大全
10-17
Js应用大全
经典的JavaScript应用！
01-12
经典的JavaScript应用！这个有很多JavaScript经典应用！适合学生或者开发人员！
javascript 常用应用
妙蛙真香的博客
10-30 647
js常用应用
javascript有什么用
hitpter的专栏
08-16 3468
首先，JavaScript是一种在浏览器中广泛使用的脚本语言，开发者可以方便地使用JavaScript来进行数据的存储和操作，无需学习额外的语言或工具。其次，JavaScript可以与HTML和CSS无缝地集成，开发者可以使用JavaScript来处理用户的交互和事件，实现动态的数据存储和操作。最重要的是，JavaScript在各种设备和平台上都得到了广泛的支持，可以实现跨平台的数据存储和操作，为开发者提供了更多的选择和灵活性。因此，掌握JavaScript的使用，对于Web开发人员来说是非常重要的。
JavaScript 1 （转）
weixin_33762130的博客
08-03 152
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript网页的行为 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记...
JavaScript (应用)
weixin_45948181的博客
02-01 604
js的日常使用足够了
Js基本运用
weixin_44119864的博客
06-13 309
Js基本运用
Javascript应用领域说明
jxsyuyxs的博客
08-26 209
5.跨平台开发：一些框架和库（如Electron和React Native）可以使用Javascript进行跨平台应用程序的开发，允许开发人员编写一次代码，然后将其用于多种平台。6.人工智能和机器学习：Javascript也可以用于人工智能和机器学习的开发。2.移动端开发：随着移动互联网的发展，Javascript也被广泛应用于移动端开发领域，如React Native等框架。4.服务器端开发：Node.js是一种Javascript运行环境，可以用于服务器端开发，可以实现高效、轻量级的后端服务。
Day28：安全开发-JS应用&原生开发&JQuery库&Ajax技术&前端后端&安全验证处理
最新发布
qq_61553520的博客
03-09 1242
小迪安全-Day28：安全开发-JS应用&原生开发&JQuery库&Ajax技术&前端后端&安全验证处理
综合安防管理平台配置手册-假日管理
在Web开发中，假日管理是一个关键功能，特别是在涉及到员工考勤和排班系统的应用中。在使用Go语言进行开发时，这部分通常涉及到数据库操作、前端界面设计以及与后端逻辑的交互。海康威视iVMS-8防管理平台软件的假日...
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值