时间戳

首页 > 解决方案 > 拖放 Javascript if 语句问题

javascript - 拖放 Javascript if 语句问题

问题描述

我目前正在开发一个利用 HTML 的拖放功能的 javascript 游戏。我在这里要做的是允许随机生成的水果图像可以拖放到果冻图像上。然后如果拖动的图像符合条件集（即数字图像数组索引== x，水果图像索引== y），允许它下降。为了声明这个 if 语句，我从背景图像中获取值。（如果数字的背景图像是 x，水果的背景图像是 y）我的代码执行良好，直到我尝试为其设置条件。从逻辑上讲，我不明白为什么当有 if 语句时它不起作用，它甚至不会显示图像。

编辑：尝试使用 === 而不是 =，仍然没有响应

编辑：在注释中删除分号后，其余代码执行良好。但是拖放不会响应。

编辑：声明的图像 url 变量，而不是直接在放置函数中使用 url。拖放仍然不起作用。

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';

var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
var numberImage2 =  "url(" + numberAddress + myNumber[1] + ")";
var numberImage3 =  "url(" + numberAddress + myNumber[2] + ")";
var numberImage4 =  "url(" + numberAddress + myNumber[3] + ")";
var numberImage5 =  "url(" + numberAddress + myNumber[4] + ")";
var numberImage6 =  "url(" + numberAddress + myNumber[5] + ")";
var numberImage7 =  "url(" + numberAddress + myNumber[6] + ")";
var numberImage8 =  "url(" + numberAddress + myNumber[7] + ")";
var numberImage9 =  "url(" + numberAddress + myNumber[8] + ")";



var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';

fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';

fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';

var apple3 = "url(" + fruit1Address + fruitCloudOne[0] + ")";
var banana3 = "url(" + fruit1Address + fruitCloudOne[1] + ")";
var blueberry3 = "url(" + fruit1Address + fruitCloudOne[2] + ")";
var plum3 = "url(" + fruit1Address + fruitCloudOne[3] + ")";
var strawberry3 = "url(" + fruit1Address + fruitCloudOne[4] + ")";

var apple5 = "url(" + fruit1Address + fruitCloudOne[5] + ")";
var banana5 = "url(" + fruit1Address + fruitCloudOne[6] + ")";
var blueberry5 = "url(" + fruit1Address + fruitCloudOne[7] + ")";
var plum5 = "url(" + fruit1Address + fruitCloudOne[8] + ")";
var strawberry5 = "url(" + fruit1Address + fruitCloudOne[9] + ")";

var apple8 = "url(" + fruit1Address + fruitCloudOne[10] + ")";
var banana8 = "url(" + fruit1Address + fruitCloudOne[11] + ")";
var blueberry8 = "url(" + fruit1Address + fruitCloudOne[12] + ")";
var plum8 = "url(" + fruit1Address + fruitCloudOne[13] + ")";
var strawberry8 = "url(" + fruit1Address + fruitCloudOne[14] + ")";



var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';

fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';

fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';

var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";

var apple2 = "url(" + fruit2Address + fruitCloudTwo[5] + ")";
var banana2 = "url(" + fruit2Address + fruitCloudTwo[6] + ")";
var blueberry2 = "url(" + fruit2Address + fruitCloudTwo[7] + ")";
var plum2 = "url(" + fruit2Address + fruitCloudTwo[8] + ")";
var strawberry2 = "url(" + fruit2Address + fruitCloudTwo[9] + ")";

var apple4 = "url(" + fruit2Address + fruitCloudTwo[10] + ")";
var banana4 = "url(" + fruit2Address + fruitCloudTwo[11] + ")";
var blueberry4 = "url(" + fruit2Address + fruitCloudTwo[12] + ")";
var plum4 = "url(" + fruit2Address + fruitCloudTwo[13] + ")";
var strawberry4 = "url(" + fruit2Address + fruitCloudTwo[14] + ")";



var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';

fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';

fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';

