<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="CSS/reset.css" type="text/css">
<title>html案例练习</title>
<!-- 动态显示时间-->
<style type="text/css">
.time {
padding-top: 5px;
padding-bottom: 5px;
width: 360px;
height: 30px;
border: 1px dashed red;
}
</style>
<!-- 全选练习-->
<style type="text/css">
.selectAll {
padding-top: 5px;
padding-bottom: 5px;
width: 260px;
height: 140px;
border: 1px solid blue;
padding-left: 100px;
}
</style>
<!-- 左右添加删除练习-->
<style type="text/css">
.addOrDel {
width: 360px;
height: 195px;
border: 1px solid green;
}
.selectLeft {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 87px;
width: 90px;
height: 185px;
border: 1px dashed green;
}
.selectRight {
float: right;
padding-top: 5px;
padding-bottom: 5px;
width: 180px;
height: 185px;
border: 1px dashed green;
}
#leftList {
width: 90px;
height: 135px;
}
#rightList {
width: 90px;
height: 135px;
}
</style>
<!-- 省市联动 -->
<style type="text/css">
.provinceAndCity {
padding-top: 5px;
padding-bottom: 5px;
width: 360px;
height: 22px;
border: 1px dashed red;
}
#province {
margin-left: 90px;
}
#city {
margin-left: 10px;
}
</style>
<!-- 动态生成表格 -->
<style type="text/css">
.createTable{
padding-top: 5px;
padding-bottom: 5px;
width: 360px;
height: 300px;
border: 1px solid orange;
}
.dataForm{
padding-left: 80px;
height: 70px;
border-bottom: 1px solid orange;
}
.resultShow{
height: 220px;
border: 1px dashed black;
margin-left: 30px;
margin-right: 30px;
}
</style>
</head>
<body>
<!-- 1.动态显示时间 -->
<div class="time">
<h1 id="showDate">
</h1>
</div>
<!-- 2.全选练习 -->
<div class="selectAll">
<input type="checkbox" id="selOrNo" onclick="selectAllOrNot();">全选/全不选
<br/>
<input type="checkbox" name="like">足球
<br/>
<input type="checkbox" name="like">篮球
<br/>
<input type="checkbox" name="like">排球
<br/>
<input type="checkbox" name="like">羽毛球
<br/>
<input type="checkbox" name="like">乒乓球
<br/>
<input type="button" value="全选" id="selectALL" onclick="selectALL();">
<input type="button" value="全不选" id="selectNot" onclick="selectNot();">
<input type="button" value="反选" id="selectOther" onclick="selectOther();">
</div>
<!-- 3.左右添加删除练习 -->
<div class="addOrDel">
<div class="selectRight">
<select name="rightList" id="rightList" multiple="multiple">
<option value="Australia">澳大利亚</option>
<option value="Australia">美利坚合众国</option>
</select>
<br/>
<input type="button" value="删除全部项" onclick="delAll()" style="width:90px">
<input type="button" value="删除选中项" onclick="delSelect()" style="width:90px">
</div>
<div class="selectLeft">
<select name="leftList" id="leftList" multiple="multiple">
<option value="China">中国</option>
<option value="America">美国</option>
<option value="Japan">日本</option>
<option value="Germany">德国</option>
<option value="France">法国</option>
<option value="British">英国</option>
</select>
<br/>
<input type="button" value="添加全部项" onclick="addAll()" style="width:90px">
<input type="button" value="添加选中项" onclick="addSelect()" style="width:90px">
</div>
</div>
<!-- 4.省市联动 -->
<div class="provinceAndCity">
<select name="province" id="province" onchange="proSelect(this.value)">
<option value="0" selected>选择省/市</option>
<option value="beijing" name="prov">北京市</option>
<option value="tianjin" name="prov">天津市</option>
<option value="hebei" name="prov">河北省</option>
</select>
<select name="city" id="city">
<option value="0" selected>选择市/区</option>
</select>
</div>
<!-- 5.动态生成表格 -->
<div class="createTable">
<div class="dataForm">
行：<input type="text" id="row"/>
<br/>
列：<input type="text" id="col"/>
<br/>
<input type="button" value="生成" onclick="createTable()"/>
</div>
<div id="resultShow" class="resultShow">
</div>
</div>
</body>
<!-- 动态生成表格 -->
<script type="text/javascript">
function createTable(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var htmlCode = "<table border='1px' bordercolor='blue'>";
for (var i = 0;i < row; i++){
htmlCode += "<tr>";
for(var j = 0;j < col;j++){
htmlCode += "<td>a</td>";
}
htmlCode += "</tr>";
}
htmlCode += "</table>";
var resultShowTag = document.getElementById("resultShow");
resultShowTag.innerHTML = htmlCode;
}
</script>
<!-- 省市联动 -->
<script type="text/javascript">
//数组形式存储数据
var beijing = ["东城区", "西城区", "通州区", "朝阳区", "海淀区", "丰台区",
"大兴区", "昌平区", "顺义区", "怀柔区", "平谷区", "延庆,区", "石景山区",
"房山区", "密云区"];
var tianjin = ["和平区", "河北区", "河东区", "河西区", "南开区", "红桥区", "东丽区",
"西青区", "津南区", "北辰区", "武清区", "宝坻区", "滨海新区", "宁河区", "静海区",
"蓟州区"];
var hebei = ["石家庄", "唐山", "秦皇岛", "邯郸", "邢台", "保定", "张家口", "承德",
"沧州", "廊坊", "衡水"];
function proSelect(val) {
var city = document.getElementById("city");
var cityOption = city.getElementsByTagName("option");
if (cityOption.length != 1) {
for (var j = 1; j < cityOption.length; j++) {
city.removeChild(cityOption[j]);
j--;
}
}
switch (val) {
case "beijing":
for (var i = 0; i < beijing.length; i++) {
var cityName = beijing[i];
var optionTag = document.createElement("option");
var text = document.createTextNode(cityName);
optionTag.appendChild(text);
city.appendChild(optionTag);
}
break;
case "tianjin":
for (var i = 0; i < tianjin.length; i++) {
var cityName = tianjin[i];
var optionTag = document.createElement("option");
var text = document.createTextNode(cityName);
optionTag.appendChild(text);
city.appendChild(optionTag);
}
break;
case "hebei":
for (var i = 0; i < hebei.length; i++) {
var cityName = hebei[i];
var optionTag = document.createElement("option");
var text = document.createTextNode(cityName);
optionTag.appendChild(text);
city.appendChild(optionTag);
}
break;
}
}
</script>
<!-- 左右添加删除练习 -->
<script type="text/javascript">
var leftList = document.getElementById("leftList");
var rightList = document.getElementById("rightList");
var leftListValue = leftList.options;
var rightListValue = rightList.options;
function addAll() {
for (var i = 0; i < leftListValue.length; i++) {
var value = leftListValue[i];
rightList.appendChild(value);
i--;
}
}
function addSelect() {
for (var i = 0; i < leftListValue.length; i++) {
var value = leftListValue[i];
if (value.selected == true) {
rightList.appendChild(value);
i--;
}
}
}
function delAll() {
for (var i = 0; i < rightListValue.length; i++) {
var value = rightListValue[i];
leftList.appendChild(value);
i--;
}
}
function delSelect() {
for (var i = 0; i < rightListValue.length; i++) {
var value = rightListValue[i]
if (value.selected == true) {
leftList.appendChild(value);
i--;
}
}
}
</script>
<!-- 全选练习 -->
<script type="text/javascript">
var selOrNo = document.getElementById("selOrNo");
function selectAllOrNot() {
var selLike = document.getElementsByName("like");
for (var i = 0; i < selLike.length; i++) {
if (selOrNo.checked == false) {
selLike[i].checked = false;
} else {
selLike[i].checked = true;
}
}
}
function selectALL() {
selOrNo.checked = true;
var selLike = document.getElementsByName("like");
for (var i = 0; i < selLike.length; i++) {
selLike[i].checked = true;
}
}
function selectNot() {
selOrNo.checked = false;
var selLike = document.getElementsByName("like");
for (var i = 0; i < selLike.length; i++) {
selLike[i].checked = false;
}
}
function selectOther() {
selOrNo.checked = false;
var selLike = document.getElementsByName("like");
for (var i = 0; i < selLike.length; i++) {
if (selLike[i].checked == false) {
selLike[i].checked = true;
} else {
selLike[i].checked = false;
}
}
}
</script>
<!-- 动态显示时间 -->
<script type="text/javascript">
function setTime() {
var showDate = document.getElementById("showDate");
var date = new Date().toLocaleString();
showDate.innerHTML = date;
}
window.setInterval("setTime();", 1000);
</script>
</html>html总结之动态显示时间、全选、左右添加、省市联动、动态表格生成
猜你喜欢
转载自blog.csdn.net/lingyudeai/article/details/80201595
今日推荐
周排行