以下示例均为html文件,保存至本地就可直接用浏览器打开以查看效果\(^o^)/~

练习一:设置新闻字体

 <!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>
<style type="text/css">
a:link,a:visited{
text-decoration:none;//取消下划线
}
#newsText{
border: #CC0033 double 2px;
width:800px;
}
p{
text-indent:2em;//首行缩进
}
.max{
font-size:36px;
color:#666699;
}
.mid{
font-size:18px;
color:#6666FF;
}
.min{
font-size:13px;
color:#3399FF;
}
</style>
</head>
<body>
<script type="text/javascript">
function changeFont(className){
var divNode = document.getElementById("newsText");
divNode.className = className;
}
</script>
<h2 style="color:#FF0000">【念念有余】马云的达摩院想干嘛?</h2>
<a href="javascript:void(0)" onclick="changeFont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changeFont('mid')">中字体</a>
<a href="javascript:void(0)" onclick="changeFont('min')">小字体</a>
<hr style="border:#99FF00 solid 1px"/>
<div id="newsText">
<p>
两个着传统武打装扮的年轻人,斜步蹲身,一起擎出一个硕大的牌匾来,中间三个遒劲有力的字正是“达摩院”。
</p>
<p><img src="http://p0.ifengimg.com/pmop/2017/1014/BC710B82FEC535D27C6728240C1B20ED367433A7_size34_w500_h333.jpeg"/></p>
<p>马云说,要搞电商,于是有了阿里巴巴;马云说,要有网上支付,于是有了支付宝,有了蚂蚁金服;
马云说,要有云计算,于是到处是云计算。现在马云说,要有达摩院,于是,达摩院的牌子挂起来了。
</p>
<p>
10月11日开幕的2017云栖大会吸引了4万人之众,人们把这场大会当做一场嘉年华,会场外,男人女人们,
像游客一样撑起自拍杆,阿里帝国已经大到了令人咋舌的地步,批量创造着千万富翁。马云称阿里已经是世界上第21大经济体,
未来要做第5大经济体。大会上人们记得最真切的是有“外星人”之称的马云说要投资1000亿元建立达摩院。达摩院就是实验室。
马云为达摩院命名,当年马云同样为天猫命名。
</p>
<p>
“达摩院”这个名字很有阿里特色,达摩是一个佛教人物,民间常称其为达摩祖师,南印度人,自称佛传禅宗第二十八祖,
为中国禅宗始祖。负责达摩院的是阿里CTO张建锋,诨名行癫。马云号风清扬,阿里有头脸的人物都有一个江湖诨名,
就跟梁山泊一百零八将一样,连诨名都没有,估计这人在阿里也就没什么地位。
</p>
<p>
如果将一些典故或者武侠背景联系起来,就会明白,达摩院其实是藏经阁,这里将会发明各种必杀之技,未来也不知道会怎么样,
但大家都明白,谁掌握了技术,就会像大航海时代的殖民者一样,以少胜多。
</p>
<p>
但是必杀技哪里会那么简单?到了一定程度就会有瓶颈,一定不是现有水平的修修补补,而是牵涉到基础科学、基础技术,
越是处于领先地位的企业,越是走得靠前的企业,他们离天花板就越近,看得越清晰。这就是为什么国际顶尖企业会做顶尖研究,
他们有财力有眼力,还有能力。
</p>
<p>
“达摩院”首批公布的研究领域包括:量子计算、机器学习、基础算法、网络安全、视觉计算、自然语言处理、
下一代人机交互、芯片技术、传感器技术、嵌入式系统等,涵盖机器智能、智联网、金融科技等多个产业领域。
名目繁多,似乎无所不包,这里面可以看到马云的野心,这也显示了马云和阿里一个非常重要变化——由“术”向“道”。
</p>
<p>
马云说,阿里成立七八年的时候,他坚决反对公司有任何研究室、实验室的,因为当时阿里是一个初创公司,
公司在还没有立足之前就考虑研发是大灾难。阿里的做法一直是问题导向,遇到什么问题,需要什么,就组织工作人员去攻关。
</p>
<p>
马云多次说过,如果他是技术人员,一开始就知道会有这么多难题,估计就会退缩,就不会有现在的阿里巴巴、蚂蚁金服。
阿里现在不仅是遇到问题就组织科研人员去攻关,而是四处开拓疆土,看看有什么领域比较有机会。前者目的性很强,是问题导向,
后者则是四处撒网,花钱多但不一定有结果。
</p>
<p>
像这些比较基础的科研,一般是高校和科研院所承担,这些机构背后买单者是政府,这是政府要承担的职能之一,
因为这些研发大多是没有收益的,但对社会会比较有帮助,让单个企业承担的成本太高。这表明阿里已经不再担忧生存问题,愿意承担一部分政府承担的责任。
</p>
<p>
有不少人认为,阿里这次投入,只是一场作秀,科技不可能拔毛助长,不可能投进去很多钱,就能大跃进。
不过公众应该去想一想,像阿里这样精明的企业,怎么会愿意做折本买卖?
</p>
<p>
阿里现在的规模已足够大,护城墙也足够高,危险来自未来,如果不下足功夫研究,一旦被竞争对手掌握,
就有可能被秒杀。即使像腾讯这样规模的还面临从QQ到微信的惊险一跃,就跟苏宁和京东的竞争一样,一旦落后下去,就很难追赶了。
</p>
<p>
马云说贝尔、IBM的实验室曾经创造辉煌,可这种工业时代的实验室模式已经没落了。他认为达摩院科研的目标不仅仅是FUN,
也不仅是PROFIT,而是问题导向,以解决问题为目标。
</p>
<p>
达摩院似乎是一个独立经营个体,就像很多研发机构也能最终上市一样,马云要求达摩院能够独立经营维持下去。至于方法,
外人还很难猜测,科研机构一般要靠政府拨款,或者慈善捐助,当然也可以是订单式研发,转让专利技术。
</p>
<p>
有很多技术是得益于那些大企业的研发,比如数码相机,即使研发者被革了命,也是为人类做了贡献。应该记住的是,
即使那些传统企业没落了,他们留下的科研仍在;即使那些富豪不在了,他们留下的研究机构还在;比如卡耐基捐助的卡内基·梅隆大学,
洛克菲勒捐助的洛克菲勒大学,还有洛克菲勒基金会对科学所做的贡献。
</p>
<p>
(编辑:刘骏)
</div>
</body>
</html>