var apple6 = "url(" + fruit3Address + fruitCloudThree[0] + ")";
var banana6 = "url(" + fruit3Address + fruitCloudThree[1] + ")";
var blueberry6 = "url(" + fruit3Address + fruitCloudThree[2] + ")";
var plum6 = "url(" + fruit3Address + fruitCloudThree[3] + ")";
var strawberry6 = "url(" + fruit3Address + fruitCloudThree[4] + ")";

var apple7 = "url(" + fruit3Address + fruitCloudThree[5] + ")";
var banana7 = "url(" + fruit3Address + fruitCloudThree[6] + ")";
var blueberry7 = "url(" + fruit3Address + fruitCloudThree[7] + ")";
var plum7 = "url(" + fruit3Address + fruitCloudThree[8] + ")";
var strawberry7 = "url(" + fruit3Address + fruitCloudThree[9] + ")";

var apple9 = "url(" + fruit3Address + fruitCloudThree[10] + ")";
var banana9 = "url(" + fruit3Address + fruitCloudThree[11] + ")";
var blueberry9 = "url(" + fruit3Address + fruitCloudThree[12] + ")";
var plum9 = "url(" + fruit3Address + fruitCloudThree[13] + ")";
var strawberry9 = "url(" + fruit3Address + fruitCloudThree[14] + ")";



//random generation of number and fruits & display
var numberAddress = 'Assets/Numbers/';

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";

//refresh fruit images
function refreshFruits() {
    var fruit1Address = 'Assets/FruitCloud1/';
    var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
    var randFruit1Image = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";
    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    var fruit2Address = 'Assets/FruitCloud2/';
    var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
    var randFruit2Image = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";
    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    var fruit3Address = 'Assets/FruitCloud3/';
    var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
    var randFruit3Image = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}

//display number and three fruit images
function startGame() {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    document.getElementById("number").style.backgroundImage = numberImage1;

    document.getElementById("fruit1").style.backgroundImage = randFruit1Image;

    document.getElementById("fruit2").style.backgroundImage = randFruit2Image;

    document.getElementById("fruit3").style.backgroundImage = randFruit3Image;
}


    
function dragOver(ev) {
    ev.preventDefault();
}

function dragStart(ev) {
    ev.dataTransfer.setData("fruit", ev.target.id);
}

function onDrop(ev) {
    var numberImage1 =  "url(" + numberAddress + myNumber[0] + ")";
    var apple1 = "url(" + fruit2Address + fruitCloudTwo[0] + ")";
    var banana1 = "url(" + fruit2Address + fruitCloudTwo[1] + ")";
    var blueberry1 = "url(" + fruit2Address + fruitCloudTwo[2] + ")";
    var plum1 = "url(" + fruit2Address + fruitCloudTwo[3] + ")";
    var strawberry1 = "url(" + fruit2Address + fruitCloudTwo[4] + ")";
    
    ev.preventDefault();
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == apple1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == banana1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == blueberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == plum1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
    
    if (document.getElementById("number").style.backgroundImage == numberImage1 && document.getElementById("fruit2").style.backgroundImage == strawberry1) {
        var data = ev.dataTransfer.getData("fruit");
        ev.target.appendChild(document.getElementById(data));
    }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
}

#background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
}

#startGame {
    position: absolute;
    left: 90px;
    width: 80px;
    height: 80px;
    background-color: green;
}

#refreshFruits {
    position: absolute;
    left: 180px;
    width: 80px;
    height: 80px;
    background-color: blue;
}

#number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
}

#fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
}

#fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
}

#fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
}

#fruit1 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
}

#jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
}
<!DOCTYPE html>

<html>
    
<head>
    
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
    <script type="text/javascript" src="script.js"></script>
    <title>This is an experiment.</title>
    
</head>
    
<body>
<!--- 
<a id="download" href="index.html"></a>--->
    
<button id="startGame" onclick="startGame()"></button>
<button id="refreshFruits" onclick="refreshFruits()"></button>

<div id="number"></div>
    
<div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)"></div>

<div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)"></div>
</div>

<div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
<div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)"></div>
</div>
    
</body>
    
</html>

标签： javascripthtmlcssdrag-and-dropgame-development

解决方案

