随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript)
2021/12/31 20:07:36
本文主要是介绍随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
-
随机数
<script> //一个范围内的随机数 function getNumber(min,max){ return Math.floor(Math.random()*(max-min+1)+min) } //比如说产生10-20内的随机数 console.log(getNumber(10,20)); </script>
-
随机颜色
<script> //随机颜色方法1 function getColor(){ var str='0123456789abcdef' var newstr='' for(let i=0;i<6;i++){ //产生一个随机下标 var n=getNumber(0,str.length-1) newstr+=str.charAt(n) } return '#'+newstr } //随机颜色方法2 function getColor1(){ return '#'+parseInt(getNumber(0x000000,0xffffff)).toString(16) } //比如刷新页面产生随机背景色 document.body.style.backgroundColor=getColor1() </script>
-
随机验证码
<style> button{ background-color: fuchsia; margin-bottom: 5px; } div{ width: 300px; height: 150px; border: fuchsia 1px solid; text-align: center; line-height: 150px; font-size: 60px; } </style> </head> <body> <button>按钮</button> <div></div> </body> </html> <script> //获取按钮 let oBtn=document.querySelector('button') let oDiv=document.querySelector('div') //随机验证码 function getYanZhenMa(){ let str='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789' let newstr='' for(var m=0;m<4;m++){ let n=getNumber(0,str.length-1) newstr+=str.charAt(n) } return newstr; } //随机验证码(此方法去除了重复的) function getYzm(){ let str='QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789' let newarr=[] var n=0; while (true) { var s=str.charAt(getNumber(0,str.length-1)) if(newarr.indexOf(s)==-1){ n++; newarr.push(s) }if(n==4){ break; } } return newarr.join('') } oBtn.onclick=function(){ // oDiv.innerHTML=getYanZhenMa() oDiv.innerHTML=getYzm() oDiv.style.backgroundColor=getColor() oDiv.style.color=getColor1() //设置验证码的随机字体大小 oDiv.style.fontSize=getNumber(30,100)+'px' } </script>
-
点击按钮,产生100个随机大小,随机颜色,随机位置的圆
<script> function getNumber(min,max){ return Math.floor(Math.random()*(max-min+1)+min) } function getColor1(){ return '#'+parseInt(getNumber(0x000000,0xffffff)).toString(16) } function getSjy(){ var str='' for(var i=1;i<=100;i++){ var oDiv=document.createElement('div') var n=getNumber(100,200) oDiv.style.width=n+'px' oDiv.style.height=n+'px' oDiv.style.borderRadius='50%' oDiv.style.position="absolute" oDiv.style.left=getNumber(0,window.innerWidth-n)+'px' oDiv.style.top=getNumber(0,window.innerHeight-n)+'px' oDiv.style.background=getColor1() str+=oDiv.outerHTML } return str; } // document.querySelector("button").onclick=function(){ // // console.log(document.querySelector('button')); // document.body.innerHTML=getSjy() // } //点击按钮换成定时器 setInterval(function(){ document.body.innerHTML=getSjy() },1000) </script>
这篇关于随机系列(随机数、颜色、验证码、大小圆)-----前端(JavaScript)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现
- 2024-05-30我们小公司,哪像华为一样,用得上IPD(集成产品开发)?
- 2024-05-30java excel上传--poi
- 2024-05-30安装笔记本应用商店的pycharm,再安排pandas等模块,说是没有打包工具?
- 2024-05-29java11新特性