jquery简单生成指定范围随机数效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了生成简单随机数的功能。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var ran=0;
var range=0;
var myNumber;
 
function sjs(range) {
  ran=Math.random()*range;
  var result=parseInt(ran);
  return result;
}
 
function showRandomNum() {
  var figure=sjs(range);
  $("#first").html(figure);  
}
 
$(function () {
  $("#start").click(function () {
    $("#start")[0].disabled=true;
    $("#stop")[0].disabled=false;
    range=prompt("请输入随机数范围:","");
    myNumber=setInterval(showRandomNum,1);
  });
 
  $("#stop").click(function () {
    $("#start")[0].disabled=false;
    $("#stop")[0].disabled=true;
    clearInterval(myNumber);
  });
});
</script>
</head>
<body>
<div id="first"></div>
<input type="button" value="开始" id="start">
<input type="button" value="结束" id="stop">
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).var ran=0,声明一个变量并赋初值为0,用来存储原始的随机数。

(2).var range=0,声明一个变量并赋初值为0,用来存储输入的数字。

(3).var myNumber,声明一个变量,用来存储定时器函数的标识。

(4).function sjs(range) {

  ran=Math.random()*range;

  var result=parseInt(ran);

  return result;

},此函数可以生成一个被转换为整数的随机数。

(5).function showRandomNum() {

  var figure=sjs(range);

  $("#first").html(figure);  

},将随机数写入指定元素。

(6).$(function () {}),当文档结构完全加载完毕再去执行函数中的代码。

(7).$("#start").click(function () {

  $("#start")[0].disabled=true;

  $("#stop")[0].disabled=false;

  range=prompt("请输入随机数范围:","");

  myNumber=setInterval(showRandomNum,1);

}),点击开始按钮后,会将开始按钮设置为不可用,停止按钮设置为可用。

并且弹出输出窗口。

输入数字后,就会执行定时器函数,出现数字轮播效果。

(8).$("#stop").click(function () {

  $("#start")[0].disabled=false;

  $("#stop")[0].disabled=true;

  clearInterval(myNumber);

}),停止数字轮播效果。

二.相关阅读:

(1).Math.random()可以参阅javascript Math.random()一章节。

(2).parseInt()可以参阅javascript parseInt()一章节。

(3).prompt()可以参阅prompt()一章节。

(4).setInterval()可以参阅setInterval()一章节。

(5).clearInterval()可以参阅clearInterval()一章节。

jquery简单生成指定范围随机数效果,这样的场景在实际项目中还是用的比较多的,关于jquery简单生成指定范围随机数效果就介绍到这了。

jquery简单生成指定范围随机数效果属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容