每天學一jquery外掛-做個點名器

做個點名器

剛學程式設計的時候完全是摸瞎，啥需求的完不成，記憶猶新的就是之前給做過winform版本的點名器，其實現在想想原理賊雞兒簡單，然後我搞了一下web版的。

實現效果
在這裡插入圖片描述

程式碼部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>做個點名器</title>
		<script src=" 
js/jquery-3.4.1.min.js"></script>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#div{
				border: 1px solid lightgray;
				width: 200px;
				height: 50px;
				margin: 10px auto;
				overflow: hidden;
				cursor: pointer;
			}
			.item{
				width: 100%;
				height: 100%;
				color: gray; 

				font-size: 24px;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>
	<body>
		<div id="div"></div>
		<input type="file" id="file" />
	</body>
</html>
< 
script>
	$(function(){
		var arr = [];
		$("#file").change(function(){
			var f = $(this)[0].files[0];
			if(f){//假如有檔案就讀
				var  reader = new FileReader();
				reader.readAsText(f);
				reader.onload=function(e){
					var str = e.target.result;
					arr = str.split("-");
					draw();
				}
			}else{
				arr = [];
				draw();
			}
		})
		var flag = true;
		var t = null;
		$("#div").click(function(){
			if(arr.length>0){
				//開始
				if(flag){
					flag = false;
					t =setInterval(function(){
						var count = Math.floor(Math.random()*arr.length);
						var temp = count*$("#div").height();
						$(".item").first().css("margin-top","-"+temp+"px")
					},40)
				}else{
					clearInterval(t);
					flag = true;
				}
			}else{
				alert("請選擇正確的檔案")
			}
		})
		var draw = function(){
			$("#div").html("");
			arr.forEach(item=>{
				var $item = $("<div class='item'>"+item+"</div>");
				$item.appendTo($("#div"));
			})
		}
	})
</script>

實現思路

需求就是名單是使用者自己準備的，然後你要給個隨機點名的效果就行了，所以我們實現讀取檔案，然後處理成對應的格式就行了
接著渲染成dom
然後就是計時器不斷跳動弄得隨機的樣子，然後就是關閉或者啟動計時器就ok了

每天學一個jquery外掛-做個點名器

每天學一jquery外掛-做個點名器

做個點名器

每天學一個jquery外掛-做個點名器

每天學一個jquery外掛-做拖動效果1

每天學一個jquery外掛-仿樓梯滾動

每天學一個jquery外掛-彈出提示框2

每天學一個jquery外掛-圖示的動畫

每天學一個jquery外掛-記分牌效果

每天學一個jquery外掛-B站的景深

每天學一個jquery外掛-密碼的等級

每天學一個jquery外掛-滑鼠的特效

每天學一個jquery外掛-css實現電風扇2

每天學一個jquery外掛-五角星打分

每天學一個jquery外掛-五角星打分2

每天學一個jquery外掛-省市縣聯動

每天學一個jquery外掛-滑動的底邊

每天學一個jquery外掛-自定義標題

每天學一個jquery拆件-圖片的預覽

分享一個JQuery 圖片裁剪外掛，然後用C# 把裁剪的圖片儲存在本地

420一個畫素多少個位元組_一個Java方法能有多少個引數型別？這個好奇coder做了個實驗...

每天做個 SPA ：攀高智慧頸椎按摩儀 89 元

10個比較有用的jQuery外掛

每天學一個jquery外掛-做個點名器

每天學一jquery外掛-做個點名器

做個點名器

相關推薦