使用prototype控制顯示／隱藏塊

最新推荐文章于 2025-06-30 11:47:43 发布
最新推荐文章于 2025-06-30 11:47:43 发布 · 85 阅读 · 0
文章标签：

#prototype #JavaScript #XHTML #HTML #ViewUI

本文介绍了一个支付流程配置页面的设计，包括交易类型、商品信息、邮寄方式等选项。通过这些配置可以灵活地设定不同的支付场景。 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form action="/vbao/externalBankPay.do?method=testExternal&" name="testExternal" id="testExternal" method="POST">
  <table width="80%" border="0" align="center" cellpadding="0"
		cellspacing="0">
    <tr>
      <td><table width="100%" border="0" align="center" cellpadding="0"
				cellspacing="0" class="lrd-3">
          <tr>
            <td height="125" align="left" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td colspan="3"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr>
                        <td height="40" class="font3"><div align="right">交易类型： </div></td>
                        <td height="40"><div align="left" class="font1">
                            <select name="tradeType" onchange="test_change()" id="tradeType">
                              <option value="1">即时到帐</option>
                              <option value="2">基于交易</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr bgcolor="#FFFFFF">
                        <td height="40" class="font3"><div align="right">商品名称： </div></td>
                        <td height="40"><div align="left">
                            <input type="text" name="goodsName" size="50" value="" >
                            <font color="red">*</font> </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr>
                        <td height="40" class="font3"><div align="right">商品单价： </div></td>
                        <td height="40"><input type="text" name="goodsPrice" size="50" value="" >
                          <font class="font3">元</font><font
								color="red">*</font> </td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postModeTr">
                        <td height="40" class="font3"><div align="right">邮寄方式： </div></td>
                        <td height="40"><div align="left">
                            <select name="postMode" onchange="test_change()" id="postMode">
                              <option value="1">平邮</option>
                              <option value="2">快递</option>
                              <option value="3">EMS</option>
                              <option value="4">不需要运输</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postTakeOnTr">
                        <td height="40" class="font3"><div align="right">邮费承担方式： </div></td>
                        <td height="40"><div align="left">
                            <select name="postTakeOn" onchange="test_change()" id="postTakeOn">
                              <option value="1">买方承担</option>
                              <option value="2">卖方承担</option>
                            </select>
                          </div></td>
                        <td height="40"> </td>
                      </tr>
                      <tr id="postFeeTr">
                        <td height="40" class="font3"><div align="right">邮费： </div></td>
                        <td height="40"><div align="left">
                            <input type="text" name="postFee" value="" id="postFee">
                            <font class="font3">元</font><font color="red">*</font> </div></td>
                        <td height="40"> </td>
                      </tr>
                    </table></td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </table>
</form>
<script type="text/javascript" src="prototype.js"></script>
<script   language="javascript">  
  <!--  
  test_change();
  function   test_change(){  
  	//Element.hide("t1","t2","t3"); 
	if($("tradeType").value == "1") 
	{
		Element.hide("postModeTr");
		Element.hide("postTakeOnTr");
		Element.hide("postFeeTr");
	}else 
	{
		Element.show('postModeTr')
		
		if($("postMode").value == "4")
		{
			Element.hide('postTakeOnTr');
			Element.hide('postFeeTr');
		}else
		{
			Element.show("postTakeOnTr");
			
			if($("postTakeOn").value == "2")
			{
			   Element.hide("postFeeTr");
			}else 
			{
				Element.show("postFeeTr");
			}
		}
	
	}  
  }  
  //-->  
  </script>
</body>
</html>
 
