js抽签代码，思路特别清晰

利用setInterval函数和clearInterval函数来实现简单的抽签，其中那个arr数组可以改为你自己想抽选的名字

运行如下：

代码如下：

<!DOCTYPE html>

<head>

<style>

body{

background: url('美女.png');

}

div{

width: 800px;

height: 500px;

background-color: rgba(0,0,0,0.1);

box-sizing: border-box;

margin:100px auto;

font-size: 120px;

line-height: 500px;

text-align: center;

}

input{

position: absolute;

bottom:100px;

left:50%;

margin-left: -100px;

height: 100px;

width: 150px;

line-height: 100px;

text-align: center;

outline: none;

border:0;

border-radius: 40%;

}

</style>

</head>

<body>

<div>

</div>

var btn=document.querySelector('input')

var div=document.querySelector('div');

var flag=true

var arr=['李四','李贵','王二麻','李强','陈凯','周双双','袁杰','严定洲','赵海混','张攻讦']

btn.addEventListener('click',function(){

if(flag===true){

timer=setInterval(function(){

index=parseInt(Math.random()*(9-0+1)+0);

div.innerHTML=arr[index] ;

},20)

flag=false;

btn.value='暂停';

}

else if(flag===false)

{

window.clearInterval(timer);

flag=true;

btn.value='开始点击';

}

})

</script>

</body>

</html>

js抽签代码，思路特别清晰相关推荐

Eclipse.自动提示--编写HTML/CSS/JS/JSP代码时自动提示的解决办法
最近在做一个javaweb的项目,在eclipse中编写jsp代码时没有代码提示这个梗让人很头疼,之前一直写Java代码或者在Dreamweaver中写HTML代码时自动提示代码用起来特别爽,这突然间 ...
思路不清晰还想月薪过万？学会这4招，升职加薪有望
日常工作中,我们总是能听到同事抱怨: "XXX是不是没睡醒啊?脑子里一团浆糊,都不知道他在说啥." "拜托!先把思路理清楚了,再跟我提需求,行不行?" &quo ...
js经典代码200句
200多个js技巧代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect:当文 ...
用html实现抽奖大转盘,【项目实战】用CSS实现一个抽奖转盘(附详细代码+思路)...
原标题:[项目实战]用CSS实现一个抽奖转盘(附详细代码+思路) 效果基本是用CSS实现的,没有用图片,加一丢丢JS. 完全没有考虑兼容性. 首先画一个转盘 < htmllang= " ...
基于 Koa 的微服务 Node.js 框架设计思路与简单实现
大家好,我是前端点线面,毕业于华中科技大学,非科班出身的一枚新时代农民工,现在是百度前端研发工程师,著有<前端百题斩>.数十篇学习思维导图(go.React.Redux.Vue.Vuex. ...
html加js倒计时代码,分享最简单的JavaScript倒计时代码（附完整代码）
工作中经常需要在页面中设置倒计时,那你知道JS倒计时代码怎么写吗?这篇文章就给大家分享一个最简单的JS倒计时代码,以及详细的倒计时JS代码的思路,,有一定的参考价值,感兴趣的朋友可以看看. 举例:设定 ...
html旋转代码_用CSS实现一个抽奖转盘(附详细代码+思路)
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上效果基本是用CSS实现的,没有用图片,加一丢丢JS.不过没有考虑太多兼容性. 首先画一个转盘 & ...
html玫瑰花效果代码,html5渲染3D玫瑰花情人节礼物js特效代码
情人节马上就要到来了,这里给程序员前端设计师们献上一个,html5渲染而成的3D玫瑰花js效果,可以作为虚拟的情人节礼物送给自己的爱人.支持html5的浏览器查看. 查看演示下载资源: 16 次下 ...
vuejs粒子动画特效 npm安装插件vue-particles（particles.js） - 代码篇
文章目录 1. npm 安装插件`vue-particles` 2. 效果图: 3. 代码截图: 4. 代码示下: 5. 附件 · 文章阅读: 1. npm 安装插件vue-particles npm ...

js抽签代码，思路特别清晰

js抽签代码，思路特别清晰相关推荐

最新文章

热门文章