JavaScript实现正序和倒序
程序员文章站
2022-03-22 21:44:41
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
body{
width: 600px;
height: 400px;
margin: 50px auto;
}
li{
list-style: none;
width: 100px;
height: 50px;
margin-right: 10px;
margin-top: 10px;
text-align: center;
line-height: 50px;
background-color: #eee;
float: left;
}
</style>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<button id="btn_x">倒序</button>
</body>
<script>
var liList = document.querySelectorAll("li");
var btn_x=document.getElementById("btn_x");
var x_num = false;
btn_x.onclick=function() {
if(x_num == false) {
for(var i = liList.length - 1; i > -1; i--) {
document.querySelector("ul").appendChild(liList[i]);
}
x_num = true;
this.innerHTML="正序";
} else if(x_num == true) {
for(var i = 0; i < liList.length; i++) {
document.querySelector("ul").appendChild(liList[i]);
}
x_num = false;
this.innerHTML="倒序";
}
};
</script>
</html>推荐阅读
-
javascript select列表内容按字母倒序排序与按列表倒序排列
-
对Python中list的倒序索引和切片实例讲解
-
详解JavaScript对数组操作（添加/删除/截取/排序/倒序）
-
javascript select列表内容按字母倒序排序与按列表倒序排列
-
Blogger和WordPress的倒序显示
-
对Python中list的倒序索引和切片实例讲解
-
详解JavaScript对数组操作（添加/删除/截取/排序/倒序）
-
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
-
JavaScript实现数字数组按照倒序排列的方法_javascript技巧
-
Lua实现正序和倒序的文件读取方法