學習js的幾個小練習
阿新 • • 發佈：2018-12-25
這些小練習是從別人的部落格上看到的，我練手的是入門級的練習，這些小練習讓我認清了自己的能力，果然還是剛入門
，這讓一邊找工作的我非常心塞，連結貼在下面啦，入門，或者想學習的可以去看看。個人做了下面兩個練習後呢，覺得還是結合專案來做的好，裡面的小練習，專案裡面都會用到，不懂的話可以看一下練習。
連結：http://fgm.cc/learn/
好啦，接下來開啟我的練習：
1、效果非常簡單，就是五個按鈕來簡單地改變框框的樣式，但是我還是做了有一會吧，先嚐試用addEventListener()這個方法不管用，想用nodeValue來獲取按鈕的值也不管用，想將inputs[i].value的值傳入點選事件方法也遇到問題。種種嘗試之後，我發現在onclick事件中有一個this，它指向的是當前點選的一個節點，因此可以通過this.value來獲取按鈕的值，我覺得我的寫法效率不高，而不具有複用性。在這個例子中，我學會了一個挺好用的屬性cssText，可用cssText為節點新增屬性，同樣，當你將cssText中的值設定為空，那麼通過element.style.xxx修改的樣式會被覆蓋，即恢復了原來的樣式。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #outer { margin: 0 auto; width: 500px; text-align: center; } #div1 { margin: 10px auto; display: block; background: black; width: 100px; height: 100px; } </style> <script type="text/javascript" language="javascript">
//別人的寫法var changeStyle = function (elem, attr, value) { elem.style[attr] = value }; window.onload = function () { var oBtn = document.getElementsByTagName("input"); var oDiv = document.getElementById("div1"); var oAtt = ["width","height","background","display","display"]; var oVal = ["200px","200px","red","none","block"]; for (var i = 0; i < oBtn.length; i++) { oBtn[i].index = i; oBtn[i].onclick = function () { this.index == oBtn.length - 1 && (oDiv.style.cssText = "");//按位與，當前面為假時，後面的不執行） changeStyle(oDiv, oAtt[this.index], oVal[this.index]) } } };
//下面是我的寫法 window.onload = function() {
var box = document.getElementById('div1');
var inputs = document.getElementsByTagName('input');
for (var i in inputs) {
inputs[i].onclick = function() {
var value = this.value;
if (value === '變寬') {
box.style.width = '200px';
} else if (value === '變高') {
box.style.height = '200px';
} else if (value === '變色') {
box.style.backgroundColor = 'red';
} else if (value === '隱藏') {
box.style.display = 'none';
} else {
box.style.cssText = ""; //這是參照下面的寫法改了的，原來的就是一個個恢復原來的樣式。
}
}
}
}
</script>
</head>
<body>
<div id="outer">
<input type="button" value="變寬">
<input type="button" value="變高">
<input type="button" value="變色">
<input type="button" value="隱藏">
<input type="button" value="重置">
<div id="div1"></div>
</div>
</body>
</html>2、
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="test.js"></script>
<style>
html, body {
height: 100%;
}
body {
font: 12px/1.5 Tahoma;
}
body, ul, li {
margin: 0;
padding: 0;
}
ul {
overflow: hidden; //overflow:hidden;這個用法為被浮動影響而溢位的ul自動設定了高度
}
li{
list-style: none;
float: left;
}
#outer {
width: 500px;
overflow: hidden;
margin: 0 auto;
zoom: 1;
}
#skin {
margin: 10px 0;
padding: 0;
}
#skin li {
border-width: 4px;
border-style: solid;
height: 6px;
width: 6px;
margin-right: 10px;
}
#red {
border-color: red;
background-color: red;
}
#green {
border-color: green;
background-color: green;
}
#black {
border-color: black;
background-color: black;
}
#nav {
border: 1px solid white;
}
#nav li {
text-align: center;
background-color: green;
width: 82px;
line-height: 25px;
border-right: 1px solid white;
}
#nav li.last {
width: 83px;
border-right-width: 0;
}
#nav li a {
color: white;
}
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
color: white;
}
</style>
<script type="text/javascript" language="javascript">
function changeColor(color) {
/*
1、var navs = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<navs.length; i++) {}
2、var navs = document.getElementById('nav').getElementsByTagName('li').childNodes;
for (var i in navs) {}
3、var navs = document.getElementById('nav').getElementsByTagName('li');
for (var i in navs) {}
這裡不能跟onclick的用法一樣，大概是一個需要的是物件，一個需要的是節點，其實這裡還是不清楚。
*/
var navs = document.getElementById('nav').getElementsByTagName('li');
for (var i=0; i<navs.length; i++) {
// console.log(typeof i +" "+ i); //number
navs[i].style.background = ''+color;
if(color === 'green')
document.body.style.background = '#A3C5A8';
else if (color === 'red')
document.body.style.background = '#FDD';
else
document.body.style.background = '#ccc';
}
}
window.onload = function() {
var lis = document.getElementById('skin').getElementsByTagName('li');
var curt = document.getElementsByClassName('current')[0];
curt.style.background = "white";
changeColor(curt.id);
for(var i in lis) {
// console.log(typeof i +" "+i); //string
lis[i].onclick = function () {
for (var e=0; e<lis.length; e++) {
lis[e].className = "";
lis[e].style.cssText = '';
}
this.className = 'current';
this.style.backgroundColor = 'white';
changeColor(this.id);
}
}
}
</script>
</head>
<body>
<div id="outer">
<ul id="skin">
<li id="red"></li>
<li id="green" class="current"></li>
<li id="black"></li>
</ul>
<ul id="nav">
<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 class="last"><a href="">旅遊</a></li>
</ul>
</div>
</body>
</html>