java中spring的使用
悦分享
11-19 2万+
java中spring的使用 　Spring是一个开源框架，框架的主要优势之一就是其分层架构，分层架构允许使用者选择使用哪一个组件，同时为 J2EE 应用程序开发提供集成的框架。Spring使用基本的JavaBean来完成以前只可能由EJB完成的事情。然而，Spring的用途不仅限于服务器端的开发。从简单性、可测试性和松耦合的角度而言，任何Java应用都可以从Spring中受益。Spring的核...
OpenLayers入门，OpenLayers使用瓦片加载事件实现瓦片加载进度条，进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
07-29 849
本章主要讲解OpenLayers如何使用瓦片加载事件（tileloadstart）、瓦片加载完成事件（tileloadend）以及瓦片加载错误事件（tileloadend）。并通过OpenLayers使用瓦片加载事件通过实现瓦片加载进度条的案例，实现进度条根据瓦片加载数量自动更新进度，加载完毕后隐藏进度条的控制，从而帮助大家快速上手和应用瓦片加载事件。
使用权限字符控制按钮显示或隐藏
weixin_69318049的博客
11-10 1687
若依框架权限字符控制按钮显示隐藏
vue项目 - 使用eventBus 设置某一功能模块的显示和隐藏
weixin_55042716的博客
06-16 670
vue项目组件使用的比较多，封装的组件， 然而有些功能模块某些页面可能用不到，则可以通过v-if设置显示隐藏， 如果组件嵌套过深，一层一层设置比较麻烦，可以使用eventbus 去设置显示于隐藏 步骤 1----->设置总线机制 // 一般设置在man.js中 import store from './store' Vue.prototype.eventBus = new Vue() 步骤2 ---->设置底边栏的页面 <div v-if="is_show">需要隐藏的模块&l
css 固定内容显示范围,css之让文字在一定范围内显示，不超过固定的宽度和高度...
weixin_31887861的博客
08-04 3281
首先我们设置类如：.STYLE1 { width:150px; height:80px;color: #000000; border:1px solid #FF0000;}解决让文字不超出CSS盒子的固定高宽我们只需要在此CSS类加入overflow:hidden;样式即可，加入后CSS类：.STYLE1 { width:150px; height:80px;color: #000000; bor...
wangEditor编辑器使用
qq_40017621的博客
04-25 5201
. wangEditor 编辑器的使用 通过 https://github.com/wangfupeng1988/wangEditor/releases 下载wangEditor文档 引入到项目中。 通过 <script type=”text/ script ” src=”/wangEditor.js”> 引入wangEditor.js到项目中 2.创建wangEdi...
『总结』web前端开发代码块
小僵尸喵喵喵
05-18 2464
『总结』web前端开发代码块 HTTPStatusCode 常见的状态码: HTTP: Status 200 – 服务器成功返回网页 HTTP: Status 404 – 请求的网页不存在 HTTP: Status 503 – 服务不可用 详解: 说明: HTTP Status 1xx (临时响应) ->表示临时响应并需要请求者继续执行操作的状态代码。 详细代码及说明...
Vue使用directives自定义指令实现“点击div以外区域隐藏盒子内容“功能
KangMino的博客
03-09 1962
官方文档介绍：自定义指令 主要就是利用vue指令的功能，获取所绑定元素的dom对象dom_A以及传递过来的回调方法fun_A，然后监听浏览器的mousedown和mouseup事件(mousedown作为辅助信息，真正触发传递的回调方法的是mouseup事件)，当前事件中鼠标位置对应的dom对象dom_B不属于dom_A，则代表鼠标点击了dom_A外部，触发clickoutside回调方法。 参考：vue自定义指令clickoutside使用以及扩展用法 element ui c...
JavaScript实现图片相册的随机显示功能
weixin_35826166的博客
06-30 1083
JavaScript是一种广泛应用于网页开发的脚本语言，用于增强用户界面的交互性和动态内容的创建。它能够让网页从静态的展示变为动态的交流平台。通过JavaScript，开发者可以控制网页的各个方面，包括DOM（文档对象模型）的操作、事件处理、以及对网页元素的样式和布局进行修改。Math对象提供了众多的方法和属性，覆盖了从基本的数学运算到更高级的数学函数。它包括了计算圆周率π的Math.PI，计算自然对数的底e的Math.E，以及计算三角函数的Math.sin()、Math.cos()等。
2021前端面试题
qq_35700455的博客
05-27 1950
1：vue-router 是什么？ 答：vue-router 是 vue 的路由插件 2：怎么定义 vue-router 的动态路由? 怎么获取传过来的值？ 答：在第一个页面调用 this.router.push(params)里面传参第二个页面通过this.router.push({params})里面传参 第二个页面通过this.router.push(params)里面传参第二个页面通过this.route.params获取参数 3：vue-router 有哪几种导航钩子? 1.导航钩
vue2超实用功能-可修改标题、点击显示全部，折叠内容、自定时间线显示、文字超出隐藏、数组去重、多版本依赖、特效网站、文字走马灯组件、el-scrollbar滚动条、vue监听（持续更新中）、环境变量
Shi_haoliu的博客
07-13 1026
vue2超实用功能-可修改的标题框。 点击按钮显示全部，或者折叠内容。 自定时间线显示。 文字超出隐藏。 使用el-menu，默认展示其中某个内容，不使用default-openeds。 toFixed保留小数。（判断数据类型） 在添加依赖的时候 使用不同的依赖版本（示例为echarts）和强制定义下载地址（本地依赖库）。 文字走马灯组件。 el-scrollbar滚动条。 vue深度监听 vue调用本地配置环境变量
手风琴菜单设计：Prototype+CSS实现教程
3. **JavaScript交互**：使用JavaScript（在这种情况下，可能是结合Prototype框架）来监听用户交互事件（比如点击），进而切换CSS类，从而控制手风琴项的显示和隐藏。 ### 知识点三：结合Prototype和CSS实现手风琴...
【白嫖党】如何把前端学好？看完这篇，直呼：太强了！（历经半个月之作）
热门推荐
超逸の学习技术博客
04-04 2万+
很少有文章做到将知识形成一个体系，于是需要翻阅很多资料，但这篇文章做到了！共34815字数。
ElementUI中使用富文本编辑器(quill-editor）实现图片视频上传，图片拖拽和缩放，以及菜单悬停显示中文和表情包
m0_61820867的博客
07-28 4671
介绍了ElementUI中使用富文本编辑器(quill-editor），优化有些功能（图片缩放，拖拽）视频上传回显以及菜单悬停显示中文以及表情包
含中间直流的三相电力电子变压器PET仿真模型（Simulink仿真实现）
12-16
含中间直流的三相电力电子变压器PET仿真模型（Simulink仿真实现）内容概要：本文档介绍了含中间直流环节的三相电力电子变压器（PET）的Simulink仿真模型，重点在于构建和模拟PET系统的核心结构与工作原理。该仿真模型涵盖了PET的前级整流、中间直流环节以及后级逆变部分，能够实现电能的高效转换与隔离，适用于研究PET在智能电网、新能源接入等场景下的动态特性与控制策略。通过Simulink平台，用户可对系统进行稳态与暂态性能分析，验证控制算法的有效性。; 适合人群：电气工程、电力电子及相关专业的高校师生、科研人员以及从事电力系统仿真的工程技术人员。; 使用场景及目标：①用于教学演示电力电子变压器的工作原理；②支撑科研项目中对PET控制策略（如电压、电流双闭环控制）的设计与验证；③为新型电力系统中电能变换装置的开发提供仿真基础。; 阅读建议：建议结合电力电子技术基础知识学习本仿真模型，重点关注各模块的参数设置与控制逻辑实现，建议动手搭建模型并进行仿真实验，以加深对PET系统运行机制的理解。
考虑柔性负荷的综合能源系统低碳经济优化调度【考虑碳交易机制】（Matlab代码实现）
最新发布
12-16
考虑柔性负荷的综合能源系统低碳经济优化调度【考虑碳交易机制】（Matlab代码实现）内容概要：本文围绕“考虑柔性负荷的综合能源系统低碳经济优化调度”展开，重点研究在碳交易机制下如何实现综合能源系统的低碳化与经济性协同优化。通过构建包含风电、光伏、储能、柔性负荷等多种能源形式的系统模型，结合碳交易成本与能源调度成本，提出优化调度策略，以降低碳排放并提升系统运行经济性。文中采用Matlab进行仿真代码实现，验证了所提模型在平衡能源供需、平抑可再生能源波动、引导柔性负荷参与调度等方面的有效性，为低碳能源系统的设计与运行提供了技术支撑。; 适合人群：具备一定电力系统、能源系统背景，熟悉Matlab编程，从事能源优化、低碳调度、综合能源系统等相关领域研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究碳交易机制对综合能源系统调度决策的影响；②实现柔性负荷在削峰填谷、促进可再生能源消纳中的作用；③掌握基于Matlab的能源系统建模与优化求解方法；④为实际综合能源项目提供低碳经济调度方案参考。; 阅读建议：建议读者结合Matlab代码深入理解模型构建与求解过程，重点关注目标函数设计、约束条件设置及碳交易成本的量化方式，可进一步扩展至多能互补、需求响应等场景进行二次开发与仿真验证。
大学怎样用AI工具3分钟生成技术成熟度报告？.docx
12-16
大学怎样用AI工具3分钟生成技术成熟度报告？
【云原生运维】基于Kubernetes的CI/CD全流程自动化：Spring Boot应用在容器化环境下的持续集成与部署实践
12-16
内容概要：本文详细展示了在Kubernetes环境下实现CI/CD全流程的完整示例，涵盖从代码提交、自动化构建、测试、安全扫描到多环境部署的各个环节。技术栈包括GitLab CI、Docker、Helm、Kustomize、Trivy等工具，并以Spring Boot应用为例，提供了Dockerfile、Kubernetes资源配置、Helm Chart结构以及蓝绿部署、金丝雀发布等高级部署策略的具体实现。同时，文章还介绍了GitOps（ArgoCD）、HPA自动扩缩容、Prometheus监控告警等增强能力，并强调了安全性、可靠性、可观测性和成本优化的最佳实践。; 适合人群：具备一定Kubernetes、容器化和DevOps基础知识，从事后端开发、运维或平台工程的技术人员，尤其是希望落地标准化CI/CD流程的团队成员； 使用场景及目标：①构建基于Kubernetes的企业级持续交付流水线；②实现安全可控的多环境自动化部署；③集成监控告警与弹性伸缩机制提升系统稳定性；④推动GitOps理念在团队中的实践落地； 阅读建议：建议结合实际Kubernetes集群环境，逐步复现文档中的各个步骤，重点关注CI/CD配置逻辑、部署策略差异及最佳实践部分，并将其适配到自身项目体系中进行持续优化。
【分布式系统】基于Redis的Session集中存储方案：实现Web服务器高可用与横向扩展
12-16
内容概要：本文介绍了基于Redis实现分布式Session的解决方案，重点阐述了将Session集中存储于Redis集群的技术思路与优势。文中指出，传统的tomcat-redis-session-manager仅适用于Tomcat容器层的HttpSession同步，存在应用层适配局限；相比之下，推荐使用Spring Session与Redis结合的方式，实现更灵活的应用层Session管理。通过将sessionId作为key、session数据作为value存储在Redis中，可在多台应用服务器间共享Session，确保高可用性和横向扩展能力。同时，文章对比了多种保证Session一致性的架构方案，包括Session同步法、客户端存储法、反向代理Hash一致性以及后端统一存储法，并强调后端统一存储为最优选择。; 适合人群：具备Java Web开发基础，熟悉分布式架构、Redis及Session机制的1-3年经验后端研发人员； 使用场景及目标：①解决传统Web服务器集群中Session不一致问题；②实现服务无状态化设计，提升系统可扩展性与容灾能力；③在微服务或负载均衡环境下构建统一的Session管理中心； 阅读建议：学习时应结合Spring Session实际集成案例，理解其与Redis的协作机制，并深入掌握不同Session共享方案的适用边界与设计权衡。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值