JavaScript实现正序和倒序

最新推荐文章于 2024-08-05 15:45:51 发布

搁天124

最新推荐文章于 2024-08-05 15:45:51 发布

阅读量2.9k

点赞数

分类专栏：杂项文章标签： ja javascript 正序倒序

本文链接：https://blog.csdn.net/sinat_37475163/article/details/78432474

版权

杂项专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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.οnclick=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>