知識點
-
onchange事件
-
循環
-
封裝函數
-
ajax
-
php
Javascript代碼
//找到元素
var file=document.getElementById("file");
//綁定事件
file.onchange =function (){
//獲取圖片名稱
let files=this.files;
//循環來上傳多個圖片
for(var i=0;i<files.length;i++){
//調用ajax
ajax('11.php',files[i],function(data){
console.log(data);
console.log("成功....");
})
}
}
//ajax的基本寫法
function ajax(url,data,fn){
const xhr =new XMLHttpRequest();
xhr.onreadystatechange =function(){
if(xhr.readyState ===4 && xhr.status ===200){
fn(xhr.responseText);
}
}
const formData=new FormData();
formData.append('file',data);
xhr.open("post",url,true);
xhr.send(formData);
}
php代碼
<?php
header("Constent-type:test/html;Charset=utf-8");
//從前端后去數據
$fileinfo =$_FILES['file'];
//圖片存儲位置
$url ="./img/";
$url =$url.basename($_FILES['file']['name']);
move_uploaded_file($fileinfo['tmp_name'], $url);
echo "成功";
?>
完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特效</title>
<style>
*{
margin: 0;
padding: 0;
}
#game {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
box-shadow: -2px -2px 2px #efefef ,5px 5px 5px #b9b9b9;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
</body>
<script>
//在網頁或者圖片加載完后執行
window.onload =function(){
let arr =[];
for(let i=0;i<15;i++){
arr[i] =[]
for(let j=0;j<15;j++){
arr[i][j] =1
}
}
let count =true;
//獲取屬性
let gamer =document.querySelector('#game');
gamer.width =450;
gamer.height =450;
let context =gamer.getContext('2d');
context.strokeStyle='#999999';
for(let i=0;i<15;i++){
context.moveTo(15,15 +i *30);
context.lineTo(435, 15 + i *30);
context.stroke();
}
for(let i=0;i<15;i++){
context.moveTo(15+i *30 , 15);
context.lineTo(15+i*30,435);
context.stroke();
}
//表格已完成
let black =function(x,y){
let gradient =context.createRaadialGradient(x,y,3,x,y,13);
gradient.addColorStop(0,'#999');
gradient.addColorStop(1,'#000');
context.fillStyle = gradient
context.beginPath()
context.arc(x, y, 13, 0, 2 * Math.PI)
context.fill()
context.closePath()
}
let white = (x, y) => {
let gradient = context.createRadialGradient(x, y, 3, x, y, 13)
gradient.addColorStop(0, '#ffffff')
gradient.addColorStop(1, '#888888')
context.fillStyle = gradient
context.beginPath()
context.arc(x, y, 13, 0, 2 * Math.PI)
context.fill()
context.closePath()
}
gamer.onclick = (e) => {
let x = e.offsetX
let y = e.offsetY
x = Math.floor(x / 30)
y = Math.floor(y / 30)
if(arr[x][y] != 0) {
if(count == true) {
black(x*30+15, y*30+15)
arr[x][y] = 0
count = !count
}else {
white(x*30+15, y*30+15)
arr[x][y] = 0
count = !count
}
}
}
}
</script>
</html>