javescript第八天

阿新 • • 發佈：2020-12-17

通過js實現點選按鈕圖片從大到小從小到大隨機排序
html樣式

<body>
	<div id="div1">
		<a href="#">從大到小</a>
		<a href="#">隨機排序</a>
	</div>
	<div id="div2">
		<p><img src="img/1.jpg"><br>美女1</p>
		<p><img 
 src="img/2.jpg"><br>美女2</p>
		<p><img src="img/3.jpg"><br>美女3</p>
		<p><img src="img/4.jpg"><br>美女4</p>
		<p><img src="img/1.jpg"><br>美女5</p>
		<p><img src="img/2.jpg" 
><br>美女6</p>
		<p><img src="img/3.jpg"><br>美女7</p>
		<p><img src="img/4.jpg"><br>美女8</p>
	</div>

</body>

css樣式

style>
		#div1 {
			text-align: center;
		}

		#div1 a {
			display: inline-block;
			width: 80px; 

			height: 40px;
			line-height: 40px;
			background: red;
			color: #fff;
			text-decoration: none;
			margin-right: 20px;
		}

		#div1 a {
			color: #fff;
			background: red;
		}

		#div2 {
			text-align: center;
			width: 800px;
			margin: 0 auto;
		}

		#div2 p {
			float: left;
			width: 200px;
			height: 200px;
		}

		#div2 img {
			width: 100%;
			height: 100%;
		}
	</style>
</head>

js樣式

<script>
	var btns = document.getElementById('div1').getElementsByTagName('a');
	var o = document.getElementById('div2');
	var ps = o.getElementsByTagName('p');
	var arr = [];
	for (var i = 0; i < ps.length; i++) {
		arr.push(ps[i]);
	}

	
	btns[0].onclick = function () {
		
		arr.reverse();
		
		var s = '';
		arr.forEach(function (item) {
			s += "<p>" + item.innerHTML + "</p>";
		});
		o.innerHTML = s;
		// console.log(ps);
	};

	
	btns[1].onclick = function () {
		var arr = [];
		for (var i = 0; i < ps.length; i++) {
			arr.push(ps[i]);
		}
		
		arr.sort(function (a, b) {
			return Math.random() - 0.5;
		});
		
		var s = '';
		arr.forEach(function (item) {
			s += "<p>" + item.innerHTML + "</p>";
		});
		o.innerHTML = s;
	};

實現這個功能要了解reverse（）；這個倒敘功能，
第一步(順序排序)
遍歷陣列，取出p
宣告一個變數，用來儲存陣列的內容
第二步
變數 += 標籤 +文字內容
顯示圖片

倒序排序只用使用arr.reverse();這個，可以人陣列倒序
隨機排序
取隨機數，隨機取數，要正值，負值都有，所以減0.5

javescript第八天

通過js實現點選按鈕圖片從大到小從小到大隨機排序 html樣式 <body> <div id="div1">

第八天學習進度--Kmeans的應用之文字聚類

文字的聚類，就是為了解決大批量文字的自動分類的問題。之前遇到過這樣一個問題，就是有一堆文章的資料，想要得到這些文章對應的類別。但是這堆文章的資料裡面並沒有分類的資訊，要是按照傳統方式，需要人工對每篇文

django學習第八天

orm多條操作刪除和修改修改在一對一和一對多關係時，和單表操作是一樣的一對一一個作者對應一個資訊

【刷題第八天】貪心——C++

【題目描述】有n堆紙牌，編號分別為 1，2，…,n。每堆上有若干張，但紙牌總數必為n的倍數。可以在任一堆上取若干張紙牌，然後移動。移牌規則為：在編號為1的堆上取的紙牌，只能移到編號為 2 的堆上；在編號為

第八天第六章匿名函式

# 匿名函式即沒有名字的函式，通常情況下這種函式只使用一次：result = lambda [arg1 [,arg2,...argn]]:expression

第八天第六章實戰

# 一、選角色 # 方法列印演員開始出演這個劇本 def Scrip(lead): print(lead +\'開始參演這個劇本\')

學習第八天

C語言 for語句的一般形式、 for——迴圈結構 for（：） int a, sum = 0; for (a = 1; a <= 100; a++)

學習自動化運維的第八天（非關係型資料庫Memcached&Redis構建快取伺服器）

一、前言許多Web應用都將資料儲存到關係型資料庫( RDBMS)中，應用伺服器從中讀取資料並在瀏覽器中顯示。但隨著資料量的增大、訪問的集中，就會出現RDBMS的負擔加重、資料庫響應惡化、網站顯示延遲等重大影

河北重大技術需求開發第七版開發第八天

今天完成了一個上傳檔案的功能在網頁點選上傳可以將檔案上傳到java檔案下 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {