JavaScript进阶任务一记录
程序记录
题目
模拟一个队列,队列的每个元素是一个数字,初始队列为空
有一个input输入框,以及4个操作按钮:
点击"左侧入",将input中输入的数字从左侧插入队列中;
点击"右侧入",将input中输入的数字从右侧插入队列中;
点击"左侧出",读取并删除队列左侧第一个元素,并弹窗显示元素中数值;
点击"右侧出",读取并删除队列又侧第一个元素,并弹窗显示元素中数值;
点击队列中任何一个元素,则该元素会被从队列中删除
程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="进阶任务一.css">
</head>
<body>
<input type="text" id="data-input">
<button id="left-in">左侧入</button>
<button id="right-in">右侧入</button>
<button id="left-out">左侧出</button>
<button id="right-out">右侧出</button>
<div id="view"></div>
<script src="JavaScript进阶任务一.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
#left-in,
#right-in,
#left-out,
#right-out {
background-color: #fff;
border: 1px solid rgb(214, 211, 211);
border-radius: 10px;
}
#left-out {
margin-left: 30px;
}
#view div {
width: 30px;
height: 30px;
line-height: 30px;
padding: 5px;
margin: 15px 15px 0 0;
float: left;
color: #fff;
}
#view div {
background-color: red;
}
var leftIn = document.getElementById("left-in");
var leftOut = document.getElementById("left-out");
var rightIn = document.getElementById("right-in");
var rightOut = document.getElementById("right-out");
var dataInput = document.getElementById("data-input")
var dataStore = [];
function addData() {
var data = dataInput.value.trim();
return data;
}
function renderList() {
var text = " ";
for (var i = 0; i < dataStore.length; i++) {
text += "<div>" + dataStore[i] + "<div>";
}
view.innerHTML = text;
}
function init() {
leftIn.addEventListener("click", function() {
var data = addData();
dataStore.unshift(data);
renderList();
})
leftOut.addEventListener("click", function() {
var data = dataStore.shift();
renderList();
alert(data);
})
rightIn.addEventListener("click", function() {
var data = addData();
dataStore.push(data);
renderList();
})
rightOut.addEventListener("click", function() {
var data = dataStore.pop();
renderList();
alert(data);
})
}
init();
知识点记录
- 队列方法
- 移出队列方法
- shift()方法:移出数组中的第一个项,同时将数组长度减1
- pop()方法:移出数组中的最后一项,同时将数组长度减1
- 添加队列方法
- unshift()方法:在数组前端添加任意个项
- push()方法:在数组后端添加任意个项
- 移出队列方法
- Javascript中实现trim()函数的两种方法
方法一:以原型方式调用,即obj.trim()形式,此方式简单且使用方面广泛,定义方式如下:
alert(document.getElementById('data').value.trim());
方法二:以工具方式调用,即trim(obj)的形式,此方式可以用于特殊处理需要,定义方式如下:
alert(trim(document.getElementById('data').value));
- JavaScript中val()和value的区别
- val()
- val()是在有jQuery插件的时候才能用
- val()获得第一个匹配元素的当前值
- val(array)check,select,radio等都能使用为之赋值
- val(function(index, value)) 设置每一个匹配元素的值
- val(val) 设置每一个匹配元素的值
- value
- value是在没有jQuery插件的情况下也能用
- this.value 获取 dom对象的值 如 text radio checkbox select 等
- val()
- CSS3 :nth-child() 选择器
- :nth-child(n) 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。
n 可以是一个数字,一个关键字,或者一个公式。 - 实例:使用公式(an+ b).描述:a代表一个循环的大小,N是一个计数器(从0开始),以及b是偏移量。 在这里,我们对所有索引是3的倍数的p元素指定了背景颜色:
p:nth-child(3n+0)
{
background:#ff0000;
}