练习二:展开&闭合列表

 <!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>
<style type="text/css">
dl{
font:color:#6699CC;
width:300px;
height:18px;
}
dl dt{
font-weight:bold;
color:Green;
cursor:pointer; //设置手势
}
dl dd{
margin:0px;
}
/* //预定义样式:便于标签样式的动态加载*/
.open{
height:130px;/*不设置的话,文字会重叠*/
overflow:visible;
}
.close{
overflow :hidden;
}
</style>
</head> <body>
<script type="text/javascript">
function show() {
var dtNode = window.event.srcElement;
var dlNode = dtNode.parentNode;
var dlNodes = document.getElementsByTagName("dl");
for (var i = 0; i < dlNodes.length; i++) {
if (dlNodes[i] == dlNode) { //判断是否是当前点击的dl
if (dlNodes[i].className == "open") {
dlNodes[i].className = "close";
}
else {
dlNodes[i].className = "open";
}
}
else {
dlNodes[i].className = "close";
}
}
}
</script>
<dl class="close">
<dt onclick="show()">
列表一
</dt>
<dd>列表内容sasasacsa</dd>
<dd>列表内容dafrfgrve</dd>
<dd>列表内容saspasl;a,</dd>
<dd>列表内容dsd9qwklms</dd>
<dd>列表内容sajsoiaya</dd>
</dl>
<dl class="close">
<dt onclick="show()">
列表二
</dt>
<dd>列表内容sasasacsa</dd>
<dd>列表内容dafrfgrve</dd>
<dd>列表内容saspasl;a,</dd>
<dd>列表内容dsd9qwklms</dd>
<dd>列表内容sajsoiaya</dd>
</dl>
<dl class="close">
<dt onclick="show()">
列表三
</dt>
<dd>列表内容sasasacsa</dd>
<dd>列表内容dafrfgrve</dd>
<dd>列表内容saspasl;a,</dd>
<dd>列表内容dsd9qwklms</dd>
<dd>列表内容sajsoiaya</dd>
</dl>
</body>
</html>

练习三:自动创建表格

 <!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>
