原生js练手小项目（2.1~2.12）
发现了个很好的原生js练手的地方，特此开个博文作为记录
练手地址
每个项目的反思部分才是最重要的，那里写着和标准答案的差距！！！
2.1 百度输入法（更像是一个下拉表的打开与关闭）
分析：一个按钮，点击后会出现一个下拉列表，点击最后一个li可以关闭这个列表或者是再点击一下按钮也可以关闭这个列表。下拉的li鼠标移动上去会改变样式。
<html lang="en">
<head>
<title>demo-1.1title>
<style>
#container{
width: 77px;
margin: 0 auto;
}
#container>input:hover{
/*鼠标移上去时变成小手*/
cursor: pointer;
}
#container>ul{
list-style-type: none;
border: 1px solid blue;
width: 75px;
padding-left: 0px;
margin-top: 5px;
display: none;
}
#container>ul>li{
display: block;
padding-left: 7px;
}
#container>ul>li>a{
text-decoration: none;
color: blue;
font-size: 12px;
}
#container>ul>li:hover{
/*鼠标移上去时变成小手*/
cursor: pointer;
background-color: #C8DDEE;
}
#container>ul>li>a:active{
color: blue;
}
/*最后一个起关闭作用的li*/
#close{
border-top: 1px solid blue;
}
style>
head>
<body>
<div id="container">
<input type="button" value="输入法">
<ul>
<li><a href="#">手写a>li>
<li><a href="#">拼音a>li>
<li id="close"><a href="#">关闭a>li>
ul>
div>
<script>
var btn = document.getElementsByTagName("input")[0];
var select = document.getElementById("container").children[1];
var btn_close = document.getElementById("close");
btn.onclick = function(){
//点击按钮打开或关闭下拉列表
//这里用条件运算符巧妙地完成了这个效果，也可以用if else语句完成
select.style.display = select.style.display == "block" ? "none" : "block";
};
btn_close.onclick = function(){
select.style.display = "none";
}
script>
body>
html>
反思：因为点击按钮有两种情况嘛，一种是ul未打开，点击按钮将其打开；一种是ul已经打开了，点击按钮将其关闭。我刚开始的是用if eles来做，但我最后还是认为用 条件运算符 更好一些。
2.2 点击div，显示其innerHTML
分析：4个div，点击它们后会 alert 它们的innerHTML，并且鼠标移动上去时还会变成小手
<html lang="en">
<head>
<title>demo-1.1title>
<style>
.text{
width: 500px;
border: 1px solid lightgrey;
font-size: 12px;
padding: 10px;
margin: 10px auto;
/*鼠标变为小手*/
cursor: pointer;
}
style>
head>
<body>
<div class="text"><strong>新华网strong>北京5月29日电(新华社记者)从三聚氰胺到瘦肉精，从染色馒头到毒豆芽，在食品中添加非食用物质和滥用食品添加剂已成为百姓餐桌上突出的"不安全因素"。近期以来，从北京到广东，从浙江到宁夏，一场打击食品非法添加的"风暴"席卷全国。div>
<div class="text">4月21日，国务院部署严厉打击食品非法添加和滥用食品添加剂专项行动后，广东省高度重视，随即召开了全省电视电话会议。省委领导强调，食品安全是"高压线"，决不能"下不为例"；抓好食品安全要突出一个"<strong>严strong>"字，做到<strong>严防strong>、<strong>严查strong>、<strong>严处strong>。div>
<div class="text"><strong>宁夏重点开展了四轮问题乳粉彻查清缴工作strong>，对全区养殖源头、鲜奶收购和乳制品生产、经营、餐饮等环节的2.7万家单位进行了全面清查，共查处问题乳粉案件4起、涉案企业3家，吊销2家乳粉生产企业生产许可证。div>
<div class="text">做好风险监测工作是许多地方加强食品安全的重点工作之一。在北京，<strong style="color:red;">全市设立了3000个风险监测点strong>，建立了包括3000余种食品添加剂和非法添加物的数据库，对110家国内外食品相关组织、媒体发布的线索进行监测，及时进行风险评估，加强抽检控制。div>
<script>
var texts = document.getElementsByClassName("text");
var x;
//for in循环可遍历数组，我用它是为了熟悉它，当然也可以用for循环
for(x in texts){
texts[x].onclick = function(){
alert(this.innerHTML);
}
}
script>
body>
html>
反思：在写到alert(this.innerHTML);时之前用的是alert(texts[x].innerHTML);但是没有用，我的理解是 texts[x] 在 alert() 里面，就是 texts[x] 了，并没有变成什么 texts[0],texts[1]什么的，所以找不到 texts[x] 会报错。用this可以获得调用函数的那个对象，即外面的texts[0],texts[1]什么的，想更详细的了解 this 请点击这里
2.3 简单的加法器
分析：一个输入框，输入框旁边是文字，点击文字也可触发输入框，所以想到将输入框和文字都放到
<html lang="en">
<head>
<title>demo-1.1title>
<style>
#container{
width: 470px;
margin: 0 auto;
}
label>#getinput{
width: 225px;
margin-bottom: 10px;
}
label>span{
color: #a0a0a0;
font-size: 10px;
}
#container>p{
font-size: 30px;
color: red;
}
style>
head>
<body>
<div id="container">
<label for="getinput">
<input type="text" id="getinput" value="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15">
<span>输入数字求和，数字之间用半角","号分隔span>
label>
<input type="button" id="addnumber" value="求和">
<p>p>
div>
<script>
var btn = document.getElementById("addnumber");
var text = document.getElementById("getinput");
btn.onclick = function(){
let x;
let sum = 0;
let nums = text.value.split(",");
//计算和
for(x in nums){
sum += parseInt(nums[x]);
}
//输出和
document.getElementsByTagName("p")[0].innerHTML = sum;
}
script>
body>
html>
反思：这个题看着很简单，但是有几个隐藏的点很容易忽视掉！
1.不能在点击按钮触发的函数之外获取输入框的 value,因为一旦在外面获取了，那传入函数内的 value 的值其实是恒定的，所以就达不到你随便输入几个值点击求和的目的了。
2.从输入框获取的 value 值是一个字符串，用 split() 方法分割后也还是一个字符串数组，所以要对每一项用 parseInt(nums[x]); 将其化为整数，以便完成后续的累加操作。
3.在函数最前方要var sum = 0; 这样做是为了每次执行函数时都将 sum 的值设为 0；为了防止连续点击按钮累加数字时加上了以前的 num 的值
2.4 弹出层效果
分析：一个按钮，点击它会弹出一个遮罩层，这个遮罩层中心是一个div，右上角一个×型的按钮，点击会关掉遮罩层。所以想到display：none属性，这个遮罩层肯定是在html里面的，为了不影响文档流，所以position:absolute;。既然遮罩，那也会用到z-index 属性。而且遮罩层其他部分是透明的，所以想到opacity属性（后面改成background-color : rgb( , , , );更为准确）。CSS3的opacity属性
<html lang="en">
<head>
<title>demo-1.1title>
<style>
/*使body充满整个页面*/
html,body{
height: 100%
}
body{
margin: 0px;
}
#base{
text-align: center;
padding-top: 10px;
}
#base>input{
cursor: pointer;
}
#over{
display: none;
/*覆盖*/
z-index: 2;
/*覆盖住整个页面*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(0, 0, 0, 0.5);
}
#over>#alert-container{
width: 400px;
height: 200px;
background-color: black;
/*使position: absolute;的元素垂直居中*/
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 5px solid #FFA500;
background-color: white;
}
#over>#alert-container>#header{
background-color: #ffd07a;
height: 15%;
text-align: right;
padding-right: 8px;
padding-top: 8px;
border-bottom: 5px solid #FFA500;
}
#over>#alert-container>#header>span{
font-size: 15px;
border: 1px solid #FFA500;
background-color: white;
color: #FFA500;
padding: 0 4px;
cursor: pointer;
}
style>
head>
<body>
<div id="base">
<input type="button" value="弹出层">
div>
<div id="over">
<div id="alert-container">
<div id="header"><span id="close">×span>div>
div>
div>
<script>
var openbtn = document.getElementsByTagName("input")[0];
var closebtn = document.getElementById("close");
var over = document.getElementById("over");
openbtn.onclick = function(){
over.style.display = "block";
};
closebtn.onclick = function(){
over.style.display = "none";
};
script>
body>
html>
反思：
1.给遮罩层 position : absolute;虽然已经让它脱离文档流了，但是它已经脱离body了。所以它没有覆盖住body，要给它设置 top : 0; left : 0; 强制规定它的位置让其能覆盖住整个页面才行
2.给over设置了透明度opacity，但是它的子元素就会受这个透明度影响，而且给子元素设置opacity也不能消除这个影响，这里只能用background-color : rgb( , , , )了，前三个值设定背景颜色，最后一个值设定透明度，这样就不会影响子元素了
2.5 函数传参，改变div任意属性的值
分析：两个输入框，输入框前面有说明文字，不过点击文字不会作用于输入框，所以不用
<html lang="en">
<head>
<title>demo-1.1title>
<style>
form{
margin: 10px auto;
width: 215px;
font-size: 15px;
}
form>:nth-of-type(1),:nth-of-type(2){
width: 145px;
}
form>:nth-of-type(3){
margin-left: 65px;
margin-top: 10px;
}
div{
width: 180px;
height: 180px;
color: white;
background-color: black;
font-size: 10px;
padding: 10px;
margin: 0 auto;
}
style>
head>
<body>
<form action="">
属性名：<input type="text" name="propertyname" id="propertyname" value="backgroundColor"><br>
属性值：<input type="text" name="propertyvalue" id="propertyvalue" value="blue"><br>
<input type="button" id="sure" value="确定">
<input type="button" id="resert" value="重置">
form>
<div>在上方输入框输入"属性名"及"属性值"，点击确定按钮查看效果。div>
<script>
var surebtn = document.getElementById("sure");
var resertbtn = document.getElementById("resert");
var propertyname = document.getElementById("propertyname");
var propertyvalue = document.getElementById("propertyvalue");
var temp = document.getElementsByTagName("div")[0];
surebtn.onclick = function(){
let newPropertyName = propertyname.value;
let newPropertyValue = propertyvalue.value;
function changeStyle(a,b){
temp.style[a] = b;
}
changeStyle(newPropertyName,newPropertyValue);
};
resertbtn.onclick = function(){
temp.style = "";
};
script>
body>
html>
反思：
1.四个input，所以完全可以不同设置那么多的id。
2.通过 js 改变一个元素的属性以前经常是用temp.style.color = “red”;但如果将属性和值改为变量的，例如temp.style.propertyname = “property.value”; 这样就会失效，因为temp.style.propertyname是找不到的，现在就需要用temp.style[propertyname] = propertyvalue;了，这个是支持属性名和值为变量的。
3.要有工厂思想，要多用函数。函数是可以多次使用的。
2.6 图片列表：鼠标移动移出改变透明度
分析：一个大的div里，分两排排列着10个大小相同的图片，鼠标移上去会改变其透明度（opacity），而且鼠标样式会变成十字架（cursor : crosshair;)。鼠标移走后会恢复原样。可以用循环来做。
<html lang="en">
<head>
<title>demo-1.1title>
<style>
div{
border: 1px solid black;
width: 710px;
height: 290px;
margin: 10px auto;
}
div>img{
border: 1px solid #d3d9de;
opacity: 0.5;
}
div>:nth-of-type(1){
margin: 10px 5px 10px 10px;
}
div>:nth-of-type(2),:nth-of-type(3),:nth-of-type(4){
margin: 10px 5px 10px 5px;
}
div>:nth-of-type(5){
margin: 10px 10px 10px 5px;
}
div>:nth-of-type(6){
margin: -4px 5px 10px 10px;
}
div>:nth-of-type(7),:nth-of-type(8),:nth-of-type(9){
margin: -4px 5px 10px 5px;
}
div>:nth-of-type(10){
margin: -4px 10px 10px 5px;
}
style>
head>
<body>
<div>
<img src="http://www.fgm.cc/learn/lesson2/img/1.jpg" alt="1"><img src="http://www.fgm.cc/learn/lesson2/img/2.jpg" alt="2"><img src="http://www.fgm.cc/learn/lesson2/img/3.jpg" alt="3"><img src="http://www.fgm.cc/learn/lesson2/img/4.jpg" alt="4"><img src="http://www.fgm.cc/learn/lesson2/img/5.jpg" alt="5">
<img src="http://www.fgm.cc/learn/lesson2/img/6.jpg" alt="6"><img src="http://www.fgm.cc/learn/lesson2/img/7.jpg" alt="7"><img src="http://www.fgm.cc/learn/lesson2/img/8.jpg" alt="8"><img src="http://www.fgm.cc/learn/lesson2/img/9.jpg" alt="9"><img src="http://www.fgm.cc/learn/lesson2/img/10.jpg" alt="10">
div>
<script>
var imgs = document.getElementsByTagName("div")[0].children;
for(let i = 0;i < 10;i++){
//鼠标移上图片
imgs[i].onmouseover = function(){
this.style.opacity = "1";
//改变鼠标样式
this.style.cursor = "crosshair";
}
//鼠标从图片上移走
imgs[i].onmouseout = function(){
this.style.opacity = "0.5";
this.style.cursor = "none";
}
}
script>
body>
html>
反思：
1.img是行内元素，所以要注意两个之间的空格会影响排版。最好的方法其实是第一行图片放在一个ul里面，第二行放在另一个ul里面，这样会很好排版，行内元素不好排版。
2.div的children表示的是它的子元素们，我在写img换行时加了个br，就导致br占了一个位置，就循环不到最后一个img了，删除br即可，也不会影响整体排版。
3.也可以在css中设置一个img的className为一个值的样式，在js中改变className的值即可，但我没有这么做，因为改变的属性多的话可以这样做，少的话那就没必要这样做了。
2.7 简易选项卡
分析：
三个选项卡的切换button，鼠标移动到上面可切换下面的选项卡，其实就是改变了下面的div的 innerHTML 和样式，鼠标移动也会改变 button 的背景色，字体颜色和鼠标样式变为小手（cursor : pointer;)。三个切换 button 可用 li 写，选项卡内部的内容也可用常规的 ul li 写。多用循环，函数。默认是第一课。
<html lang="en">
<head>
<title>demo-1.1title>
<style>
/*消除所有ul的margin，因为ul是自带margin的*/
ul{
margin: 0;
}
#container{
font-size: 13px;
width: 480px;
margin: 10px auto;
border: 1px solid black;
}
#container>ul{
background-color: black;
color: white;
width: 480px;
padding: 0px;
}
#container>ul>li{
list-style-type: none;
border-bottom: 1px solid black;
display: inline-block;
height: 35px;
/*让文字竖直,水平居中*/
line-height: 35px;
text-align: center;
width: 80px;
}
/*类为mouseover的会变成此样式，可以据次改变导航条样式*/
#container>ul>li.mouseover{
background-color: #abb5bf;
color: black;
}
#container>div li{
margin-top: 10px;
}
#container>div:nth-of-type(1),:nth-of-type(2),div:nth-of-type(3){
display: none;
}
/*类为newmouseover的会变成此样式，可以据此改变div的样式*/
#container>div.newmouseover{
display: block;
}
style>
head>
<body>
<div id="container">
<ul>
<li class="mouseover">第一课li><li>第二课li><li>第三课li>
ul>
<div class="newmouseover">
<ul>
<li>网页特效原理分析li><li>响应用户操作li><li>提示框效果li><li>事件驱动li><li>元素属性操作li><li>动手编写第一个JS特效li><li>引入函数li><li>网页换肤效果li><li>展开/收缩播放列表效果li>
ul>
div>
<div>
<ul>
<li>改变网页背景颜色li><li>函数传参li><li>高重用性函数的编写li><li>126邮箱全选效果li><li>循环及遍历操作li><li>调试器的简单使用li><li>典型循环的构成li><li>for循环配合if判断li><li>className的使用li><li>innerHTML的使用li><li>戛纳印象效果li><li>数组li><li>字符串连接li>
ul>
div>
<div>
<ul>
<li>JavaScript组成：ECMAScript、DOM、BOM，JavaScript兼容性来源li><li>JavaScript出现的位置、优缺点li><li>变量、类型、typeof、数据类型转换、变量作用域li><li>闭包：什么是闭包、简单应用、闭包缺点li><li>运算符：算术、赋值、关系、逻辑、其他运算符li><li>程序流程控制：判断、循环、跳出li><li>命名规范：命名规范及必要性、匈牙利命名法li><li>函数详解：函数构成、调用、事件、传参数、可变参、返回值li><li>定时器的使用：setInterval、setTimeoutli><li>定时器应用：站长站导航效果li><li>定时器应用：自动播放的选项卡li><li>定时器应用：数码时钟li><li>程序调试方法li>
ul>
div>
div>
<script>
var links = document.getElementsByTagName("ul")[0].children;
var temps = document.getElementById("container").getElementsByTagName("div");
for(let i = 0;i < links.length;i++){
//移上去
links[i].onmouseover = function(){
//初始化div
temps[0].className = "";
temps[1].className = "";
temps[2].className = "";
//初始化导航条
links[0].className = "";
links[1].className = "";
links[2].className = "";
this.className = "mouseover";
temps[i].className = "newmouseover";
this.style.cursor = "pointer";
};
}
script>
body>
html>
反思：
1.只能写 onmoueseover 事件，不能写 onmouseout 事件，因为写了 onmouseout 事件则鼠标一旦所有的移出导航条，则下面的div会完全消失。
2. 每次发生 onmoueseover 事件都要重写每个导航条，div的样式，否则就会和前面的重合，就做不到一个导航，一个div的目的了。
2.8 简易js年历
分析：感觉和2.7是一个道理，就是导航变多了，div也变多了，就不具体分析了。
具体看上面的2.7，其实这个就是2.7的3个变成这里的12个而已，原理其实都一样！
2.9 单一按钮显示/隐藏
分析：和前面的差不多，跳过。。。。。。
2.10 提示框效果
分析：
感觉和前面的2.6差不多，2.6是改变透明度，这里就是改变显示了。一个大的div里，两个 ul，一个 ul 有5个 li。鼠标移到 li 上面会显示一个图片，图片会比 li 稍大些，会盖过li。图片会脱离文档流。
思路：
难点应该是写后面的覆盖的图片吧。观察可知，图片的中心点应该是和原来的 li 的中心点一样，所以可以算出其坐标。图片脱离文档流，应该是position : absolute; 所以的得到其 top ，left 值就可确定其位置了。
<html lang="en">
<head>
<title>demo-1.1title>
<style>
#container{
border: 1px solid black;
width: 570px;
height: 280px;
margin: 10px auto;
}
#container>h2{
font-size: 19px;
text-align: center;
}
#container>ul{
list-style-type: none;
padding: 0px;
margin: 10px 0px 10px 0px;
}
#container>ul>li{
border: 1px solid black;
display: inline-block;
width: 80px;
height: 80px;
font-size: 12px;
background-color: #f1f4f9;
padding: 10px;
margin-right: 10px;
}
#container>ul>li:nth-of-type(1){
margin-left: 10px;
}
/*将图片都隐藏*/
img{
position: absolute;
border: 2px solid #778899;
display: none;
cursor: crosshair;
}
style>
head>
<body>
<div id="container">
<h2>名车车标展示-鼠标移过显示车标h2>
<ul>
<li><strong>BMWstrong><br>宝马汽车li><li><strong>Alfa Romeostrong><br>阿尔法-罗米欧li><li><strong>sKodastrong><br>斯柯达li><li><strong>Volkswagenstrong><br>大众汽车li><li><strong>Saabstrong><br>萨布牌轿车li>
ul>
<ul>
<li><strong>Lamborghinistrong><br>兰博基尼li><li><strong>Porschestrong><br>保时捷li><li><strong>Peugeotstrong><br>标致li><li><strong>Mercedeslstrong><br>梅赛德斯 奔驰li><li><strong>Buickstrong><br>别克汽车li>
ul>
div>
<div id="imgs_1">
<img src="http://www.fgm.cc/learn/lesson2/img/1.jpg" alt="1">
<img src="http://www.fgm.cc/learn/lesson2/img/2.jpg" alt="2">
<img src="http://www.fgm.cc/learn/lesson2/img/3.jpg" alt="3">
<img src="http://www.fgm.cc/learn/lesson2/img/4.jpg" alt="4">
<img src="http://www.fgm.cc/learn/lesson2/img/5.jpg" alt="5">
div>
<div id="imgs_2">
<img src="http://www.fgm.cc/learn/lesson2/img/6.jpg" alt="6">
<img src="http://www.fgm.cc/learn/lesson2/img/7.jpg" alt="7">
<img src="http://www.fgm.cc/learn/lesson2/img/8.jpg" alt="8">
<img src="http://www.fgm.cc/learn/lesson2/img/9.jpg" alt="9">
<img src="http://www.fgm.cc/learn/lesson2/img/10.jpg" alt="10">
div>
<script>
var lis_1 = document.getElementById("container").children[1].children;
var lis_2 = document.getElementById("container").children[2].children;
var imgs_1 = document.getElementById("imgs_1").children;
var imgs_2 = document.getElementById("imgs_2").children;
for(let i = 0;i < 5;i++){
lis_1[i].onmouseover = function(){
//点击时将所有img样式初始化
resert();
imgs_1[i].style.display = "inline";
let left_1 = getPositionLeft_1(i);
imgs_1[i].style.left = left_1 + "px";
imgs_1[i].style.top = "52.54px";
};
lis_2[i].onmouseover = function(){
//点击时将所有img样式初始化
resert();
imgs_2[i].style.display = "inline";
let left_2 = getPositionLeft_1(i);
imgs_2[i].style.left = left_2 + "px";
imgs_2[i].style.top = "163.54px";
};
}
//计算第一个ul中的img的left，第二个ul中的img一一对应
function getPositionLeft_1(i){
return i * 112 + 393;
}
function resert(){
imgs_1[0].style.display = "none";
imgs_1[1].style.display = "none";
imgs_1[2].style.display = "none";
imgs_1[3].style.display = "none";
imgs_1[4].style.display = "none";
imgs_2[0].style.display = "none";
imgs_2[1].style.display = "none";
imgs_2[2].style.display = "none";
imgs_2[3].style.display = "none";
imgs_2[4].style.display = "none";
}
script>
body>
html>
反思：
其实将 img 放到 li 里面是最好的，position : absolute; 虽然是脱离文档流，但它也是相对于原位置进行运动的，所以将其放到 li 里面，就不用大费周折的计算 img 的位置了，只需要 top : -14px; left : -14px;（这个是相对于祖先元素定位的，祖先元素必须要 position : relative或absolute或fixed）就行了，哎 还是对布局不熟悉呀！
position：absolute 定位问题请看这里
2.11 鼠标移过，改变图片路径
分析：一个 div 里面 一个大的 img，11个小的 img。鼠标移动到小的 img 上，大的 div 就会显示小的 img 的图片。而且每个 img 还有很小的圆角（boder-radius : 5px;)
<html lang="en">
<head>
<title>demo-1.1title>
<style>
body{
background-color: black;
}
#container{
border-radius: 5px;
background-color: white;
width: 206px;
height: 258px;
padding: 10px;
margin: 10px auto;
position: relative;
}
#container>img{
border-radius: 5px;
cursor: pointer;
}
/*将环绕着大图片的三个小图用position: absolute;定位*/
#container>#floatimg_1{
position: absolute;
top: 10px;
left: 166px;
}
#container>#floatimg_2{
position: absolute;
top: 62px;
left: 166px;
}
#container>#floatimg_3{
position: absolute;
top: 114px;
left: 166px;
}
#container>img:nth-of-type(5),img:nth-of-type(6),img:nth-of-type(7),img:nth-of-type(9),img:nth-of-type(10),img:nth-of-type(11){
display: inline-block;
margin-right: 2px;
}
style>
head>
<body>
<div id="container">
<img src="http://www.fgm.cc/learn/lesson2/img/big_1.jpg" alt="big_1">
<img src="http://www.fgm.cc/learn/lesson2/img/small_1.jpg" alt="small_1" id="floatimg_1">
<img src="http://www.fgm.cc/learn/lesson2/img/small_2.jpg" alt="small_2" id="floatimg_2">
<img src="http://www.fgm.cc/learn/lesson2/img/small_3.jpg" alt="small_3" id="floatimg_3">
<img src="http://www.fgm.cc/learn/lesson2/img/small_4.jpg" alt="small_4"><img src="http://www.fgm.cc/learn/lesson2/img/small_5.jpg" alt="small_5"><img src="http://www.fgm.cc/learn/lesson2/img/small_6.jpg" alt="small_6"><img src="http://www.fgm.cc/learn/lesson2/img/small_7.jpg" alt="small_7">
<img src="http://www.fgm.cc/learn/lesson2/img/small_8.jpg" alt="small_8"><img src="http://www.fgm.cc/learn/lesson2/img/small_9.jpg" alt="small_9"><img src="http://www.fgm.cc/learn/lesson2/img/small_10.jpg" alt="small_10"><img src="http://www.fgm.cc/learn/lesson2/img/small_11.jpg" alt="small_11">
div>
<script>
var bigimg = document.getElementById("container").children[0];
var smallimgs = document.getElementById("container").children;
for(let i = 1;i < 12;i++){
smallimgs[i].onmouseover = function(){
bigimg.src = "http://www.fgm.cc/learn/lesson2/img/big_" + i + ".jpg";
}
}
script>
body>
html>
2.15 复选框全选/全不选
不感兴趣，跳过~~~~~~~~~