js清除圖片

發(fā)布時間：2020-07-03 03:45:16 來源：網(wǎng)絡閱讀：266 作者：專注地一哥欄目：web開發(fā)

<!DOCTYPE html>

<html>

<head>

????<meta charset="UTF-8">

????<meta name="viewport" content="width=device-width, initial-scale=1.0">

????<meta http-equiv="X-UA-Compatible" content="ie=edge">

????<title>js連連看</title>

????<style>

????????* {

????????????margin: 0;

????????????padding: 0;

????????}

????????html,

????????body {

????????????width: 100%;

????????????height: 100%;

????????????background: #222;

????????????overflow: hidden;

????????}

????????.wrapper {

????????????background-size: 100% 100%;

????????????margin: 10px auto;

????????????position: relative;

????????????/* border: 1px solid #f40; ?*/

????????}

????????.square {

????????????cursor: pointer;

????????????position: absolute;

????????????width: 80px;

????????????height: 80px;

????????????background-size: cover;

????????}

????</style>

</head>

<body>

????<div></div>

????<script>

????????var wrap = document.getElementsByClassName('wrapper')[0];

????????var rows = 7; ??// 創(chuàng)建連連看行數(shù)

????????var cols = 12; ?// 創(chuàng)建連連看列數(shù)

????????var type = 24 ??//選擇多少種圖片，0-24都可以 ?看自己心情數(shù)字大種類多 ?數(shù)字小種類少難度更簡單

????????var squareSet = []; ???// 生成小方塊的數(shù)組

????????var chooseOne = null; //

????????var chooseTwo = null; //

????????var Toward = { node: null, up: { row: -1, col: 0 }, right: { row: 0, col: 1 }, down: { row: 1, col: 0 }, left: { row: 0, col: -1 } }

????????window.onload = function () {

????????????init(); //初始化

????????}

????????function init() {

????????????if (rows * cols % 2 != 0) { //判斷小方塊總數(shù)是否為奇數(shù)，奇數(shù)就不執(zhí)行

????????????????alert('展示數(shù)量不能為奇數(shù)') ?// ?彈出提示，阻塞js加載

????????????}

????????????initSquareSet();

????????}

????????function initSquareSet() {

????????????// 方塊默認長寬都是80px

????????????wrap.style.height = rows * 80 + 'px'; ??// 外面盒子的總高度

????????????wrap.style.width = cols * 80 + 'px'; ?// 外面盒子的總寬度

????????????var oDiv = document.createElement('div')

????????????var tmp = createRandomNum(); ?//生成隨機數(shù)數(shù)組 ??我的圖片名稱是0.jpg~24.jpg 函數(shù)生成0~24隨機數(shù)就可以通過字符串拼接動態(tài)的選擇圖片

????????????squareSet = new Array(rows + 2); ?// 生成小方塊的數(shù)組 ??既有行又有列 ?我們就要利用for循環(huán)生成二維數(shù)組 57~60

????????????for (var i = 0; i < squareSet.length; i++) {

????????????????squareSet[i] = new Array(cols + 2);

????????????}

????????????for (var i = 1; i <= rows; i++) { ?// 生成行數(shù) ??

????????????????for (var j = 1; j <= cols; j++) { // 生成列數(shù) 同理

????????????????????var temp = createSquare(tmp.pop(), i, j); // 參數(shù)每次取隨機數(shù)數(shù)組的最后一位 ?i小方塊在整體中行的位置j是列的位置 ??temp接收這個返回的DOM元素

????????????????????squareSet[i][j] = temp;

????????????????????wrap.append(temp);

????????????????????temp.onclick = function () {

????????????????????????if (chooseOne == null || chooseOne.num != this.num) { ??// 判斷是第一次點擊還是第二次 77~81 沒有值或者說沒有屬性的都是第一次點擊

????????????????????????????chooseOne = this;

????????????????????????} else {

????????????????????????????chooseTwo = this;

????????????????????????????if (chooseOne != chooseTwo && chooseOne.num == chooseTwo.num ) { //判斷第一次和第二次點擊不是同一個并且num值相等 ?以及是否在路徑上可以消除

????????????????????????????????clearSquare(chooseOne.row, chooseOne.col);

????????????????????????????????clearSquare(chooseTwo.row, chooseTwo.col);

????????????????????????????}

????????????????????????????chooseOne = null;

????????????????????????????chooseTwo = null;

????????????????????????}

????????????????????????render(); // 點擊方塊變換樣式

????????????????????}

????????????????}

????????????}

????????}

????????function createRandomNum() {

????????????var tmp = [] // 存放生成圖片是 ?字符串拼接的數(shù)字

????????????// rows * cols 可以算出需要多少張圖片然后除以2 因為每張圖片都是成對出現(xiàn)的 ?即 7*12=84張圖片 ?84/2=41算出有42對

????????????for (var i = 0; i < rows * cols / 2; i++) {

????????????????var num = Math.floor(Math.random() * type) ?// 生成0~24的隨機數(shù)

????????????????tmp.push(num);

????????????????tmp.push(num); // 循環(huán)了42次 ?所以push兩遍相當如每次push了相同的一對數(shù)，42次正好84張圖片

????????????}

????????????// console.log(tmp) ?// 看看生成的數(shù)組 ?可以看到成對的隨機數(shù)字數(shù)組

????????????tmp.sort(function () {

????????????????return Math.random() - 0.5 ?//可以打亂數(shù)組

????????????})

????????????// console.log(tmp) ?// 看看生成的數(shù)組 ?可以看到已經(jīng)不成對的隨機數(shù)字數(shù)組

????????????function(){ //技術(shù)指標 http://www.kaifx.cn/mt4/kaifx/1734.html

????????????return tmp ??????????// 將數(shù)組返去

????????}

????????function createSquare(num, row, col) {

????????????var temp = document.createElement('div');

????????????temp.classList.add('square');

????????????temp.style.backgroundImage = "url('./src/img/連連看/" + num + ".jpg')";

????????????temp.style.top = row * 80 + 'px'; // 生成方塊的位置 96,97

????????????temp.style.left = col * 80 + 'px';

????????????temp.num = num; //設置小方塊的隨機數(shù)屬性到時候可以用來判斷屬性是否一樣來判斷是否消除小方塊

????????????return temp; ??//返回了一個帶著屬性的DOM元素

????????}

????????function render() {

????????????for (var i = 0; i < squareSet.length; i++) { ?//做一個樣式的切換

????????????????for (var j = 0; j < squareSet[i].length; j++) {

????????????????????if (squareSet[i][j] && squareSet[i][j] == chooseOne) {

????????????????????????squareSet[i][j].style.opacity = '0.5';

????????????????????} else if (squareSet[i][j]) {

????????????????????????squareSet[i][j].style.opacity = '1';

????????????????????}

????????????????}

????????????}

????????}

????????function clearSquare(x, y) {

????????????wrap.removeChild(squareSet[x][y]); // 刪除方塊

????????????squareSet[x][y] = null;

????????}

????</script>

</body>

</html>

向AI問一下細節(jié)

js清除圖片

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