怎么改为点一下文字开始滚动，再点一下暂停呢，，改完私我加V给酬劳，大佬会改的话帮改一下超级无敌谢谢了

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>抽奖功能</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}

			li {
				list-style: none;
			}

			body {
				font-family: "楷体";
				user-select: none;
				background: url('1.jpg') no-repeat;
				background-size: 100%;
				/*background-color: red;*/
			}

			.section {
				position: relative;
				width: 935px;
				height: 460px;
				background-color: rgba(0, 0, 0, .3);
				margin: 165px auto 0;
				text-align: center;
			}

			.section h2 {
				height: 90px;
				line-height: 90px;
				font-size: 50px;
				color: #fff;
			}

			.section .s-result {
				height: 400px;
				color: #ffc20e;//抽奖人员文字颜色
			}

			.s-result .number {			
				float: left;
				width: 895px;
				height: 300px;
				line-height: 300px;
				margin-left: 20px;
				font-size: 80px;//抽奖人员文字大小
				font-weight: bold;
			}

			.btn {
				position: absolute;
				left: 50%;
				margin-left: -171px;
				bottom: -80px;
				width: 323px;
				height: 81px;
				
				cursor: pointer;
			}

			.btn p {					//点击抽取文字样式
				line-height: 81px;
				font-size: 50px;
				font-weight:bold;
				color: #c37e00;
			}

		</style>
	</head>
	<body>
		<div class="section">
			<h2>看 看 谁 最 幸 运！！</h2>
			<div class="s-result">
			</div>
			<div class="btn">
				<p>点 击 抽 取</p>
			</div>
			<!-- <span id="musicControl">
				<a id="mc_play" class="on" οnclick="play_music();">
					<audio id="musicfx" loop="loop" autoplay="autoplay">
						<source src="Dreams.mp3" >
					</audio>
				</a>
			</span> -->
		</div>
		<script>
			var oBtn = document.getElementsByClassName('btn')[0];
			var oResult = document.getElementsByClassName('s-result')[0];
			var arrName = ['张磊31','张磊32','张磊33','张磊34','张磊35','张磊36','张磊37','张磊38','张磊39','张磊40','张磊41','张磊42','张磊43','张磊44','张磊45','张磊46']; //抽签的内容
			var step = 1;
			var cnt = 1;
			var flag = true;
			oBtn.onclick = function() {
				if (flag) {
					step = 1;
					creatName();
					flag = false;
				} else {
					var d = document.getElementsByClassName('number')[0];
					oResult.removeChild(d);
					step = 1;
					creatName();
				}
			}

			function getName() {
				var num = Math.floor(Math.random() * (arrName.length - 1));
				var n = arrName[num];
				arrName.splice(num, 1);
				return n;
			}

			function creatName() {
				if (step > cnt) {
					return null;
				}
				step++;

				var oDiv = document.createElement('div');
				oDiv.className = 'number';

				oResult.appendChild(oDiv);

				var dis = 1;
				var maxDis = 40;
				var mySet = setInterval(function() {
					dis++;
					if (dis > maxDis) {
						oDiv.innerHTML = getName();
						clearInterval(mySet);
						creatName();
						return null;
					}
					oDiv.innerHTML = arrName[Math.floor(Math.random() * (arrName.length - 1))];
				}, 50);
			}
		</script>
	</body>
</html>

var btn = document.getElementById('btn');
var oResult = document.getElementById('s-result');
var arrName = ['张磊31','张磊32','张磊33','张磊34','张磊35','张磊36','张磊37','张磊38','张磊39','张磊40','张磊41','张磊42','张磊43','张磊44','张磊45','张磊46'];
var key = true//判定点击时是停止动画还是开始动画
var time
btn.addEventListener('click',()=>{
    if(key) {
        let i = 0;//每次开始动画时，都从第一个名字开始展示
        key = false
        time = setInterval(() => {//间歇调用
            if(i < arrName.length) {
                oResult.innerHTML = arrName[i++]//oRseult中显示的内容
            } else i = 0;
        },100);//100控制切换速率
    } else if(!key) {
        clearInterval(time)//清除间歇调用
        key = true
    }
})

介意使用vue双向数据绑定，很容易实现滚动效果或者错乱无序展示。

如果有帮到你请采纳