JS Task4,5,6
2017-06-14 本文已影响0人
Hathaway_桉
js有个函数 isNaN(val)//如果是数字则返回 false
使用时候
if(!isNaN(val)){
alert("是数字");
}else{
alert("不是数字");
}
<b>任务四：</b>
图片.png
<b>任务五</b>
图片.png
队列实现形式如下：
task_2_18_1.jpg
我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
display:inline-block;
background-color: orangered;
color:white;
font-size:20px;
text-align:center;
padding:3px;
margin:2px;
cursor:pointer;
}
</style>
<script src="EventUtil.js"></script>
</head>
<body>
<input type="text" id="txt"/>
<input type="button" value="左侧入" id='left-unshift'/>
<input type="button" value="左侧出" id="left-shift"/>
<input type="button" value="右侧入" id="right-push"/>
<input type="button" value="右侧出" id="right-pop"/>
<ul id="queue"></ul>
<input type="button" value="排序" id="sort"/>
<script>
var text=document.getElementById('txt');
var queue=document.getElementById('queue');
var left_unshift=document.getElementById('left-unshift');
var left_shift=document.getElementById('left-shift');
var right_pop=document.getElementById('right-pop');
var right_push=document.getElementById('right-push');
var sort=document.getElementById('sort');
var arr2=new Array();
var item;
//添加元素
function add(direction){
if(text.value==''){
alert("请输入数字！");
//text.focus();
}else if(isNaN(text.value)){
alert("输入的数字不合法，请重新输入一个数字");
text.value='';
//text.focus();
}else if(!isNaN(text.value)){
if(text.value>=10&&text.value<=100){
var list=document.createElement('li');
list.style.height=text.value+'px';
arr2.push(text.value);
text.value = '';
text.focus()
if(direction==="left"){
if(queue.childNodes.length<=60){
queue.insertBefore(list,queue.firstChild);
}else{
alert("队列元素超出60！");
}
}else if(direction==="right"){
if(queue.childNodes.length<=60){
queue.appendChild(list);
}else{
alert("队列元素超出60！");
}
}
}else{
alert("请输出的数字在10-100！");
}
//在这里插入之后立即添加click事件
list.onclick = function(){
Delete(this);
}
}
}
//删除元素
function DeleteElement(direction){
if(queue.childNodes.length<=0){
alert("不存在元素可以删除");
//return false;
}else{
if(direction==="left"){
queue.removeChild(queue.firstChild);
}else if(direction==='right'){
queue.removeChild(queue.lastChild);
}
}
}
function sortArr(arr){
arr.sort(function(a,b){
return a-b;
});
return arr;
}
left_unshift.onclick=function(){
add("left");
};
left_shift.onclick=function(){
DeleteElement("left");
};
right_pop.onclick=function(){
DeleteElement("right");
};
right_push.onclick=function(){
add("right");
};
sort.onclick=function(){
//debugger;
sortArr(arr2);//排序后的高度数组
//console.log(arr2);
var list2=document.getElementsByTagName('li');//获取所有现在所有Li标签的高度数组
for(var i=0;i<arr2.length ;i++){
list2[i].style.height=arr2[i] + 'px';
}
};
//删除元素
function Delete(obj){
obj.parentNode.removeChild(obj);
}
<b>任务六:</b>
图片.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
display:inline-block;
background-color: orangered;
color:white;
font-size:15px;
text-align:center;
padding:3px;
margin:2px;
cursor:pointer;
/* width:60px;
height:30px;*/
}
.match{
background-color: blue;
}
</style>
</head>
<body>
<textarea type="text" id="txt" width="200px" height="100px"></textarea>
<input type="button" id="left_add" value="左入"/>
<input type="button" id="left_del" value="左出"/>
<input type="button" id="right_add" value="右入"/>
<input type="button" id="right_del" value="右出"/>
<input type="button" id="search" value="查询"/>
<input type="text" id="valueBox"/>
<ul id="space">
</ul>
<script>
//获得各种按钮的标签
var text=document.getElementById('txt');
var left_add=document.getElementById('left_add');
var left_del=document.getElementById('left_del');
var right_add=document.getElementById('right_add');
var right_del=document.getElementById('right_del');
var btn2=document.getElementById('search');
var arr=[];
//根据方向判断左加还是右加
function add(direction){
if(text.value==''){
alert("请输入!不能为空！");
}else{
//这两句话很重要！
var str=text.value.replace(/[^0-9a-zA-Z\u4e00-\u9fa5]+/g," ");
arr=arr.concat(str);
for(var i=0;i<arr.length;i++){
var li=document.createElement("li");
li.innerHTML=arr[i];
li.style.width=arr[i].length*10+'px';
var ul=document.getElementById('space');
text.value='';
}
if(direction=='left'){
ul.insertBefore(li,ul.firstChild);
}else if(direction=='right'){
ul.appendChild(li);
}
}
}
function del(direction){
if(ul.childNodes.length<=0){
alert("没有要删除的元素！");
}else if(direction==='right'){
ul.removeChild(ul.lastChild);
}else if(direction==='left'){
ul.removeChild(ul.firstChild);
}
}
function search(){
var searchValue=document.getElementById('valueBox').value;
var lis=document.getElementsByTagName('li');
for(var i=0;i<arr.length;i++){
var reg=new RegExp(searchValue);
lis[i].innerHTML=lis[i].innerHTML.replace(reg,"<span class='match'>"+searchValue+"</span>");
}
}
left_add.onclick=function(){
add('left');
};
right_add.onclick=function(){
add('right');
};
left_del.onclick=function(){
del('left');
};
right_del.onclick=function(){
del('right');
};
btn2.onclick=function(){
search();
};
</script>
</body>
</html>
知识点一：
针对第三条需要输入的内容用正则表达式匹配，将英文，中文和数字以外的字符用空格来代替。
[A-Za-z0-9\u4e00-\u9fa5]
推荐笔记：
http://ife.baidu.com/note/detail/id/1034
http://ife.baidu.com/note/detail/id/718
<h2>关于DOM的操做</h2>
HTML DOM 对象 - 方法和属性
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