所以让这个代码工作。

我稍微更改了 if 语句，结果发现其中存在类型错误。我添加了一些控制台日志语句，以便您查看输出。当条件匹配时，拖放工作正常，由于随机生成，有时我不得不在测试时刷新屏幕很多次才能获得拖放。这个概念很酷且开箱即用，但可能需要进行一些重构以帮助最小化您的代码并提高可读性。查看示例时，您需要全屏显示它，因为它会将所有内容都压缩在一起......

希望这可以帮助

var myNumber = new Array(9);

myNumber[0] = '1.png';
myNumber[1] = '2.png';
myNumber[2] = '3.png';
myNumber[3] = '4.png';
myNumber[4] = '5.png';
myNumber[5] = '6.png';
myNumber[6] = '7.png';
myNumber[7] = '8.png';
myNumber[8] = '9.png';


var fruitCloudOne = new Array(15);

fruitCloudOne[0] = '3apple.png';
fruitCloudOne[1] = '3banana.png';
fruitCloudOne[2] = '3blueberry.png';
fruitCloudOne[3] = '3plum.png';
fruitCloudOne[4] = '3strawberry.png';
fruitCloudOne[5] = '5apple.png';
fruitCloudOne[6] = '5banana.png';
fruitCloudOne[7] = '5blueberry.png';
fruitCloudOne[8] = '5plum.png';
fruitCloudOne[9] = '5strawberry.png';
fruitCloudOne[10] = '8apple.png';
fruitCloudOne[11] = '8banana.png';
fruitCloudOne[12] = '8blueberry.png';
fruitCloudOne[13] = '8plum.png';
fruitCloudOne[14] = '8strawberry.png';


var fruitCloudTwo = new Array(15);

fruitCloudTwo[0] = '1apple.png';
fruitCloudTwo[1] = '1banana.png';
fruitCloudTwo[2] = '1blueberry.png';
fruitCloudTwo[3] = '1plum.png';
fruitCloudTwo[4] = '1strawberry.png';
fruitCloudTwo[5] = '2apple.png';
fruitCloudTwo[6] = '2banana.png';
fruitCloudTwo[7] = '2blueberry.png';
fruitCloudTwo[8] = '2plum.png';
fruitCloudTwo[9] = '2strawberry.png';
fruitCloudTwo[10] = '4apple.png';
fruitCloudTwo[11] = '4banana.png';
fruitCloudTwo[12] = '4blueberry.png';
fruitCloudTwo[13] = '4plum.png';
fruitCloudTwo[14] = '4strawberry.png';


var fruitCloudThree = new Array(15);

fruitCloudThree[0] = '6apple.png';
fruitCloudThree[1] = '6banana.png';
fruitCloudThree[2] = '6blueberry.png';
fruitCloudThree[3] = '6plum.png';
fruitCloudThree[4] = '6strawberry.png';
fruitCloudThree[5] = '7apple.png';
fruitCloudThree[6] = '7banana.png';
fruitCloudThree[7] = '7blueberry.png';
fruitCloudThree[8] = '7plum.png';
fruitCloudThree[9] = '7strawberry.png';
fruitCloudThree[10] = '9apple.png';
fruitCloudThree[11] = '9banana.png';
fruitCloudThree[12] = '9blueberry.png';
fruitCloudThree[13] = '9plum.png';
fruitCloudThree[14] = '9strawberry.png';


//random generation of number and fruits & display

var numberAddress = 'Assets/Numbers/';
var numberIndex = 0;
var fruitOneIndex = 0;
var fruitTwoIndex = 0;
var fruitThreeIndex = 0;

var fruit1Address = 'Assets/FruitCloud1/';
var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));

var fruit2Address = 'Assets/FruitCloud2/';
var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));

var fruit3Address = 'Assets/FruitCloud3/';
var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));


function refreshFruits() {
  var fruit1Address = 'Assets/FruitCloud1/';
  var randFruit1 = Math.floor(Math.random() * (fruitCloudOne.length));
  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  var fruit2Address = 'Assets/FruitCloud2/';
  var randFruit2 = Math.floor(Math.random() * (fruitCloudTwo.length));
  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  var fruit3Address = 'Assets/FruitCloud3/';
  var randFruit3 = Math.floor(Math.random() * (fruitCloudThree.length));
  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}


