js-实现选号器功能

最新推荐文章于 2023-04-15 22:55:02 发布

矢目

最新推荐文章于 2023-04-15 22:55:02 发布

阅读量439

点赞数 1

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_48104836/article/details/129309190

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

js-实现选号器功能

html：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="test1.css"/>
		<script src="test1.js"></script>
	</head>
	<body>
		<main>
			<h2>选号器</h2>
			<ul id="doubleColorBall">
				<li>01</li>
				<li>03</li>
				<li>05</li>
				<li>12</li>
				<li>22</li>
				<li>25</li>
				<li>15</li>
			</ul>
			<div>
				<button id="start">开始</button>
				<button id="save" >保存</button>
			</div>
		</main>
	</body>
</html>

js：

//声明定时器对象
var timer = null;



/**
 * 开始
 */
function start(){
	
	if(timer!=null){
		return 
	}
	
	//处理滚动
	timer = setInterval(roll,100)
  
}
/**
 * 暂停
 */
function pause(){
	clearInterval(timer)
	timer=null
  
}


实现页面的滚动
```javascript

function roll(){
	
	 arr = [];
	for (var i = 0; i < 6; i++) {  //2   3
		var num = getRandomInt(1,33)
		
		
		if(arr.indexOf(num)>=0){
			i--
			continue
		}
		arr.push(num)
	}
	//排序
	arr.sort()
	
	
	arr.push(getRandomInt(1,16))
	
	/*
	遍历数组获取要插入到页面上的内容，并插入
	*/
  
	var doubleColorBall = document.getElementById("doubleColorBall")
	
	var lis = ""
	for (var i = 0; i < arr.length; i++) {
		lis += "<li>"+arr[i]+"</li>"
	}
	doubleColorBall.innerHTML = lis
 
}



###  获取的随机数

```javascript

function getRandomInt(start,end){
	var num = parseInt(Math.random()*(end-start+1)+start)
	return (num<10?("0"+num):num)
}
`
###  主体：

```javascript
var arr
  onload=function(){
    const save =document.querySelector("#save")
    var start1 = document.getElementById("start")
    
    
    let started = false;
    save.setAttribute("disabled","true")
  start1.onclick=function(){
    if(!started){
      start1.innerHTML="暂停"
      start()
      save.setAttribute("disabled","true")
    }else{
      pause()
      start1.innerHTML="开始"
      save.removeAttribute("disabled");
    }
    
    started=!started
   
    }