jQuery随机上色

成品展示(纯娱乐)

(目前最高纪录4*4)

html

<div><input type="text" placeholder="请输入行数" class="num1"><input type="text" placeholder="请输入列数" class="num2"><button onclick="showBox()">生成</button><button onclick="coloring()">上色</button><span class="result"></span>
</div>
<div class="pageBody"></div>

css

* {margin: 0;
}.box {width: 15px;height: 15px;border: 1px solid #000;margin: 5px;float: left;
}.libox {clear: both;
}.boxColor {background-color: #ff0000;
}

var num1,
num2,
count = 0,
result = 0,
time;function showBox() {if (time != null) clearTimeout(time);count = 0;result = 0;num1 = $(".num1").val(),num2 = $(".num2").val();$('.pageBody').empty()$('.result').text("");var setBox = ""for (var i = 1; i <= num1; i++) {setBox += '<div class="box' + i + '_1 box libox"></div>'for (var j = 1; j <= num2 - 1; j++) {setBox += '<div class="box' + i + '_' + (j + 1) + ' box"></div>'}}$(".pageBody").append(setBox);
}function coloring() {var randnum1 = parseInt(Math.random() * (num1 - 1 + 1) + 1);var randnum2 = parseInt(Math.random() * (num2 - 1 + 1) + 1);console.log(randnum1 + ":" + randnum2 + ":" + count)if (count == (num1 * num2)) {$('.result').text('一共使用了' + result + '次')return;}if ($('.box' + randnum1 + '_' + randnum2).hasClass('boxColor')) {$('.box' + randnum1 + '_' + randnum2).removeClass('boxColor')count--;} else {$('.box' + randnum1 + '_' + randnum2).addClass('boxColor')count++;}result++;time = setTimeout(coloring, 1000)
}

代码获取

jQuery随机上色相关推荐

随机滚动点名带头像html,jquery随机展示头像代码
通过最终效果发现,当头像处于最前面时,图像最大,透明低.越往后头像就越小,就越透明先分析实现思路需要一个容器,作为头像显示的区域. 容器内部需要头像图片作为展示. 随机每个头像的大小,位置,层级. ...
ASP.Net Jquery 随机验证码文本框判断
// 登陆验证 $(function () { var chars = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'a', 'B' ...
html jq随机换背景,JQuery随机背景颜色和颜色,2 div
我想你想要完成的是: 假设您有一个这样的HTML页面: Hello World! var rand = Math.floor(Math.random()*colors.length); $('#con ...
【jQuery笔记Part3】03-jQuery项目：随机抽奖
jQuery随机抽奖 js 定时器 setInterval() setTimeout() 清除定时器静态页面页面展示按钮点击 jQuery笔记目录 js 定时器具体用法(菜鸟教程) setIn ...
基于jQuery的随机头像显示功能
查看效果下载地址基于jQuery的随机头像显示功能,并且带有精美的提示效果,确实挺不错的,其实不要仅限于"头像",只有有图片显示的地方都能用到的,像产品类网站,交友类网站都可 ...
【转】4.1触碰jQuery：AJAX异步详解
传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 X ...
jQuery jsonp跨域请求
当前端和后端不属于同源策略就会访问不到数据同源策略就是相同的协议,域名,端口.如果前后端不属于同源策略又想获得后端的数据我们就可以通过跨域开获得数据跨域的安全限制都是对浏览器端来说的,服务器端是不 ...
ajax离开页面方法,jQuery中ajax调用当前页面方法
$.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...
html鼠标移入显示图片动画,HTML5+CSS3鼠标移入移出图片生成随机动画_html/css_WEB-ITnose...
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转上下移动缩放由于时间关系我就不一步步解析各段代 ...

jQuery随机上色

jQuery随机上色相关推荐

最新文章

热门文章