JavaScript——练习题(2)
程序员文章站
2022-04-05 19:10:41
...
一、制作四季连接，并设置前进后退连接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
function reload(){
parent.location.reload();
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>
<img src="img/QQ截图20200918160056.png"/>
</td>
<td>
<img src="img/QQ截图20200918160108.png" />
</td>
</tr>
<tr>
<td align="center">
<a href="suberframe/spring.html">春</a>
</td>
<td align="center">
<a href="suberframe/summer.html">夏</a>
</td>
</tr>
<tr>
<td>
<img src="img/QQ截图20200918160121.png" />
</td>
<td>
<img src="img/QQ截图20200918160131.png" />
</td>
</tr>
<tr>
<td align="center">
<a href="suberframe/autumn.html">秋</a>
</td>
<td align="center">
<a href="suberframe/winter.html">冬</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="" onclick="reload()">刷新本页</a>
</td>
</tr>
</table>
</body>
</html>
二、制作折叠导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
li{
list-style: none;
}
</style>
<script>
function show(){
if(document.getElementById("son").style.display=='block'){
document.getElementById("son").style.display='none';
}else{
document.getElementById("son").style.display='block';
}
}
function show1(){
if(document.getElementById("son1").style.display=='block'){
document.getElementById("son1").style.display='none';
}else{
document.getElementById("son1").style.display='block';
}
}
function show2(){
if(document.getElementById("son2").style.display=='block'){
document.getElementById("son2").style.display='none';
}else{
document.getElementById("son2").style.display='block';
}
}
function show3(){
if(document.getElementById("son3").style.display=='block'){
document.getElementById("son3").style.display='none';
}else{
document.getElementById("son3").style.display='block';
}
}
</script>
</head>
<body>
<b><img src="img/fold.gif" />树形菜单</b>
<ul onclick="show()">
<li><img src="img/fclose.gif"/>文学艺术</li>
</ul>
<ul id="son">
<li>
<img src="img/doc.gif" />先锋写作
</li>
<li>
<img src="img/doc.gif" />小说散文
</li>
<li>
<img src="img/doc.gif" />诗风词韵
</li>
</ul>
<ul onclick="show1()">
<li><img src="img/fclose.gif"/>贴图专区</li>
</ul>
<ul id="son1">
<li>
<img src="img/doc.gif" />真我风采
</li>
<li>
<img src="img/doc.gif" />视频贴图
</li>
<li>
<img src="img/doc.gif" />行行摄摄
</li>
<li>
<img src="img/doc.gif" />Flash贴图
</li>
</ul>
<ul onclick="show2()">
<li><img src="img/fclose.gif"/>房产论坛</li>
</ul>
<ul id="son2">
<li>
<img src="img/doc.gif" />金鳞地产
</li>
<li>
<img src="img/doc.gif" />紫峰地产
</li>
<li>
<img src="img/doc.gif" />畅威地产
</li>
</ul>
<ul onclick="show3()">
<li><img src="img/fclose.gif"/>娱乐八卦</li>
</ul>
<ul id="son3">
<li>
<img src="img/doc.gif" />范冰冰
</li>
<li>
<img src="img/doc.gif" />杨幂
</li>
<li>
<img src="img/doc.gif" />杨洋
</li>
</ul>
</body>
</html>
三、实现图片的鼠标悬转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#compute2{
display: none;
}
#phone{
display: none;
}
#phone2{
display: none;
}
</style>
<script>
function showPhone1(){
document.getElementById("compute1").style.display="none";
document.getElementById("compute2").style.display="block";
document.getElementById("compute").style.display="none";
document.getElementById("phone2").style.display="block";
document.getElementById("phone1").style.display="none";
document.getElementById("phone").style.display="block";
}
function showPhone2(){
document.getElementById("compute1").style.display="block";
document.getElementById("compute2").style.display="none";
document.getElementById("compute").style.display="block";
document.getElementById("phone2").style.display="none";
document.getElementById("phone1").style.display="block";
document.getElementById("phone").style.display="none";
}
</script>
</head>
<body>
<div>
<table>
<tr>
<td><img src="img/left1.jpg" id="compute1"/><img src="img/left2.jpg" id="compute2" onmouseover="showPhone2()"/></td>
<td><img src="img/right1.jpg" id="phone1" onmouseover="showPhone1()"/><img src="img/right2.jpg" id="phone2"/></td>
</tr>
<tr>
<td colspan="2">
<img src="img/end1.jpg" id="compute"/>
<img src="img/end2.jpg" id="phone"/>
</td>
</tr>
</table>
</div>
</body>
</html>
四、实现复选框的全选功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子商品</title>
<script>
function allselect(){
var products=document.getElementsByName("product");
for(var i=0;i<products.length;i++){
if(document.getElementById("all").checked==true){
products[i].checked=true;
}else{
products[i].checked=false;
}
}
}
</script>
</head>
<body>
<div>
<table style="text-align: center;" align="center">
<tr style="background-image: url(img/素材/list_bg.gif);">
<th><br /><br /><br /><input type="checkbox" id="all" onclick="allselect()" />全选</th>
<th><br /><br /><br />商品图片</th>
<th><br /><br /><br />商品名称/出售者/联系方式</th>
<th><br /><br /><br />价格</th>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" name="product"/></td>
<td><img src="img/素材/list1.jpg" /></td>
<td>
<p>杜比环绕，家庭影院必备，超真实享受</p>
<p>出售者：ling112233</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价：</p>
<p>2833.0</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" name="product" /></td>
<td><img src="img/素材/list2.jpg" /></td>
<td>
<p>NVDIA 9999GT 512MB 256bit*显卡，不容错过</p>
<p>出售者：aipiaopiao110</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价：</p>
<p>2460.0</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" name="product" /></td>
<td><img src="img/素材/list3.jpg" /></td>
<td>
<p>精品热卖：高清晰，30寸等离子电视</p>
<p>出售者：阳光的挣扎</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价：</p>
<p>18880</p>
</td>
</tr>
<tr style="text-align: center;" align="center">
<td><input type="checkbox" name="product" /></td>
<td><img src="img/素材/list4.jpg" /></td>
<td>
<p>Sony索尼家用最新款笔记本</p>
<p>出售者：疯狂的镜无</p>
<p><img src="img/素材/online_pic.gif" /><img src="img/素材/addfav.gif"/>收藏</p>
</td>
<td>
<p>一口价：</p>
<p>5889.0</p>
</td>
</tr>
</table>
</div>
<div>
<table align="center">
<tr>
<td>友情链接：百度 | Google | 雅虎 | 淘宝 | 拍拍 | 易趣 | 当当 | 京东商城 | 迅雷 | 新浪 | 网易 | 搜狐 | 猫扑 | 开心网 | 新华网 | 凤凰网 </td>
</tr>
</table>
</div>
</body>
</html>
五、增加行与删除行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.title{
background-color: gray;
font-size: 28px;
font-family: 隶书;
}
</style>
<script>
function changeTitles(){
var row1=document.getElementById("row1");
row1.setAttribute("style","font-size: 28px; background-color: gray;")
}
function deleteRow(){
var dNode=document.getElementById("row2");
dNode.parentNode.removeChild(dNode);
}
function cloneNode1(){
var row4=document.getElementById("row4");
var newNode=row4.cloneNode(true);
document.getElementById("t").appendChild(newNode);
}
function addRow(){
var newRow=document.getElementById("t").insertRow(2);
var col1=newRow.insertCell();
col1.innerHTML="幸福从天而降";
var col2=newRow.insertCell();
col2.innerHTML="￥18.50";
}
</script>
</head>
<body>
<table id="t" border="1">
<tr id="row1">
<td>书名</td>
<td style="text-align: center;">价格</td>
</tr>
<tr>
<td>看得见风景的房间</td>
<td style="text-align: center;">¥30.00</td>
</tr>
<tr id="row2">
<td>幸福从天而降</td>
<td style="text-align: center;">¥18.50</td>
</tr>
<tr>
<td>幸福从天而降</td>
<td style="text-align: center;">¥18.50</td>
</tr>
<tr id="row4">
<td>60个瞬间</td>
<td style="text-align: center;">¥32.00</td>
</tr>
</table>
<input type="button" value="增加一行" onclick="addRow()"/>
<input type="button" value="删除第2行" onclick="deleteRow()"/>
<input type="button" value="改变标题样式" onclick="changeTitles()"/>
<input type="button" value="复制最后一行" onclick="cloneNode1()"/>
</body>
</html>
六、增加与删除商品
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
text-align: center;
width: 600px;
}
</style>
<script>
function calculate(){
var addTable=document.getElementById("t");
var row_index=addTable.rows.length-1;
newRow.id="row"+row_index;
}
function addRow(){
var newRow=document.getElementById("t").insertRow(2);
var col1=newRow.insertCell();
col1.innerHTML="抗疲劳神奇钛项圈";
col1.align="center";
var col2=newRow.insertCell();
col2.innerHTML="5";
col2.align="center";
var col3=newRow.insertCell();
col3.innerHTML="￥49.00";
col3.align="center";
var col4=newRow.insertCell();
col4.innerHTML="<input type='button' value='删除'/>";
col4.align="center";
calculate();
}
var deleteBtn=function(btn){
btn.parentElement.parentElement.remove();
}
</script>
</head>
<body>
<table border="1" id="t">
<tr style="background-color: gray">
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>￥568.50</td>
<td>
<input type="button" value="删除" onclick="deleteBtn(this)"/>
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>2</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除" />
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>3</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>4</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="增加订单" onclick="addRow()"/>
</td>
</tr>
</table>
</body>
</html>
七、商品数量的修改和删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
text-align: center;
width: 600px;
}
</style>
<script>
function calculate(){
var addTable=document.getElementById("t");
var row_index=addTable.rows.length-1;
newRow.id="row"+row_index;
}
function addRow(){
var newRow=document.getElementById("t").insertRow(2);
var col1=newRow.insertCell();
col1.innerHTML="抗疲劳神奇钛项圈";
col1.align="center";
var col2=newRow.insertCell();
col2.innerHTML="5";
col2.align="center";
var col3=newRow.insertCell();
col3.innerHTML="￥49.00";
col3.align="center";
var col4=newRow.insertCell();
col4.innerHTML="<input type='button' value='删除'/>";
col4.innerHTML="<input type='button' value='修改' id='but1' οnclick='showbutton2()'/>";
col4.innerHTML="<input type='button' value='确定' id='but2' οnclick='showbutton1()'/>";
col4.align="center";
calculate();
}
var deleteBtn=function(btn){
btn.parentElement.parentElement.remove();
}
function showbutton1(){
document.getElementById("but1").style.display="block";
document.getElementById("but2").style.display="none";
}
function showbutton2(){
document.getElementById("but1").style.display="none";
document.getElementById("but2").style.display="block";
}
</script>
</head>
<body>
<table border="1" id="t">
<tr style="background-color: gray">
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>防滑真皮休闲鞋</td>
<td>12</td>
<td>￥568.50</td>
<td>
<input type="button" value="删除" />
<input type="button" value="修改" id="but1" onclick="showbutton2()"/>
<input type="button" value="确定" id="but2" onclick="showbutton1()"/>
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>2</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除" />
<input type="button" value="修改"/>
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>3</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr>
<td>抗疲劳神奇钛项圈</td>
<td>4</td>
<td>￥49.00</td>
<td>
<input type="button" value="删除"/>
<input type="button" value="修改"/>
</td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="增加订单" onclick="addRow()"/>
</td>
</tr>
</table>
</body>
</html>
本次为JavaScript的练习题，如有错误请大家指正。
上一篇： tomcat集群负载均衡配置