<link rel="stylesheet" type="text/css" href="table.css" />
</head> <body>
<script type="text/javascript">
var tabNum = 1;
function creTable(){
/*原始方法:
//创建表格节点
var tabNode = document.createElement("table");
//创建tbody节点
var tbdNode = document.createElement("tbody");
//创建行节点tr
var trNode = document.createElement("tr");
//创建单元格节点td
var tdNode = document.createElement("td");
tdNode.innerHTML = "单元格内容"; //让这些节点具有层次关系:组成一个表
tabNode.appendChild(tbdNode);
tbdNode.appendChild(trNode);
trNode.appendChild(tdNode);
*/ //新方法:使用表格节点自带的方法:insertRow()
//获取行列值
var rowNode = document.getElementsByTagName("input")[0];
var celNode = document.getElementsByTagName("input")[1];
if(rowNode.value==""|| rowNode.value==""){
alert("数据不能为空!");
}
else{
var divNode = document.getElementsByTagName("div")[0];
var x = rowNode.value;
var y = celNode.value;
//添加说明
var text = document.createElement("div");
text.innerHTML = "[表格"+tabNum+"]:"+x+"x"+y;
tabNum++;
divNode.appendChild(text); //添加表格
var tabNode = document.createElement("table");
for(var i=1;i<=x;i++){//插入x行
var trNode = tabNode.insertRow();
for(var j=1;j<=y;j++){//插入单元格:即列
var tdNode = trNode.insertCell();
}
}
tabNode.id = tabNum-1;
divNode.appendChild(tabNode);
//添加一条下划线
var line = document.createElement("hr");
divNode.appendChild(line);
}
}
//删除指定表格(该方法存在缺陷:没有删除表格上方的说明文字;没有做健壮性判断)
function delTable(){
var tableNode = document.getElementsByTagName("input")[3];
if(tableNode.value==""){
alert("数据不能为空!");
}
else{
var tabId = tableNode.value;
var tabnumNode = document.getElementById(tabId);
tabnumNode.parentNode.removeChild(tabnumNode);
}
}
</script>
&nbsp;&nbsp;&nbsp;&nbsp;行:<input type="text" name="rownum"/>
列:<input type="text" name="colnum"/>
<input type="button" value="创建" onclick="creTable()" />
<br/>
表格:<input type="text" name="tabnum"/>
<input type="button" value="删除" onclick="delTable()" />
<hr/>
<div></div>
</body>
</html>

css文件:文件名为table.css

 /* CSS Document */
table{
border:#33ff11 1px solid;
width:300px;
border-collapse:collapse;
}
table td{
border:#663366 1px solid;
padding:10px;
}
table th{
border:#6633ff 1px solid;
padding:10px;
background-color:rgb(100,200,300);
}

tables.css

练习四:表格行高亮

 <!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>
<link rel="stylesheet" href="table.css" />
<style type="text/css">
.one{
background:#99CCFF;
}
.two{
background:#FFFF99;
}
.over{
background-color:#FF0000;
}
</style>
<script type="text/javascript">
var name;//记录行的classname
/*设置行属性和行为*/
function setRows(){
//获取表格对象
var tabNode = document.getElementById("infoTab");
//获取行
var rowsNode = tabNode.rows;
//从第二行开始遍历(不算表头)
for(var i=1;i<rowsNode.length;i++){
if(i%2 == 1)
rowsNode[i].className = "one";
else
rowsNode[i].className = "two"; //设置完颜色,给行添加时间(行为)
rowsNode[i].onmouseover = function(){
name = this.className;
this.className = "over";//高亮
}
rowsNode[i].onmouseout = function(){
this.className = name;//还原
}
}
}
//在加载完成后调用方法:
window.onload = function(){
setRows();
}
</script>
</head>
<body>
<table id="infoTab">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>34</td>
<td>天津</td>
</tr>
<tr>
<td>小明</td>
<td>27</td>
<td>石家庄</td>
</tr>
<tr>
<td>小红</td>
<td>24</td>
<td>黑龙江</td>
</tr>
<tr>
<td>小强</td>
<td>23</td>
<td>合肥</td>
</tr>
<tr>
<td>诗朗诵</td>
<td>35</td>
<td>杭州</td>
</tr>
<tr>
<td>贝尔</td>
<td>38</td>
<td>纽约</td>
</tr>
</table>
</body>
</html>

练习五:表格排序

 <!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>
