发现了个很好的原生js练手的地方，特此开个博文作为记录
练手地址
每个项目的反思部分才是最重要的，那里写着和标准答案的差距！！！
以下是我对每个题目的解答，不标准，只是做个记录而已。 方便以后实力增加后回来修改自己现在写的垃圾代码
1.1 控制div属性
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
body{
text-align: center;
}
#demo{
width: 100px;
height: 100px;
background-color: black;
margin: 10px auto;
}
</style>
</head>
<body>
<input type="button" id="changewidth" value="变宽">
<input type="button" id="changeheight" value="变高">
<input type="button" id="changecolor" value="变色">
<input type="button" id="changedisplay" value="隐藏">
<input type="button" id="resert" value="重置">
<div id="demo"></div>
<script>
var wid = document.getElementById("changewidth");
var hei = document.getElementById("changeheight");
var col = document.getElementById("changecolor");
var dis = document.getElementById("changedisplay");
var res = document.getElementById("resert");
var demo = document.getElementById("demo");
wid.onclick = function(){
demo.style.width = "200px";
}
hei.onclick = function(){
demo.style.height = "200px";
}
col.onclick = function(){
//要注意，这里不能用background-color
demo.style.backgroundColor = "red";
}
dis.onclick = function(){
demo.style.display = "none";
}
res.onclick = function(){
//这里只是为了调用demo原来的style，style没有变，所以这样写可以。
//还能写成demo.style = " ";
//但是style改变了就不能这样写了，因为demo.style不是一个对象
demo.style = {};
}
</script>
</body>
</html>
1.2 网页换肤
分析：
a.最上面三个按钮，点击后中间会出现个白色部分并且改变网页的背景色，鼠标点击一个按钮，其他按钮会恢复原样。
b.导航栏的颜色也会变成按钮颜色。并且鼠标移到按钮上，鼠标形状会变，并且会有解释出现。
c.下面有一个导航栏，鼠标移上去会有下划线出现。
d.最开始，第二个按钮默认被点击了。
实现思路：
三个按钮，可以用button(不推荐，有默认样式）,li,div来写。鼠标移上去会有解释，那么要给设置title属性。中间出现白色部分，将背景色改成白色，设置个边框，颜色为原来的背景色，改变一下宽度高度就行了。（我以前的思路是在li中加一个div，加了3个标签，很麻烦，弃用了）。将鼠标变为小手cursor:pointer;。其他按钮恢复原样：在点击其中一个按钮时，让其他两个按钮恢复原来的样式。默认点击了第二个按钮：在最开始创建一个自执行函数，将第二个按钮的点击事件运行一遍。
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
#btn-container{
list-style-type: none;
padding-left: 30%;
}
#btn-container li{
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
}
/*鼠标浮动到li上时使鼠标变为小手*/
#btn-container li:hover{
cursor: pointer;
}
#btn-container :first-child{
background-color: red;
}
#btn-container :nth-child(2){
background-color: green;
}
#btn-container :last-child{
background-color: black;
}
#link-container{
padding-left: 30%;
}
#link-container > li{
text-align: center;
width: 82px;
height: 25px;
border: 1px solid white;
display: inline-block;
}
#link-container > li > a{
/*去掉链接下划线*/
text-decoration: none;
color: white;
}
#link-container > li > a:hover{
/*加上链接下划线*/
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="btn-container">
<!--因为将li设置成了行内块元素，所以将每个li之间的空格去掉，以免产生间隔-->
<li title="红色"></li><li title="绿色"><div class="insertBox"></div></li><li title="黑色"><div class="insertBox"></div></li>
</ul>
<ul id="link-container">
<li><a href="#">新闻</a></li><li><a href="#">娱乐</a></li><li><a href="#">体育</a></li><li><a href="#">电影</a></li><li><a href="#">音乐</a></li><li><a href="#">旅游</a></li>
</ul>
<script>
var btns = document.getElementById("btn-container");
var links = document.getElementById("link-container");
//自执行函数，在最开始就把第二个按钮的点击事件执行一遍
(function(){
//网页背景色换色
document.body.style.backgroundColor = "#A3C5A8";
//按钮换色添加空白
btns.children[1].style.backgroundColor = "white";
btns.children[1].style.border = "5px solid green";
btns.children[1].style.width = "10px";
btns.children[1].style.height = "10px";
//让其他两个按钮恢复原样式
btns.children[0].style.width = "20px";
btns.children[0].style.height = "20px";
btns.children[0].style.backgroundColor = "red";
btns.children[0].style.border = "0";
btns.children[2].style.width = "20px";
btns.children[2].style.height = "20px";
btns.children[2].style.backgroundColor = "black";
btns.children[2].style.border = "0";
//让导航条颜色和按钮颜色一样
for(var i = 0;i < 6;i++){
links.children[i].style.backgroundColor = "green";
}
})();
btns.children[0].onclick = function(){
//网页背景色换色
document.body.style.backgroundColor = "pink";
//按钮换色添加空白
btns.children[0].style.backgroundColor = "white";
btns.children[0].style.border = "5px solid red";
btns.children[0].style.width = "10px";
btns.children[0].style.height = "10px";
//让其他两个按钮恢复原样式
btns.children[1].style.width = "20px";
btns.children[1].style.height = "20px";
btns.children[1].style.backgroundColor = "green";
btns.children[1].style.border = "0";
btns.children[2].style.width = "20px";
btns.children[2].style.height = "20px";
btns.children[2].style.backgroundColor = "black";
btns.children[2].style.border = "0";
//让导航条颜色和按钮颜色一样
for(var i = 0;i < 6;i++){
links.children[i].style.backgroundColor = "red";
}
};
btns.children[1].onclick = function(){
//网页背景色换色
document.body.style.backgroundColor = "#A3C5A8";
//按钮换色添加空白
btns.children[1].style.backgroundColor = "white";
btns.children[1].style.border = "5px solid green";
btns.children[1].style.width = "10px";
btns.children[1].style.height = "10px";
//让其他两个按钮恢复原样式
btns.children[0].style.width = "20px";
btns.children[0].style.height = "20px";
btns.children[0].style.backgroundColor = "red";
btns.children[0].style.border = "0";
btns.children[2].style.width = "20px";
btns.children[2].style.height = "20px";
btns.children[2].style.backgroundColor = "black";
btns.children[2].style.border = "0";
//让导航条颜色和按钮颜色一样
for(var i = 0;i < 6;i++){
links.children[i].style.backgroundColor = "green";
}
};
btns.children[2].onclick = function(){
//网页背景色换色
document.body.style.backgroundColor = "#ccc";
//按钮换色添加空白
btns.children[2].style.backgroundColor = "white";
btns.children[2].style.border = "5px solid black";
btns.children[2].style.width = "10px";
btns.children[2].style.height = "10px";
//让其他两个按钮恢复原样式
btns.children[0].style.width = "20px";
btns.children[0].style.height = "20px";
btns.children[0].style.backgroundColor = "red";
btns.children[0].style.border = "0";
btns.children[1].style.width = "20px";
btns.children[1].style.height = "20px";
btns.children[1].style.backgroundColor = "green";
btns.children[1].style.border = "0";
//让导航条颜色和按钮颜色一样
for(var i = 0;i < 6;i++){
links.children[i].style.backgroundColor = "black";
}
};
</script>
</body>
</html>
（代码中运用了大量的伪类，伪元素和children方法，是为了练一下这些）
看了标准答案代码的反思
window.onload = function ()
{
var oLink = document.getElementsByTagName("link")[0];
var oSkin = document.getElementById("skin").getElementsByTagName("li");
for(var i = 0; i< oSkin.length; i++)
{
oSkin[i].onclick = function ()
{
for(var p in oSkin) oSkin[p].className = "";
this.className = "current";
oLink['href'] = this.id + ".css";
}
}
};
它用for循环便利了每个按钮的点击事件，再用for in遍历每个按钮的属性，反正就是极大的简化了代码量，它有工厂模式的思维，可以”批量“生产，自己接下来的题目要多用循环遍历每个对象
1.3 函数接受参数并弹出
分析
a.一个表单，包含两个输入框，和一个button按钮
b.两个输入框上有默认值
c.点击按钮后将表单内容alert出来（其实就是模仿和后台交互）
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
form{
text-align: center;
}
form :nth-of-type(1),:nth-of-type(2){
width: 174px;
height: 24px;
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<form action="">
<input id="info-1" type="text" value="北京市">
<input id="info-2" type="text" value="朝阳区">
<input id="button" type="button" value="传参">
</form>
<script>
var input_1= document.getElementById("info-1");
var input_2 = document.getElementById("info-2");
document.getElementById("button").onclick = function(){
alert(input_1.value);
alert(input_2.value);
};
</script>
</body>
</html>
这道题要注意var input_1= document.getElementById(“info-1”);在点击事件执行之前要只找到那个元素，不能直接就获得那个value，若是直接获得那个value了，那么就一直会是之前设定的初始值（本例中的北京市，朝阳区），即使你后面修改了再点击按钮，这个值是没变的，所以必须再按钮点击事件进行时获得value，这样才能保证实时获得输入框中value的值。
1.4 用循环将三个div变成红色
分析：一个button按钮，三个初始背景色为黑色的div方块，点击按钮后三个div背景色变为红色
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
input{
display: block;
margin: 0 auto;
}
#container{
width: 330px;
margin: 10px auto;
}
#container>div{
width: 100px;
height: 100px;
/*这样是为了保证左右一样，更好的居中*/
margin: 0 5px;
background-color: black;
display: inline-block;
}
</style>
</head>
<body>
<input type="button" value="点击将DIV变成红色">
<div id="container">
<div></div><div></div><div></div>
</div>
<script>
var divs = document.getElementById("container").children;
var button = document.getElementsByTagName("input")[0];
button.onclick = function(){
for(var i = 0;i < 3;i++){
divs[i].style.backgroundColor = "red";
}
};
</script>
</body>
</html>
1.5 鼠标移入移出改变样式
分析：一个div，背景为黑色，里面有一些文字内容。鼠标移入后会改变鼠标样式并且改变div的样式，鼠标移出后又恢复原样式
思路：鼠标移入移出则想到onmouseover,onmouseout事件。完整的Event对象
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
div{
width: 160px;
height: 160px;
background-color: black;
margin: 10px auto;
padding: 20px;
}
div>span{
color: white;
font-size: 10px;
}
</style>
</head>
<body>
<div>
<span>鼠标移入改变样式，鼠标移出恢复</span>
</div>
<script>
var textcontainer = document.getElementsByTagName("div")[0];
//鼠标移入
textcontainer.onmouseover = function(){
textcontainer.style.padding = "10px";
textcontainer.style.border = "10px solid red";
textcontainer.style.backgroundColor = "#f0f0f0";
//改变鼠标样式
textcontainer.style.cursor = "crosshair";
textcontainer.children[0].style.color = "red";
}
//鼠标移出
textcontainer.onmouseout = function(){
//div的样式不变
textcontainer.style = "";
//span的样式不变
textcontainer.children[0].style = "";
}
</script>
</body>
</html>
反思：我用dom操作在js代码中加入了css样式，这样是很混乱的。其实可以在css中加一个div.mouseover{}样式，那么当鼠标移上去时就给div添加个class=“mouseover”,就可以调用div.mouseover{}样式，当鼠标移走时class=" ",就不能调用div.mouseover{}样式了，这样代码就简单多了！！！
1.6 记住密码提示框
分析：一个多选框，后面跟了一句话。当鼠标移动到多选框以及文字上会在下方显示一个带有文字的div
思路：在css中将鼠标移动到上面和未移动上面的样式都写好，移动或未移动到上面时的，添加或删除class属性，分别调用各自代表的样式
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo-1.1</title>
<style>
body{
text-align: center;
}
div{
display: none;
}
div.mouseover{
display: block;
background-color: #ffefa4;
border: 1px solid #f90;
/*定义宽度，高度由内容撑开*/
width: 200px;
margin-left: 45.3%;
}
</style>
</head>
<body>
<label for="checkbox"><input type="checkbox" id="checkbox">两周内自动登陆</label>
<div>为了您的信息安全，请不要在网吧或公共网络使用此功能！</div>
<script>
var temp = document.getElementsByTagName("label")[0];
var newtemp = document.getElementsByTagName("div")[0];
temp.onmouseover = function(){
newtemp.className = "mouseover";
};
temp.onmouseout = function(){
newtemp.className = "";
};
</script>
</body>
</html>
为什么要用label标签？主要是为了增加用户体验而已，让用户点击文字也能选中选框。label里面的for属性是绑定标签id的，label里的文字绑定了一个选框，label是行内元素。那点击文字就能选中那个被绑定的选框。更详细的解释1，更详细的解释2。
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
