编写一个程序来制作一个可以改变颜色的html页面（网页设计）
1.编写一个程序来制作一个可以改变颜色的html页面，要求页面提供一个下拉式菜单，此菜单包括四种不同颜色的名称：红色、蓝色、绿色、黑色。当任意选择一种颜色名称，点击确认键...
1.编写一个程序来制作一个可以改变颜色的html页面，要求页面提供一个下拉式菜单，此菜单包括四种不同颜色的名称：红色、蓝色、绿色、黑色。当任意选择一种颜色名称，点击确认键，该html页面就会变为相应的背景色。
步骤：1、用dreamweaver设计网页的界面部分。
2、给网页添加javascript脚本代码，包括：
用function定义函数
定义相关的变量
在函数中获取下拉菜单输入的数据：document.表单名.表单元素名.value;根据用户选择的颜色，改变页面的背景色：document.bgcolor=”某种颜色”；可以用多个if语句或者switch语句
希望那位高手能将此代码写出来~~我会给予50分做酬谢！！！ 展开
步骤：1、用dreamweaver设计网页的界面部分。
2、给网页添加javascript脚本代码，包括：
用function定义函数
定义相关的变量
在函数中获取下拉菜单输入的数据：document.表单名.表单元素名.value;根据用户选择的颜色，改变页面的背景色：document.bgcolor=”某种颜色”；可以用多个if语句或者switch语句
希望那位高手能将此代码写出来~~我会给予50分做酬谢！！！ 展开
2个回答
展开全部
色彩的我没有,不过,改变图背景的我有,你可以试着扩展一下,下面是代码:
<html>
<head>
<title>Living Background</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}
function restore(){
document.body.style.backgroundImage=''
}
document.body.ondblclick=restore
-->
</script>
</p>
<p align="center"><span class="bgimages" onClick="tile();event.cancelBubble=true">
<img src="backgr1.jpg" height=96 width=96 border=2>
<img src="backgr2.jpg" height=96 width=96 border=2><br>
<img src="backgr3.jpg" height=96 width=96 border=2>
<img src="backgr4.jpg" height=96 width=96 border=2></span></p>
</td>
</tr>
</table>
</center>
</body>
</html>
你必须要做四个图片:backgr4.jpg backgr2.jpg backgr3.jpg backgr4.jpg
有了这四个图片后,你再把上面的代码另存一个网页看看效果.
<html>
<head>
<title>Living Background</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
}
function restore(){
document.body.style.backgroundImage=''
}
document.body.ondblclick=restore
-->
</script>
</p>
<p align="center"><span class="bgimages" onClick="tile();event.cancelBubble=true">
<img src="backgr1.jpg" height=96 width=96 border=2>
<img src="backgr2.jpg" height=96 width=96 border=2><br>
<img src="backgr3.jpg" height=96 width=96 border=2>
<img src="backgr4.jpg" height=96 width=96 border=2></span></p>
</td>
</tr>
</table>
</center>
</body>
</html>
你必须要做四个图片:backgr4.jpg backgr2.jpg backgr3.jpg backgr4.jpg
有了这四个图片后,你再把上面的代码另存一个网页看看效果.
参考资料： http://www.51maque.cn/myjs/htm/img/livebg.htm
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
博思aippt
2024-07-20 广告
作为深圳市博思云创科技有限公司的工作人员，对于Word文档生成PPT的操作，我们有以下建议：1. 使用另存为功能：在Word中编辑完文档后，点击文件->另存为，选择PowerPoint演示文稿（*.pptx）格式，即可将文档内容转换为PPT...
点击进入详情页
本回答由博思aippt提供
展开全部
记得给分!!!!!!!!!!
效果：点击页面上某一处的radioButton，页面上对应的区域的颜色改变。
页面部分代码：
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp = new XMLHttpRequest();
}
}
//发送更新颜色的请求
function getPart()
{
createXMLHttpRequest();
var timestamp = new Date().getTime();
var url = "/Project3_1_4/updatePartServer.jsp?timestamp="+timestamp;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = changePart;
xmlHttp.send(null);
}
//改变对应页面部分的颜色
function changePart()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)//信息已经成功返回，开始处理信息
{
var colorHex = xmlHttp.responseText;
//alert(choosePart());
document.getElementById(choosePart()).setAttribute('bgcolor',colorHex);
//alert(document.getElementById(choosePart()).getAttribute('bgcolor'));
}
}
}
//选择需要更新的部分
function choosePart()
{
var parts = document.getElementsByName('part');
for(i = 0; i < parts.length; i++)
{
if(parts[i].checked)
{
return parts[i].value;
}
}
}
</script>
</head>
<body>
请选择需要更新颜色的部分：<p>
<input type="radio" id="part" name="part" value="part1" onClick="getPart()">第一部分<br>
<input type="radio" id="part" name="part" value="part2" onClick="getPart()">第二部分<br>
<input type="radio" id="part" name="part" value="part3" onClick="getPart()">第三部分<br>
<input type="radio" id="part" name="part" value="part4" onClick="getPart()">第四部分<br>
<p>
<table border="1" width="400">
<tr>
<td height="100" bgColor="#FF0000" id="part1">第一部分</td><td height="100" bgColor="#FFFF00" id="part2">第二部分</td>
</tr>
<td height="100" bgColor="#0000FF" id="part3">第三部分</td><td height="100" bgColor="#C0C0C0" id="part4">第四部分</td>
<tr>
</tr>
</table>
</body>
</html>
服务器端的代码如下：
updatePartServer.jsp
<%@ page contentType="text/html;charset=GBK" %>
<%
int colorValue = 0;
String hexChars = "0123456789ABCDEF";
String hex = "";
for(int i=0;i<3;i++)
{
colorValue = new Double(255 * Math.random()).intValue();
int a = colorValue % 16;
int b = (colorValue - a)/16;
hex += hexChars.substring(b-1,b) + hexChars.substring(a-1,a);
}
out.write(hex);
%>
效果：点击页面上某一处的radioButton，页面上对应的区域的颜色改变。
页面部分代码：
index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Insert title here</title>
<script language="javascript" type="text/javascript">
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xmlHttp = new XMLHttpRequest();
}
}
//发送更新颜色的请求
function getPart()
{
createXMLHttpRequest();
var timestamp = new Date().getTime();
var url = "/Project3_1_4/updatePartServer.jsp?timestamp="+timestamp;
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = changePart;
xmlHttp.send(null);
}
//改变对应页面部分的颜色
function changePart()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)//信息已经成功返回，开始处理信息
{
var colorHex = xmlHttp.responseText;
//alert(choosePart());
document.getElementById(choosePart()).setAttribute('bgcolor',colorHex);
//alert(document.getElementById(choosePart()).getAttribute('bgcolor'));
}
}
}
//选择需要更新的部分
function choosePart()
{
var parts = document.getElementsByName('part');
for(i = 0; i < parts.length; i++)
{
if(parts[i].checked)
{
return parts[i].value;
}
}
}
</script>
</head>
<body>
请选择需要更新颜色的部分：<p>
<input type="radio" id="part" name="part" value="part1" onClick="getPart()">第一部分<br>
<input type="radio" id="part" name="part" value="part2" onClick="getPart()">第二部分<br>
<input type="radio" id="part" name="part" value="part3" onClick="getPart()">第三部分<br>
<input type="radio" id="part" name="part" value="part4" onClick="getPart()">第四部分<br>
<p>
<table border="1" width="400">
<tr>
<td height="100" bgColor="#FF0000" id="part1">第一部分</td><td height="100" bgColor="#FFFF00" id="part2">第二部分</td>
</tr>
<td height="100" bgColor="#0000FF" id="part3">第三部分</td><td height="100" bgColor="#C0C0C0" id="part4">第四部分</td>
<tr>
</tr>
</table>
</body>
</html>
服务器端的代码如下：
updatePartServer.jsp
<%@ page contentType="text/html;charset=GBK" %>
<%
int colorValue = 0;
String hexChars = "0123456789ABCDEF";
String hex = "";
for(int i=0;i<3;i++)
{
colorValue = new Double(255 * Math.random()).intValue();
int a = colorValue % 16;
int b = (colorValue - a)/16;
hex += hexChars.substring(b-1,b) + hexChars.substring(a-1,a);
}
out.write(hex);
%>
参考资料： http://holdbelief.javaeye.com/blog/221318
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