<link rel="stylesheet" type="text/css" href="table.css" />
<style type="text/css">
.over{
background-color:#FF0000;
}
th a:link,th a:visited{
text-decoration:none;
color:#0000FF;
}
</style>
<script type="text/javascript">
var name;//记录行的classname
/*设置行属性和行为*/
function setRows(){
//获取表格对象
var tabNode = document.getElementById("infoTab");
//获取行
var rowsNode = tabNode.rows;
//从第二行开始遍历(不算表头)
for(var i=1;i<rowsNode.length;i++){
//给行添加时间(行为)
rowsNode[i].onmouseover = function(){
name = this.className;
this.className = "over";//高亮
}
rowsNode[i].onmouseout = function(){
this.className = name;//还原
}
}
}
//在加载完成后调用方法:
window.onload = function(){
setRows();
}
</script>
<script type="text/javascript">
/*给表格排序
1、获取需要排序的行对象数组
2、按指定规则排序
3、将排好序的数组添加回表格
*/
var flag = true;
function sortTab(){
//获取表格对象
var tabNode = document.getElementById("infoTab");
//获取行
var rowsNode = tabNode.rows;
//定义临时容器存储要排序的行对象(其实存的是地址,排序的时候是排的行对象)
var tempRows = [];
for(var i=1;i<rowsNode.length;i++){
tempRows[i-1] = rowsNode[i];
}
//对临时容器排序
if(flag){
mySort(tempRows);
//将排序的行对象添加回表格
for(var x=0;x<tempRows.length;x++){
tempRows[x].parentNode.appendChild(tempRows[x]);
}
flag = false;
}
else{
mySort(tempRows);
//将排序的行对象添加回表格
for(var x=tempRows.length-1;x>=0;x--){
tempRows[x].parentNode.appendChild(tempRows[x]);
}
flag = true;
}
}
//数组排序
function mySort(arr){
for(var x=0;x<arr.length-1;x++)
for(var y=x+1;y<arr.length;y++){
if(arr[x].cells[1].innerHTML < arr[y].cells[1].innerHTML){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
}
} </script>
</head>
<body>
<table id="infoTab">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick="sortTab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>张三</td>
<td>24</td>
<td>上海</td>
</tr>
<tr>
<td>李四</td>
<td>21</td>
<td>北京</td>
</tr>
<tr>
<td>王五</td>
<td>34</td>
<td>天津</td>
</tr>
<tr>
<td>小明</td>
<td>27</td>
<td>石家庄</td>
</tr>
<tr>
<td>小红</td>
<td>24</td>
<td>黑龙江</td>
</tr>
<tr>
<td>小强</td>
<td>23</td>
<td>合肥</td>
</tr>
<tr>
<td>诗朗诵</td>
<td>35</td>
<td>杭州</td>
</tr>
<tr>
<td>贝尔</td>
<td>38</td>
<td>纽约</td>
</tr>
</table>
</body>
</html>

练习六:全选&全不选&删除选择

 <!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>
<style type="text/css">
table{
border:#33ff11 1px solid;
width:650px;
border-collapse:collapse;
text-align:center;
}
table td{
border:#663366 1px solid;
padding:10px;
}
table th{
border:#666666 1px solid;
padding:10px;
background-color:rgb(100,200,300);
}
.one{
background-color:#CCCCFF;
}
.two{
background-color:#FFFFCC;
}
.lastline{
background-color:#0099FF;
}
.over{
background:#CC3300;
}
h1{
color:#00FF99;
}
</style>
<script type="text/javascript">
var name;
//行间隔颜色设置
function setRows(){
var otabNode = document.getElementById("mailTab");
var orowNodes = otabNode.rows; for(var x=1;x<orowNodes.length-1;x++){
if(x%2 == 1)
orowNodes[x].className = "one";
else
orowNodes[x].className = "two";
//事件
orowNodes[x].onmouseover = function(){
name = this.className;
this.className = "over";//高亮
}
orowNodes[x].onmouseout = function(){
this.className = name;//还原
}
}
orowNodes[x].className = "lastline";
}
//文档加载后执行:
window.onload = function(){
setRows();
} //复选框的全选动作
function checkAll(node){
//获取所有复选框
var mailNodes = document.getElementsByName("mail");
for(var x=0;x<mailNodes.length;x++){
mailNodes[x].checked = node.checked;
}
}
//单击按钮事件
function checkAllByBut(num){
var mailNodes = document.getElementsByName("mail");
for(var x=0;x<mailNodes.length;x++){
if(num >= 1)//单选
mailNodes[x].checked = !mailNodes[x].checked;
else//全不选
mailNodes[x].checked = num;
}
}
//删除
function delMails(){
var mailNodes = document.getElementsByName("mail");
if(!confirm("是否删除所选邮件信息?"))
return;
for(var x=0;x<mailNodes.length;x++){
if(mailNodes[x].checked){
var rowNode = mailNodes[x].parentNode.parentNode;//获取行
rowNode.parentNode.removeChild(rowNode)
x--;//注意:这很关键,因为一旦remove,数组长度变短,但x却在自增,所以每remove一次需要自减一次
}
setRows();//更新行设置
}
}
</script>
</head>
<body>
<h1>email管理</h1>
<table id="mailTab">
<tr>
<th><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</th>
<th>发件人</th>
<th>邮件名称</th>
<th>邮件附属信息</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>张三</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>李四</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>王五</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>小明</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"/></td>
<td>杰克</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr><tr>
<td><input type="checkbox" name="mail"/></td>
<td>不一样</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr><tr>
<td><input type="checkbox" name="mail"/></td>
<td>王尼玛</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr><tr>
<td><input type="checkbox" name="mail"/></td>
<td>全蛋</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr><tr>
<td><input type="checkbox" name="mail"/></td>
<td>胡八一</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr><tr>
<td><input type="checkbox" name="mail"/></td>
<td>匿名</td>
<td>1oaoisasja@mail.com</td>
<td>附属信息:wobuxinnihuiduwoxieleshenme</td>
</tr>
<tr>
<td><input type="checkbox" name="all" onclick="checkAll(this)"/>全选</td>
<td><input type="button" value="全不选" onclick="checkAllByBut(0)"/></td>
<td><input type="button" value="反选" onclick="checkAllByBut(3)"/></td>
<td><input type="button" value="删除所选邮件" onclick="delMails()"/></td>
</tr>
</table>
</body>
</html>

练习七:性格测试

 <!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>
<style type="text/css">
#no1ul{
list-style:none;
margin:0px;
padding:0px;
}
.close{
display:none;
}
.show{
color:#990000;
}
</style>
<script type="text/javascript">
function showTestResult(){
var radioNodes = document.getElementsByName("answer");
var resultNodes = document.getElementsByName("result");
//健壮性判断
var flag = false;
for(var x=0;x<radioNodes.length;x++){
if(radioNodes[x].checked){
flag = true;
showOne(resultNodes[x]);
break;
}
}
if(!flag){
showOne(resultNodes[4]);
}
}
//我们希望只显示一个测试结果
function showOne(node){
var resultNodes = document.getElementsByName("result");
for(var x=0;x<resultNodes.length;x++){
//先全部close
resultNodes[x].className = "close";
}
//再显示这个节点
node.className = "show";
}
</script>
</head>
<body>
<h2>性格测试</h2>
<div>
<h3>问题</h3>
<span>每天下班回家一进门,你会怎样脱掉鞋子?</span>
<ul id="no1ul">
  <li><input type="radio" name="answer" value="1"/>A、很随意的脱下鞋子,不在乎如何摆放。</li>
