抽奖的demo(跑马灯效果)

Dear 丶 2022-01-19 05:43 322阅读 0赞

效果：

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		*{
    			padding: 0;
    			margin: 0;
    		}
    		#uls{
         
    			width: 500px;
    			height: 500px;
    			margin: 50px auto;
    		}
    		li{
    			width: 150px;
    			height: 150px;
    			background: skyblue;
    			float: left;
    			list-style: none;
    			margin:5px;
    			color: #fff;
    			text-align: center;
    			line-height: 150px;
    			font-size: 20px;
    			font-weight: bold;
    		}
    		#uls li button{
         
    			width: 50px;
    			height: 30px;
    		}
    		.light{
    			width: 150px;
    			height: 150px;
    			background: #666;
    			color: #fff;
    		}
    	</style>
    </head>
    <body>
    	<ul id='uls'>
    		<li>1</li>
    		<li>2</li>
    		<li>3</li>
    		<li>8</li>
    		<li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li>
    		<li>4</li>
    		<li>7</li>
    		<li>6</li>
    		<li>5</li>
    	</ul>
    	<script>
    		var btn1=document.getElementById("btn1");
    		var btn2=document.getElementById("btn2");
    		var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转
    		var lis=document.getElementsByTagName("li");
    		var num=0;  //定义初识下标
    		btn1.onclick=function(){
    			btn1.disabled=true;
    			time=setInterval(function(){
    				lis[arr[num]].className="";
    				num++;
    				if(num>7){
    					num=0;
    				}
    				lis[arr[num]].className="light";
    			},50)
    		}
    		btn2.onclick=function(){
    			btn1.disabled=false;
    			clearInterval(time);
    		}
    	</script>
    </body>
    </html>
    复制代码

转载于:https://juejin.im/post/5ce424b4518825332550c08a

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue-跑马灯效果

代码实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

痛定思痛。/ 2023年10月08日 15:40/ 0 赞/ 48 阅读

相关 HarmonyOS 实现跑马灯效果

`跑马灯效果实现效果图` ![20210728102605974.gif][] `注意事项: HarmonyOS里面Text由于multiple_lines默认为fals

野性酷女/ 2022年09月01日 13:47/ 0 赞/ 214 阅读

相关 TextView实现跑马灯效果

下面是布局代码，需要注意的是设置singleLine属性、ellipsize属性、focusable属性和focusableInTouchMode属性 <TextVi

冷不防/ 2022年08月14日 05:40/ 0 赞/ 252 阅读

相关 iOS 跑马灯效果

做项目的项目的时候，用到了标题滚动的效果（银行，商铺门面上悬挂的电子屏幕滚动信息),找了一下。写出来分享给大家 1.首先下载这个类文件[下载地址][Link 1]

野性酷女/ 2022年08月13日 18:39/ 0 赞/ 248 阅读

相关 Android 设置跑马灯效果

设置跑马灯效果相关属性： 1、\单行显示 [Android][]:singleLine="true" 2、\跑马灯效果设置 android:ellipsize="

た入场券/ 2022年07月13日 13:19/ 0 赞/ 447 阅读

相关 Android——TextView跑马灯效果

Android系统中TextView实现跑马灯效果，必须具备以下几个条件： 1、android:ellipsize=”marquee” 2、TextView必须单行显示，即

水深无声/ 2022年05月23日 08:38/ 0 赞/ 546 阅读

相关 Vue 文字跑马灯效果

1. 话不多说看代码 ![在这里插入图片描述][20181031204818845.png] <!DOCTYPE html> <html lang="

一时失言乱红尘/ 2022年04月21日 23:45/ 0 赞/ 429 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 513 阅读

相关抽奖的demo(跑马灯效果)

效果：代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Dear 丶/ 2022年01月19日 05:43/ 0 赞/ 323 阅读

相关 android实现跑马灯效果

第一步：新建一个新项目，MarqueeTextView 首先为了观察到跑马灯效果，将要显示的文字极可能写长。在strings.xml目录里面将 <string

超、凢脫俗/ 2021年10月23日 07:59/ 0 赞/ 464 阅读