JavaScript之V字旋转小练习
目录
- 一、前言
- 二、Html和CSS部分
-
- 1.Html部分
- 2.CSS部分
- 三、JavaScript部分
-
- 1.获取元素
- 2. 创建元素
- 3.按钮事件
- 4.元素事件
- 5.还原效果
- 四、完整代码
一、前言
这是一个采用JavaScript编程的一个小的练习，通过点击按钮来使V字进行旋转。并且我们可以通过span来显示我们选中的元素是第几个元素，可以通过选择颜色来改变元素的颜色。
但是，当我们点击按钮之后，元素的颜色和span里面的内容会变为初始值。
二、Html和CSS部分
因为这个项目主要是采用JavaScript编程，所以Html和CSS部分的代码使用非常简单。
1.Html部分
<div id="fs">div>
<input type="button" value="按钮" id="btn">
<span id="sp">您目前没有选中元素span>
<input type="color" value="#FF0000" id="inputColor">
在Html部分，定义一个大的div，之后会通过插入元素的方式，在这个盒子里面放入五个元素。
按钮部分通过一个type值为button的input来实现。
span部分通过初始给span一个innerHtml，之后会通过JavaScript来改变span中的innerHtml。
颜色选择器通过一个type为color的input实现，在运行的时候，可以通过改变input的value值来改变元素的颜色。
2.CSS部分
/* 因为CSS部分代码不重要，所以采用叠写的形式 */
input, span
{ float: right; margin: 20px; }
#fs div
{ width: 50px; height: 50px; font-size: 28px;
color: white; background-color: red;
position: absolute; text-align: center;
line-height: 50px; display: none; }
三、JavaScript部分
1.获取元素
var fs = document.getElementById('fs');
var btn = document.getElementById('btn');
var sp = document.getElementById('sp');
var inputColor =document.getElementById('inputColor');
2. 创建元素
因为我们并没有在Html中创建div元素，所以我们采用在JavaScript中生成的方式来创建元素，并插入到div(fs)中。
for (var i = 0; i < 5; i++) {
//创建元素
var oDiv = document.createElement('div');
//在新建的元素中插入数字
oDiv.innerHTML = i;
//插入到fs盒子中
fs.appendChild(oDiv);
}
var allDiv = fs.children;
3.按钮事件
在按钮事件中，我们需要实现的是点击按钮，然后V字进行旋转。在这里我们需要使用到循环，通过循环来调整V字中元素的位置，达到旋转的效果。
//if-else版循环
num++;
if (num % 4 == 1) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.left = 50 * i + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '100px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else{
allDiv[i].style.top = '0px';
}
}
}
else if (num % 4 == 2) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px';
}
else {
allDiv[i].style.left = '100px';
}
}
}
else if (num % 4 == 3) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.left = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '0px'
}
else if (i % 2 == 1) {
allDiv[i].style.top = '50px'
}
else {
allDiv[i].style.top = '100px';
}
}
}
else if (num % 4 == 0) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '100px'
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px'
}
else {
allDiv[i].style.left = '0px'
}
}
}
//switch版循环
switch (num) {
case 0:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.left = 50 * i + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '100px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else {
allDiv[i].style.top = '0px';
}
}
num++;
break;
case 1:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px';
}
else {
allDiv[i].style.left = '100px';
}
}
num++;
break;
case 2:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.left = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else {
allDiv[i].style.top = '100px';
}
}
num++;
break;
case 3:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '100px'
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px'
}
else {
allDiv[i].style.left = '0px'
}
}
num = 0;
break;
}
4.元素事件
当我们选中元素的时候，span元素里面的内容会随之改变。
当我们选中元素的时候，如果改变inputColor的value值，盒子元素的颜色也会随之改变。
for (var i = 0; i < allDiv.length; i++) {
//可以在js对象里面看见
allDiv[i].index = i;
allDiv[i].onclick = function () {
needDOM = this;
sp.innerHTML = "您选中的是" + this.index + "号元素"
}
}
inputColor.oninput = function () {
if (needDOM = '') {
alert('您还没有选择到元素');
return;
} else {
needDOM.style.backgroundColor = this.value;
}
}
5.还原效果
当我们点击按钮的时候，盒子元素和span元素会初始化，这里我们就需要在点击事件里面加入实现还原效果的代码。
sp.innerHTML = "您没有选中元素";
inputColor.value = '#ff0000';
四、完整代码
<style>
* {
margin: 0px;
padding: 0px;
}
input,
span {
float: right;
margin: 20px;
}
#fs div {
width: 50px;
height: 50px;
font-size: 28px;
color: white;
background-color: red;
position: absolute;
text-align: center;
line-height: 50px;
display: none;
}
style>
<body>
<div id="fs">div>
<input type="button" value="按钮" id="btn">
<span id="sp">您目前没有选中元素span>
<input type="color" value="#FF0000" id="inputColor">
body>
<script>
var fs = document.getElementById('fs');
var btn = document.getElementById('btn');
var sp = document.getElementById('sp');
var inputColor = document.getElementById('inputColor');
for (var i = 0; i < 5; i++) {
var oDiv = document.createElement('div');
oDiv.innerHTML = i;
fs.appendChild(oDiv);
}
var allDiv = fs.children;
var needDOM = '';
//元素事件
for (var i = 0; i < allDiv.length; i++) {
//可以在js对象里面看见
allDiv[i].index = i;
allDiv[i].onclick = function () {
needDOM = this;
sp.innerHTML = "您选中的是" + this.index + "号元素"
}
}
inputColor.oninput = function () {
if (needDOM = '') {
alert('您还没有选择到元素');
return;
} else {
needDOM.style.backgroundColor = this.value;
}
}
// 按钮事件
var num = 0;
btn.onclick = function () {
sp.innerHTML = "您没有选中元素";
inputColor.value = '#ff0000';
// if-else版的V字旋转
/*
num++;
if (num % 4 == 1) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.left = 50 * i + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '100px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else{
allDiv[i].style.top = '0px';
}
}
}
else if (num % 4 == 2) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px';
}
else {
allDiv[i].style.left = '100px';
}
}
}
else if (num % 4 == 3) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.left = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '0px'
}
else if (i % 2 == 1) {
allDiv[i].style.top = '50px'
}
else {
allDiv[i].style.top = '100px';
}
}
}
else if (num % 4 == 0) {
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '100px'
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px'
}
else {
allDiv[i].style.left = '0px'
}
}
} */
//switch版本的V字旋转
switch (num) {
case 0:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.left = 50 * i + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '100px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else {
allDiv[i].style.top = '0px';
}
}
num++;
break;
case 1:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px';
}
else {
allDiv[i].style.left = '100px';
}
}
num++;
break;
case 2:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.left = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.top = '0px';
} else if (i % 2 == 1) {
allDiv[i].style.top = '50px';
}
else {
allDiv[i].style.top = '100px';
}
}
num++;
break;
case 3:
for (var i = 0; i < allDiv.length; i++) {
allDiv[i].removeAttribute('style');
allDiv[i].style.display = 'block';
allDiv[i].style.top = i * 50 + 'px';
if (i % 4 == 0) {
allDiv[i].style.left = '100px'
} else if (i % 2 == 1) {
allDiv[i].style.left = '50px'
}
else {
allDiv[i].style.left = '0px'
}
}
num = 0;
break;
}
}
script>