Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vickymin #35

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Vickymin #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
726aae0
create files
vickymin Dec 3, 2015
dcf643c
add html
vickymin Dec 8, 2015
12179f4
add one feature:judge number range
vickymin Dec 8, 2015
186acd0
update margin
vickymin Dec 9, 2015
bdafcda
update col
vickymin Dec 9, 2015
241ddb8
finish basic features
vickymin Dec 10, 2015
389f30f
update js file
vickymin Dec 11, 2015
a122ebb
rename html
vickymin Feb 25, 2016
87a1b28
fix error
vickymin Feb 25, 2016
0c1fbe9
update css
vickymin Feb 25, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions 101-clickable-grid/bootstrap.min.css
View file
Open in desktop

Large diffs are not rendered by default.

53 changes: 53 additions & 0 deletions 101-clickable-grid/grid.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
body {
background-color: #CCC;
}
.box {
width: 650px;
height: 700px;
margin: 0px auto;
}
.form-box {
width: 550px;
height: 40px;
margin: 20px auto 3px auto;
}
.form-input {
display: inline-block;
box-sizing: border-box;
width: 290px;
height: 33px;
font-size: 14px;
color: #555;
border: none;
border-radius: 4px;
text-align: center;
outline: none;
}
.form-btn {
display: inline-block;
width: 200px;
margin-left: 20px;
vertical-align: top;
}
.btn {
background-color: #777;
color: #EEE;
width: 80px;
height: 33px;
margin-right: 15px;
border: none;
border-radius: 4px;
outline: none;
}
.btn:hover {
background-color: #555;
border: none;
box-shadow: 2px 2px 4px #555;
cursor: pointer;
}
#main {
border: 2px solid #999;
margin-top: 5px;
margin-left: 20px;
background-color: #92A8D1;
}
73 changes: 73 additions & 0 deletions 101-clickable-grid/grid.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
var canvas = document.getElementById("main");
var context = canvas.getContext("2d");

var number; //用户输入的数字
var w; //方格边长
var space; //方格之间空隙

window.onload = function(){
//点击“Generate”按钮
var genButton = document.getElementById("generate");
genButton.onclick = generateHandler;
//点击“Clear”按钮
var clearButton = document.getElementById("clear");
clearButton.onclick = function(){clearCanvas(context,canvas);}
}

//处理“Generate”按钮
var generateHandler = function(){
clearCanvas(context,canvas);
number = parseInt(document.getElementById("integer").value);
var abc = 1.03;
w = Math.floor(canvas.width / number) / abc;
space = (canvas.width-number*w)/(number+1);
//判断用户输入数字是否在范围内
if (0 < number && number < 27){
drawGrid(context);
}
else{
alert("Plese enter an integer between 1 to 20!");
}
//监听用户点击方格的位置
canvas.addEventListener("mousedown", showPosition, false);
}

//清空canvas
var clearCanvas = function(context,canvas){
context.fillStyle = "#92A8D1";
context.fillRect(0,0,canvas.width,canvas.height);
}

//在canvas上画出方格及相应数字
var drawGrid = function(context){
var i,j;
for(i=0; i<number; i++){
for(j=0; j<number; j++){
//画方格
context.fillStyle = "#F5B1B1";
context.fillRect(i*w+(i+1)*space, j*w+(j+1)*space, w, w);
//画数字
context.fillStyle = "#92A8D1";
context.textAlign = "center";
context.font = (w/3).toString() + "px" + " Arial";
var bcd = 1.6;
context.fillText(number*j+i+1, i*w+(i+1)*space+w/2, j*w+(j+1)*space+w/bcd);
}
}
}

//找到用户点击方格的位置
var showPosition = function(event){
var x = event.clientX - canvas.offsetLeft;
var y = event.clientY - canvas.offsetTop;
var i,j;
for(i=0; i<=number; i++){
for(j=0; j<=number; j++){
if(x>=i*space+i*w && x<=i*space+(i+1)*w){
if(y>=j*space+j*w && y<=j*space+(j+1)*w){
console.log(number*j+i+1);
}
}
}
}
}
21 changes: 21 additions & 0 deletions 101-clickable-grid/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!DOCTYPE html>
<head>
<meta name="author" content="minjiepei">
<meta charset="utf-8">
<link rel="stylesheet" href="grid.css">
</head>

<body>
<div class="box">
<form role="form" class="form-box">
<input type="text" class="form-input" id="integer" placeholder="select an integer between 1 to 20">
<div class="form-btn">
<button type="button" id="generate" class="btn">Generate</button>
<button type="reset" id="clear" class="btn">Clear</button>
</div>
</form>
<canvas id="main" width="600" height="600">Please upgrade your browser!</canvas>
</div>
<script src="grid.js"></script>

</body>