第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使特定的鍵盤輸入更改頁面上形狀的屬性？

如何使特定的鍵盤輸入更改頁面上形狀的屬性？

函數(shù)式編程 2021-05-08 15:12:44
我如何做到這一點(diǎn)，當(dāng)用戶按下某個鍵時，形狀的某些屬性會發(fā)生變化。例如，當(dāng)用戶在鍵盤上按下“ a”時，如何使屏幕上的形狀改變顏色。我嘗試編輯鼠標(biāo)懸停事件以適合我希望它響應(yīng)的按鍵輸入。<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Page Title</title>    <link rel="stylesheet" href="css/screen.css"><style>.box1{    background:#1E90FF;    width: 1000px;    height:100px;    float:right;    margin: 0px 0px 0px 0px;}.circle {    height: 200px;    width: 200px;    background-color:  #1E90FF;    border-radius: 50%;}.toprectangle {        height: 80px;        width: 200px;        background-color: #1E90FF;        float:right;        margin: 0px 40px 20px 80px;        border: 1px solid #1E90FF;        }.square {        height: 80px;        width: 200px;        background-color: #1E90FF;        float:right;        margin: 10px 40px 10px 1000px;        border: 1px solid #1E90FF;        <!--Third square down-->}.box2{    background:#1E90FF;    width: 1400px;    height:100px;    float:right;    margin: 60px 0px 0px 0px;    <!--rectangle at the bottom-->    }.box3{    background:#1E90FF;    width: 200px;    height:600px;    margin: 0px 20px 130px 0px;    <!--rectangle going up the side-->}.circle1{     height: 200px;     width: 200px;     background-color:  #1E90FF;     border-radius: 50%;     margin: 10px 500px 0px;}</style></head><body><script> function onkeypress(evt);    if(onkeypress == 49):        .toprectangle {            height: 80px;            width: 200px;            background-color: #ff78ff;            float:right;            margin: 0px 40px 20px 80px;            border: 1px solid #1E90FF;                    }</script>    <div class="box1"></div>    </div>    <div class="circle"></div>    <div class="circle1"></div>    <div class="toprectangle"></div>    <div class="square"></div>    <div class="square"></div>    <div class="box3"></div>    <div class="box2"></div><svg width="500" height="150">    </body></html>我希望不同的形狀會改變顏色，具體取決于用戶按下的鍵，但是此刻的代碼無法響應(yīng)任何輸入。
查看完整描述

2 回答

?
蝴蝶不菲

TA貢獻(xiàn)1810條經(jīng)驗 獲得超4個贊

好的，所以您的代碼中有些錯誤...首先，您的JS（JavaScript）錯誤，語法


錯誤的方法

function onkeypress(evt);

    if(onkeypress == 49)

正確的方法

function onkeypress(evt) {


    if ( /* your condition */ ) {

        /* your code */

    }

}

另外，您需要在函數(shù)中添加一個偵聽器，該偵聽器將偵聽某個事件并調(diào)用一個函數(shù)（您的回調(diào)），您可以在此處閱讀更多內(nèi)容。要使用它就像：


document.addEventListener("keypress", onkeypress); // Add the listener


function onkeypress(e) {

    /* Will handler your callback */

}

或者

document.addEventListener("keypress", (e) => {

    /* Will handler your callback */

})

而且第二個snnipet中的CSS是錯誤的，您必須在<style></style>標(biāo)記內(nèi)使用它。并且您的<script></script>標(biāo)簽必須在正文的末尾，才能正常工作。嘗試下面的代碼。


<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Page Title</title>

    <link rel="stylesheet" href="css/screen.css">

  <style>

    .toprectangle {

        height: 80px;

        width: 200px;

        background-color: #1E90FF;

        float:right;

        margin: 0px 40px 20px 80px;

        border: 1px solid #1E90FF;

    }

  </style>

</head>

<body>


    <div class="box1"></div>

    <div class="circle"></div>

    <div class="circle1"></div>

    <div class="toprectangle"></div>

    <div class="square"></div>

    <div class="square"></div>

    <div class="box3"></div>

    <div class="box2"></div>



  <script>

    document.addEventListener("keypress", onkeypress);

      function onkeypress(e) {

        console.log(`Letter: ${e.key} with code ${e.keyCode}`);

        if (e.keyCode == 97) {

          console.log('Letter `a` has been pressd!');

          let toprectangle = document.getElementsByClassName("toprectangle");

          console.log(toprectangle)

          toprectangle[0].style.backgroundColor = "#000"

        }

    }

</script>


</body>

</html>


查看完整回答
反對 回復(fù) 2021-05-20
  • 2 回答
  • 0 關(guān)注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號