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元素,用于展示选中的元素 -->
<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>
JavaScript之V字旋转小练习相关推荐
- 利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
- 井字棋小游戏代码(Visual Studio)
#include<graphics.h> #include<conio.h> #include<iostream> #include "ImagePng. ...
- 2022-08-04 乐理知识(三) 如何打拍子——V字打拍法,三角形打拍法,常见节奏型:二八,四十六,前十六后八,前八后十六,前后附点,大附点,大小切分,八三拍的节奏型及其变体
文章目录 一.四拍一个小节时如何打拍子? 0."V"字打拍法 1.给四分音符打拍子 示例1:以"四二拍"<小星星>为例 示例2:遇到休止符可以先从念 ...
- 第四章 V字时空转化理论一、在江恩理论中时间和空间的关系
时间(时间轴)可以转化为空间(股价),空间(股价)可以转化为时间.用可以的意思是,可以不转化.或者分别转化.这个理论笔者称为V字时空转化理论.这个理论江恩表达出来部分使用方式,但是没有表达出来数学拟合 ...
- python井字棋_用Python做一个井字棋小游戏
井字棋是一个经典的小游戏,在九宫格上玩家轮流画OXO,当每列或每行或是两个对角成一线时便是获胜. 今天就用Python编写一个井字棋小游戏,与电脑对战. 程序执行画面如下图所示: 程序提供了两种人工智 ...
- Adobe Illustrator CS6 界面文字按钮太小,高分屏win10PS/AI等软件界面字太小解决方法
Adobe Illustrator CS6 界面文字按钮太小,高分屏win10PS/AI等软件界面字太小解决方法 参考文章: (1)Adobe Illustrator CS6 界面文字按钮太小,高分屏 ...
- JavaScript实现squareMatrixRotation方阵旋转算法(附完整源码)
JavaScript实现squareMatrixRotation方阵旋转算法(附完整源码) squareMatrixRotation.js完整源代码 squareMatrixRotation.test ...
- 用Unity3D实现简单的井字棋小游戏
用Unity3D实现简单的井字棋小游戏 项目地址 井字棋小游戏 完成效果图 实现思路 首先定义游戏的数据部分: /* 井字棋中每一个棋格中的逻辑控制常量,代表这个棋格的状态 */ private co ...
- java犯的小错误_[Java教程]十个JavaScript中易犯的小错误,你中了几枪?
[Java教程]十个JavaScript中易犯的小错误,你中了几枪? 0 2015-06-01 12:00:19 序言 在今天,JavaScript已经成为了网页编辑的核心.尤其是过去的几年,互联网见 ...
最新文章
- 跨平台PHP调试器设计及使用方法——高阶封装
- 2017广西邀请赛重现赛
- AQS.accquire
- 04-1.jQuery事件与补充each/data
- python怎么获取lol皮肤名称_LOL手游免费皮肤获得方法 LOL手游皮肤怎么获得
- Jmeter之性能测试类型
- 泊松分布的期望和方差_表白不怕白努力,几何分布来帮忙
- Linux内核深入理解定时器和时间管理(4):定时器 timer
- python的httplib、urllib和urllib2的区别及应用
- 列表推导式 生成器表达式
- IMDB.TOP250.2020.09.BluRay.1080p.x265.10bit
- java计算机毕业设计医疗器械销售电子商城源码+系统+mysql数据库+lw文档
- 思岚A1激光雷达的测试(windows)
- luogu 2411 白银莲花池 luogu 1606 Lilypad Pond
- 大数开根 高精度 平方根
- MissionPlanner MP地面站添加三维地图支持
- ubuntu 坚果云无法切换用户[closed]
- SVG:linearGradient渐变在直线上失效的问题解决方案
- Mac 应用中支持Dark Mode(深色模式)
- html div 区域,div全称division,意为“区分”。div标签被称为区隔标签,表示一块可显示 HTML 的区域。DIV的主要属性有( )...