<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{width: 300px;height: 500px;border: 1px solid gray;margin: auto;}
#time{float: left;}
#score{float: right;}
#wrap div{overflow: hidden;}
#imgs{width: 250px;height: 250px;margin: 100px auto;background: deepskyblue;}
.img{box-sizing: border-box;float: left;background-origin: content-box;background-size: 100%;background-repeat: no-repeat;}
</style>
</head>
<body>
<div id="wrap">
<div><span id="time">剩余时间:10</span><span id="score">完成分数:0</span></div>
<!--<button id="action">action</button>-->
<div id="imgs">
</div>
</div>
</body>
<script type="text/javascript">
var btn = document.querySelector('#action');
var imgs = document.querySelector('#imgs');
var count = 1;
var n = 0;
function randFn(min,max){
return parseInt(Math.random()*(max - min) + min);
}
function createSection(num){
imgs.innerHTML = '';
//随即一个数,放房祖名所在的位置
n = randFn(0,num*num);
for (var i = 0; i < num*num; i++) {
var section = document.createElement('section');
section.className = 'img';
section.index = i;
section.style.width = imgs.offsetWidth/num + 'px';
section.style.height = imgs.offsetHeight/num + 'px';
var str = '';
if (i == n) {
str = 'url(img/2.png)';
}else{
str = 'url(img/1.png)';
}
section.style.backgroundImage = str;
section.style.padding = Math.floor(15/num) + 'px';
imgs.appendChild(section);
}
}
createSection(count);
//点击事件
// btn.onclick = function(){
// count ++;
// createSection(count);
// }
imgs.onclick = function(e){
if (e.target.index == n) {
count++;
createSection(count);
}
}
</script>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
#wrap{width: 300px;height: 500px;border: 1px solid gray;margin: auto;}
#time{float: left;}
#score{float: right;}
#wrap div{overflow: hidden;}
#imgs{width: 250px;height: 250px;margin: 100px auto;background: deepskyblue;}
.img{box-sizing: border-box;float: left;background-origin: content-box;background-size: 100%;background-repeat: no-repeat;}
</style>
</head>
<body>
<div id="wrap">
<div><span id="time">剩余时间:10</span><span id="score">完成分数:0</span></div>
<!--<button id="action">action</button>-->
<div id="imgs">
</div>
</div>
</body>
<script type="text/javascript">
var btn = document.querySelector('#action');
var imgs = document.querySelector('#imgs');
var count = 1;
var n = 0;
function randFn(min,max){
return parseInt(Math.random()*(max - min) + min);
}
function createSection(num){
imgs.innerHTML = '';
//随即一个数,放房祖名所在的位置
n = randFn(0,num*num);
for (var i = 0; i < num*num; i++) {
var section = document.createElement('section');
section.className = 'img';
section.index = i;
section.style.width = imgs.offsetWidth/num + 'px';
section.style.height = imgs.offsetHeight/num + 'px';
var str = '';
if (i == n) {
str = 'url(img/2.png)';
}else{
str = 'url(img/1.png)';
}
section.style.backgroundImage = str;
section.style.padding = Math.floor(15/num) + 'px';
imgs.appendChild(section);
}
}
createSection(count);
//点击事件
// btn.onclick = function(){
// count ++;
// createSection(count);
// }
imgs.onclick = function(e){
if (e.target.index == n) {
count++;
createSection(count);
}
}
</script>
</html>
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