<li><input type="radio" name="answer" value="2"/>B、脱下鞋后,把鞋尖朝向门外的方向整齐排好。</li>
<li><input type="radio" name="answer" value="3"/>C、脱下鞋后,把鞋尖朝屋内的方向整齐排好。</li>
<li><input type="radio" name="answer" value="4"/>D、不自己脱鞋,而是由同住在一起的人帮你脱下鞋子。</li>
</ul>
</div>
<div>
<input type="button" value="查看测试结果" onclick="showTestResult()"/>
<hr/>
<div id="a" name="result" class="close">
A:这样的人,比较喜欢自由,认为生活舒适即可,不在意细节,完全不考虑社会体制和规则的类型,以追求自我欲望为中心。
较冲动,喜欢自由奔放的生活方式。比较自我的人,这种人是为了追求欲望而行动的类型,仍然持续幼儿时期的性格。
如果往好的方向发展,当然很好;但是,如果往坏的方向发展,结果会很令人惊叹。
</div>
<div id="b" name="result" class="close">
B:这样的人很能吃苦,用自己的辛勤来享受生活。凡事都要准备得万全,是追求完美的人。容易在社会上树敌很多,对于同事也毫不放松。
他们会压抑感情,喜怒不形于色,遵守社会规范而行动。但是,这种人的心里面防卫防备很严,即使认为是为了社会公益而做的事情,也会引起很多的误解。
你的道德心和伦理感相当强烈,建议最好不要给自己过多的负担以免吃不消。
</div>
<div id="c" name="result" class="close">
C:这样的人有自己的思考方式,有自己的做事风格,会适当地考虑方式方法,是办事周到的人。这样的人骄傲,但是又适度,所以会给人以成熟自信的感觉。
</div>
<div id="d" name="result" class="close">
D:这样脱鞋方式的人,不用多说,一定是比较任性的人,与其说是任性,倒不如说是被完全惯坏了,因为周围的人都宠她,她要做的事情,都会由别人帮她做的很好,
不是说她自己没由能力,是因为她的依赖性很强,所以这样的人必须注意与周围环境的协调,否则终有一天吃大亏。
</div>
<div id="e" name="result" class="close">
E:你很皮!
</div>
</div>
</body>
</html>

