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 等
CSS3 :nth-child() 选择器

:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
实例：使用公式（an+ b）.描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。在这里，我们对所有索引是3的倍数的p元素指定了背景颜色：

p:nth-child(3n+0)
{
    background:#ff0000;
}

JavaScript进阶任务一记录

JavaScript进阶任务一记录

程序记录

题目

程序

知识点记录

猜你喜欢