function startGame() {
  document.getElementById("number").style.backgroundImage = "url(" + numberAddress + myNumber[numberIndex] + ")";

  document.getElementById("fruit1").style.backgroundImage = "url(" + fruit1Address + fruitCloudOne[randFruit1] + ")";

  document.getElementById("fruit2").style.backgroundImage = "url(" + fruit2Address + fruitCloudTwo[randFruit2] + ")";

  document.getElementById("fruit3").style.backgroundImage = "url(" + fruit3Address + fruitCloudThree[randFruit3] + ")";
}



function dragOver(ev) {
  ev.preventDefault();
}

function dragStart(ev) {
  ev.dataTransfer.setData("fruit", ev.target.id);
}

//PROBLEM ARISE HERE
function onDrop(ev) {
  ev.preventDefault();
  console.log(document.getElementById("number").style.backgroundImage);
  console.log("What we are expecting to see " + document.getElementById("fruit2").style.backgroundImage );
  console.log("What we are getting " + 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")');
  
  if (document.getElementById("number").style.backgroundImage == 'url("' + numberAddress + myNumber[numberIndex] +'")' && document.getElementById("fruit2").style.backgroundImage == 'url("' + fruit2Address + fruitCloudTwo[fruitTwoIndex] + '")') {
    var data = ev.dataTransfer.getData("fruit");
    ev.target.appendChild(document.getElementById(data));
    console.log('finally got one');
  }else{
    console.log('Try Again');
  }
}
body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    padding: 0;
    background-color: black;
  }
  
  #background {
    position: absolute;
    background-image: url(Assets/Background_cloudPosition.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    bottom: 0%;
    z-index: -10;
  }
  
  #number {
    position: absolute;
    width: 230px;
    height: 230px;
    left: 450px;
    bottom: 415px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 15;
  }
  
  #fruitCloud1 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 460px;
    left: 135px;
    z-index: 15;
  }
  
  #fruitCloud2 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 320px;
    left: 300px;
    z-index: 15;
  }
  
  #fruitCloud3 {
    position: absolute;
    width: 240px;
    height: 120px;
    bottom: 185px;
    left: 110px;
    z-index: 15;
  }
  
  #fruit1 {
    position: absolute;
    top: 0px;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rosybrown;
  }
  
  #fruit2 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: aqua;
  }
  
  #fruit3 {
    position: absolute;
    width: 240px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
  }
  
  #jelly {
    position: absolute;
    background-image: url(Assets/JellyMonster/JellyMonsterDefault.png);
    background-size: contain;
    background-repeat: no-repeat;
    width: 260px;
    height: 190px;
    bottom: 50px;
    right: 390px;
    z-index: 10;
    background-color: white;
  }
  
  #startGame {
    width: 80px;
    height: 80px;
    background-color: green;
  }
  
  #refreshFruits {
    width: 80px;
    height: 80px;
    background-color: blue;
  }
  
  
<html>

<head>

  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <script type="text/javascript" src="script.js"></script>
  <title>This is an experiment.</title>

</head>

<body>

  <button id="startGame" onclick="startGame()">Start</button>
  <button id="refreshFruits" onclick="refreshFruits()">Refresh</button>

  <div id="number"></div>

  <div id="jelly" ondrop="onDrop(event)" ondragover="dragOver(event)">Jelly</div>

  <div class="fruit" id="fruitCloud1">
    <div id="fruit1" draggable="true" ondragstart="dragStart(event)">Fruit 1</div>
  </div>

  <div class="fruit" id="fruitCloud2">
    <div id="fruit2" draggable="true" ondragstart="dragStart(event)">Fruit 2</div>
  </div>

  <div class="fruit" id="fruitCloud3">
    <div id="fruit3" draggable="true" ondragstart="dragStart(event)">Fruit 3</div>
  </div>

</body>

<html>

推荐阅读