练习八:下拉菜单

 <!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>
<style type="text/css">
.color{
width:50px;
height:50px;
background-color:#993300;
float:left;
margin-bottom:20px;
}
div ul{
margin:0px;
padding:0px;
margin-top:20px;
}
div ul li{
list-style:none;
clear:left;
}
#changeColor{
margin-top:20px;
}
</style>
<script type="text/javascript">
//使用颜色块设置颜色
function setColor(node){
var textNode = document.getElementById("text");
textNode.style.color = node.style.backgroundColor;
} //使用下拉框改变颜色
function changeColor(){
//获取下拉框
var selNode = document.getElementById("changeColor");
//下拉框选项
var optionsNode = selNode.options;
var textNode = document.getElementById("text"); textNode.style.color = optionsNode[optionsNode.selectedIndex].style.color;
}
</script>
<script>
//下拉框2
function selectCity(){
//获取要用到的对象
var selproNode = document.getElementById("selPro");
var selcityNode = document.getElementById("selCity");
var optionsNode = selcityNode.options;
var index = selproNode.selectedIndex;
//设置可选城市
/*方式一:
var arr1 = {"beijing":['海淀区','朝阳区','东城区','西城区']};
var arr2 = {"hebei":['石家庄','邯郸','保定','秦皇岛']};
var arr3 = {"shandong":['津南','青岛','烟台','日照']};
var arr4 = {"henan":['郑州','洛阳','开封','平顶山']};
*/
var arr0 = ["选择城市"];
var arr1 = ['海淀区','朝阳区','东城区','西城区'];
var arr2 = ['石家庄','邯郸','保定','秦皇岛'];
var arr3 = ['津南','青岛','烟台','日照'];
var arr4 = ['郑州','洛阳','开封','平顶山'];
var arr = [arr0,arr1,arr2,arr3,arr4];
//选择省市后添加对应城市
//注意:在添加前应该清空里面的内容!!!
var cityArr = arr[index];
for(var i=0;i<optionsNode.length;i++){
optionsNode[i].parentNode.removeChild(optionsNode[i]);
i--;//重要
}
for(var x=0;x<cityArr.length;x++){
var opt = document.createElement("option");
var str = cityArr[x];
opt.innerHTML = str;
selcityNode.appendChild(opt);
}
}
</script>
</head>
<body>
<h2>下拉框1</h2>
<div class="color" style="background-color:#FF0000" onclick="setColor(this)" id="col1"></div>
<div class="color" style="background-color:#00FF00" onclick="setColor(this)" id="col2"></div>
<div class="color" style="background-color:#0000FF" onclick="setColor(this)" id="col3"></div>
<div id="text">
<ul>
<li>你见,或者不见我,我就在那里,不悲不喜;</li>
<li>你念,或者不念我,情就在那里,不来不去;</li>
<li>你爱,或者不爱我,爱就在那里,不增不减;</li>
<li>你跟,或者不跟我,我的手就在你手里,不舍不弃;</li>
<li>来我的怀里,或者,让我住进你的心里</li>
<li>默然 相爱 寂静 欢喜</li>
</ul>
</div>
<select id="changeColor" onchange="changeColor()">
<option value="balck">选择颜色</option>
<option style="color:#FF0000">红色</option>
<option style="color:#00FF00">绿色</option>
<option style="color:#0000FF">蓝色</option>
</select>
<hr/> <h2>下拉框2</h2>
<select id="selPro" onchange="selectCity()">
<option value="sel">选择省市</option>
<option value="beijing">北京</option>
<option value="hebei">河北</option>
<option value="shandong">山东</option>
<option value="henan">河南</option>
</select>
<select id="selCity">
<option>选择城市</option>
</select>
</body>
</html>

