`

jsp中js实现点击按钮更改背景图片

阅读更多
<script>	
function mychange(num){		
document.getElementById("div1").style.backgroundImage="url("+num+".jpg)";		
document.getElementById("div2").style.backgroundImage="url("+num+".jpg)";	
}</script>
</head>
<body>	
<div id="div1" style="height:200px; width:200px;background:#FF0000">这是第一个div</div>	
<div id="div2" style="height:200px; width:200px;background:#0000FF">这是第二个div</div>    
<input type="button" value="第一个按钮" onclick="mychange(1)" />    <input type="button" value="第二个按钮" onclick="mychange(2)" />    <input type="button" value="第三个按钮" onclick="mychange(3)" />
</body>
分享到:
评论

相关推荐

    vue实现点击按钮切换背景颜色的示例代码

    在Vue.js中,我们可以轻松地实现点击按钮切换背景颜色的功能。这个功能主要依赖于Vue的数据绑定和事件处理机制。以下是对给定代码的详细解释: 1. **数据绑定**:在Vue中,我们使用`v-bind`指令来绑定HTML元素的...

    jsp点击实现导出数据

    当你需要在JSP页面上实现“点击导出数据”功能时,实际上就是构建一个文件下载功能,让用户能够通过点击按钮来下载服务器上的数据。这个过程涉及到几个关键步骤,包括前端交互、后端处理以及文件流的控制。以下将...

    jsp js 轮播图多行滚动

    【标题】:“jsp js 轮播图多行滚动”是指在JSP页面中使用JavaScript实现一种动态展示多行图片或内容的轮播效果。这种技术常见于网站的首页、产品展示区等,用于吸引用户的注意力,展示大量信息。 【描述】:在JSP...

    JavaScript实现点击单选按钮改变输入框中文本域内容的方法

    再次,要实现点击单选按钮改变输入框内容的功能,通常需要利用JavaScript对DOM(文档对象模型)的操作。在文档中,通过为每个单选按钮添加onclick事件处理函数,并在事件触发时执行相应的函数,来实现不同的交互逻辑...

    JS实现表单中点击小眼睛显示隐藏密码框中的密码

    在网页表单设计中,为增强用户体验,有时会提供一种功能,允许用户通过点击一个小眼睛图标来切换显示或隐藏输入的密码。这篇文章将详细介绍如何使用JavaScript实现这一功能。该功能通常用于登录或其他涉及输入密码的...

    jquery左右按钮与选项卡按钮控制图片左右滚动

    "jQuery左右按钮与选项卡按钮控制图片左右滚动"是一个基于jQuery实现的图片滚动插件,它结合了选项卡功能,允许用户通过点击左右按钮或选项卡来切换图片。以下是关于这个主题的详细知识点: 1. **jQuery库**:...

    日历控件(jsp+js)

    本项目是基于JSP(JavaServer Pages)和JavaScript技术实现的一个日历控件。下面我们将深入探讨这两个技术以及它们如何结合创建这样的功能。 **JSP(JavaServer Pages)**: JSP是Java平台上的动态网页技术,它将...

    jsp图片投票系统

    可能还会使用到前端框架如jQuery或现代框架如Vue.js、React等来增强用户体验。 7. **错误处理与日志记录**:系统应能捕获并处理可能出现的异常,同时记录详细的日志信息,以便于后期的调试和问题定位。 8. **性能...

    springmvc+jsp 图片列表分页,可调整显示大小

    在这个场景中,我们讨论的是如何使用SpringMVC来处理图片数据,并通过JSP和JavaScript实现图片列表的分页功能,同时允许用户调整显示的图片大小。 首先,让我们深入了解一下SpringMVC的控制器层。在SpringMVC中,...

    点击一按钮表结构就增加一行--js代码

    当用户点击“增加一行”按钮时,JavaScript 函数 `insRow()` 将被调用,从而在表格中增加新的一行。新行包含文本输入框、下拉选择框等控件,用户可以在这些控件中输入数据。每次调用函数时,都会自动生成带有唯一...

    用jquery+jsp实现魔幻滑动注册表

    例如,当用户点击“添加字段”按钮时,我们可以使用`.append()`将新字段插入到表单中。 3. **事件处理**:jQuery的事件处理方式非常灵活,如`.on()`, `.click()`, `.change()`等。例如,我们可以在用户提交表单时...

    用jsp写的实现购物车

    同样,为每个商品提供一个删除按钮,点击后发送请求到服务器,JSP根据请求参数从购物车中移除相应商品。 7. 更新购物车 如果用户更改商品数量,JSP需要处理这个更新请求,重新计算购物车总价,并更新会话中的...

    JavaScript 点击页面上的按纽,弹出层,背景变灰

    为了实现点击按钮后弹出层出现且背景变灰,我们需要在JavaScript中添加事件监听器。以下是一个简单的实现: ```javascript document.getElementById('open-popup').addEventListener('click', function() { var ...

    网页常用的jsp和js脚本.pdf

    从给定的文件信息中,我们可以提炼出一系列与网页开发相关的JS和JSP知识点,主要集中在HTML元素事件处理、样式设计、以及简单的JavaScript功能实现上。以下是对这些知识点的详细解读: ### 1. HTML元素事件处理 在...

    ajax和JSP实现购物车

    **添加商品**:当用户点击“加入购物车”按钮时,Ajax发送一个包含商品信息的请求到服务器,JSP接收到请求后处理商品的添加操作,然后返回一个确认信息或错误消息。客户端根据返回的结果更新购物车显示。\n2. **...

    用js+css+jsp做的Tab分页

    在本案例中,JS用于处理用户交互,如点击Tab按钮时触发相应的事件,改变当前选中Tab的状态,以及加载或切换分页内容。 2. **CSS (Cascading Style Sheets)**:这是用于描述HTML或XML(包括如SVG、MathML等各种XML...

    灵活的js图片展示(含源码)

    在这个项目中,JavaScript将被用来控制图片的显示和隐藏,实现动画效果,以及处理用户的交互行为,如点击按钮切换图片。 3. **图片轮播机制**:幻灯片的核心机制是定时器(setTimeout或setInterval)配合数组索引来...

    jsp中点击图片弹出文件上传界面及预览功能的实现

    在JSP(Java Server Pages)页面中实现点击图片弹出文件上传界面并具有预览功能,是Web开发中经常遇到的需求,用于增强用户体验和界面互动性。下面是这个功能实现涉及的知识点详解。 1. HTML与JavaScript基础:实现...

    js 左右箭头实现图片或div内容切换

    本文将深入探讨如何使用JavaScript(JS)通过左右箭头来实现图片或div内容的切换。这一功能广泛应用于产品展示、轮播图、滑动面板等场景。 首先,我们需要在HTML中设置基本的结构。创建一个包含多个图片或div的容器...

    JSP实现打印功能

    在JSP中,这可以通过JavaScript来实现,因为JavaScript是运行在客户端浏览器上的脚本语言,可以与用户的交互更加直接。 以下是一个简单的示例,展示了如何在JSP中嵌入JavaScript代码以控制打印: ```jsp ; charset...

Global site tag (gtag.js) - Google Analytics