练习九:添加&删除附件

 <!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>
<style type="text/css">
table a:link,table a:visited{
color:#0000FF;
font-family:"Times New Roman", Times, serif;
text-decoration:none;
}
table a:hover{
color:#CCCC00;
}
</style>
<script type="text/javascript">
//添加附件
function addFile(){
var tabNode = document.getElementById("myTab");
var rowNode = tabNode.insertRow();
//插入行
var celFileNode = rowNode.insertCell();
var celbuttNode = rowNode.insertCell();
celFileNode.innerHTML = "<input type='file'/>";
celbuttNode.innerHTML = "<a href='javascript:void(0)' onclick='delFile(this)'>删除</a>";
}
//删除附件
function delFile(node){
var rowNode = node.parentNode.parentNode;
rowNode.parentNode.removeChild(rowNode);
}
</script>
</head>
<body>
<table id="myTab">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件</a></td>
</tr>
<tr>
<td><hr/></td>
</tr>
</table>
</body>
</html>

联系十:表单检验

 <!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>
<style type="text/css">
table{
border:#006666 2px solid;
width:300px;
height:300px;
text-align:center;
}
</style>
<script type="text/javascript">
//用户名提示
function usermes(){
var userflag =false;
var userNode = document.getElementById("username");
var name = userNode.value;
//定义正则表达式规则:有两种语法方法
var reg = new RegExp("^[a-z].{1,5}$","i");
//var reg = /^[a-z]{4}$/;
var usermesNode = document.getElementById("usermes");
//判断输入是否符合规则:
if(reg.test(name)){
usermesNode.innerHTML = "用户名可用".fontcolor("green");
flag = true;
}
else{
usermesNode.innerHTML = "用户名必须以字母开头且长度在2-6之间".fontcolor("red");
flag = false;
}
return flag;
}
//密码提示
function pswmes1(){
var psw1flag =false;
var pswNode = document.getElementById("psw1");
var name = pswNode.value;
//定义正则表达式规则:有两种语法方法
var reg = new RegExp("^.{2,10}$","i");
//var reg = /^[a-z]{4}$/;
var pswmesNode = document.getElementById("pswmes1");
//判断输入是否符合规则:
if(reg.test(name)){
pswmesNode.innerHTML = "密码可用".fontcolor("green");
psw1flag = true;
}
else if(name==""){
pswmesNode.innerHTML = "密码不能为空".fontcolor("red");
psw1flag = false;
}
else{
pswmesNode.innerHTML = "密码长度必须为:2~10".fontcolor("red");
psw1flag = false;
}
return psw1flag;
}
function pswmes2(){
var psw2flag =false;
var psw1Node = document.getElementById("psw1");
var name1 = psw1Node.value;
var psw2Node = document.getElementById("psw2");
var name2 = psw2Node.value; var pswmesNode = document.getElementById("pswmes2");
//判断输入是否符合规则:
if(name1==name2){
if(name2==""){
pswmesNode.innerHTML = "密码不能为空".fontcolor("red");
psw2flag = false;
}
else{
pswmesNode.innerHTML = "输入一致".fontcolor("green");
psw2flag = true;
}
}
else{
pswmesNode.innerHTML = "两次密码输入不一致".fontcolor("red");
psw2flag = false;
}
return psw2flag;
}
//提交校验
function checkForm(){
var formflag;
var psw1Node = document.getElementById("submes");
if(usermes() && psw1mes() && psw2mes()){
alert("提交成功");
formflag = true;
}
else{
alert("输入有误,无法提交");
formflag = false;
}
return formflag;
}
</script>
</head>
<body>
<h2>新用户注册</h2>
<form onsubmit="return checkForm()">
<table id="userTab">
<tr>
<td>用户名称:<input type="text" id ="username" onblur="usermes()"/></td>
</tr>
<tr>
<td id="usermes"></td>
</tr>
<tr>
<td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:<input type="password" id ="psw1" onblur="pswmes1()"/></td>
</tr>
<tr>
<td id="pswmes1"></td>
</tr>
<tr>
<td>确认密码:<input type="password" id ="psw2" onblur="pswmes2()"/></td>
</tr>
<tr>
<td id="pswmes2"></td>
</tr>
</table>
<input type="submit" value="确认注册" style="font-size:16px"/>
</form>
</body>
</html>

DOM&JavaScript示例&练习的更多相关文章

  1. JavaScript 示例

    JavaScript 示例 <html lang="en"> <head> <meta charset="UTF-8"> & ...

  2. dom&JavaScript&Jquery

    目录 dom&JavaScript&Jquery 建节点 添加节点 删除节点: 替换节点: 属性节点 获取值操作 class的操作 指定CSS操作 操作节点 获取input用户输入 操 ...

  3. DOM解析示例

    收藏信息.xml <?xml version="1.0" encoding="GB2312" standalone="no"?> ...

  4. 【译】10个机器学习的JavaScript示例

    原文地址:10 Machine Learning Examples in JavaScript 在过去的每一年,用于机器学习(Machine Learning)的库在变得越来越快和易用.一直以来Pyt ...

  5. JavaScript示例

    <!DOCTYPE html> <html> <head> <title>单击按钮事件示例</title> <script langu ...

  6. javascript示例一

    开发工具介绍 前端常用开发工具:sublime.visual Studio Code.HBuilder.Webstorm. 那么大家使用的PCharm跟WebStorm是JetBrains公司推出的编 ...

  7. Javascript -- 示例:多选下拉选框

    1. 示例:多选下拉选框 <html> <head> <meta http-equiv="Content-Type" content="te ...

  8. 一天JavaScript示例-在功能上的标量参数和数组参数的差异

    <!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...

  9. 一个用于每一天JavaScript示例-使用缓存计算(memoization)为了提高应用程序性能

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. c#游戏进程杀手

    我认为写博客还是比较重要的,特别是短时间写出一个含有新知识点的软件.这样总结下这次编程经验和再捋顺一下这次编程思路.首先来谈谈为什么想做这个小程序,一是感觉自己太贪玩想控制一下,二是也锻炼下自己的编程 ...

  2. Spring Cloud教程合集

    Spring Cloud系列终于搞完啦! 这一系列是笔者的学习笔记,原书之前也给小伙伴们推荐过 <Spring Cloud微服务实战> 原书采用了较老的Brixton版,笔者在学习的过程中 ...

  3. 对NumPy中dot()函数的理解

    今天学习到numpy基本的运算方法,遇到了一个让我比较难理解的问题.就是dot函数是如何对矩阵进行运算的. 一.dot()的使用 参考文档:https://docs.scipy.org/doc/num ...

  4. Docker 使用教程

    概括  Docker与传统虚拟机的区别 与传统虚拟机的区别  Docker的安装 的安装  Docker daemon , client , containerd  镜像与容器操作  容器运 ...

  5. Python3使用PyQt5制作简单的画板/手写板

    0.目录 1.前言 2.简单的画板1.0 在定点和移动中的鼠标所在处画一条线 3.简单的画板2.0 在定点和移动中的鼠标所在处画一条线 并将画过的线都保留在窗体上 4.简单的画板3.0 将按住鼠标后移 ...

  6. 实现快餐配送页面jq

    <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>快 ...

  7. springCloud zuul网关服务

    第一步:编写application.properties文件 spring.application.name=api-gateway server.port=5555 zuul.routes.user ...

  8. keepalived实现服务高可用

    第1章 keepalived服务说明 1.1 keepalived是什么? Keepalived软件起初是专为LVS负载均衡软件设计的,用来管理并监控LVS集群系统中各个服务节点的状态,后来又加入了可 ...

  9. 三十天学不会TCP,UDP/IP网络编程-ARP -- 连接MAC和IP

    继续来做(da)推(guang)介(gao)我自己的!由于这两年接触到了比较多的这方面的知识,不想忘了,我决定把他们记录下来,所以决定在GitBook用半年时间上面写下来,这是目前写的一节,目前已完成 ...

  10. SpringMVC上传图片并压缩及剪切demo

    /** * */ package com.up.controller; import java.awt.Image; import java.awt.image.BufferedImage; impo ...