jsスタイルを変更するDOM要素 - なぜこのコードは悪いですか？

-3

jsに大きな問題があります&は非常に悪いです。jsスタイルを変更するDOM要素 - なぜこのコードは悪いですか？

なぜこのコードが正常に動作しますか？

（これはトップBTNに戻って）

function checkScrollTop(){ 
 
    if (document.body.scrollTop > 300) { 
 
    document.getElementById("backToTop").style.display = "block"; 
 
    setTimeout(function() { 
 
     document.getElementById("backToTop").style.opacity = 1; 
 
    }, 1); 
 
    }else { 
 
    document.getElementById("backToTop").style.opacity = ""; 
 
    setTimeout(function() { 
 
     document.getElementById("backToTop").style.display = ""; 
 
    }, 300); 
 
    } 
 
} 
 
function backToTop(){ 
 
    var x = setInterval(function() { 
 
    if (document.body.scrollTop != 0) { 
 
     document.body.scrollTop -=20; 
 
    }else { 
 
     clearInterval(x); 
 
    } 
 
    }, 1); 
 
}

#backToTop{ 
 
    display: none; 
 
    opacity: 0; 
 
    position: fixed; 
 
    bottom: 20px; 
 
    right: 20px; 
 
    transition: 0.3s; 
 
    cursor: pointer; 
 
    background-color: #098774; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
}

<html> 
 

 
<body onscroll="checkScrollTop();"> 
 
    <div id="backToTop" onclick="backToTop();">^</div> 
 
    <div style="width: 300px;"> 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://stackoverflow.com/ads/community?id=so_community_div Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER 
 
http://clc.stackoverflow.com/markup.js?omni=Au0GHyu2P9QIOw2VALkFPwACAAAAAgA…XJlZ2lzdGVyZWR8eC1wZXJzb25hLWZyb250ZW5kfAB8cwIR0hDY2RqW&lw=1959&zc=25&pf=9 Failed to load resource: net::ERR_BLOCKED_BY_ADBLOCKER</div> 
 
</body> 
 
    <html>

ビュー次のビデオ

[URL = http://vip.opload.ir/vipdl/95/10/hamidr.bk/avc-Video-1-18-2017-7-11-11-PM.mp4] http://vip.opload.ir/vipdl/95/10/hamidr.bk/avc-Video-1-18-2017-7-11-11-PM.mp4 [/ URL]

出典

2017-01-18 hamidreza

_jsは大きな問題を抱えていると、本当にとてもbad_です！なぜそれを使うのですか？ –

だから私は魔女の1つの言語を使用してプログラムの変更domの?? – hamidreza

jsはとてもクールです。その栄光をすべて得るためには、それを正しく学ぶ必要があります。 –

代わりに表示してください！

修正コード：

function checkScrollTop(){ 
 
    if (document.body.scrollTop > 500) { 
 
    document.getElementById("backToTop").style.cursor = ""; 
 
    sdocument.getElementById("backToTop").style.visibility = "visible"; 
 
    setTimeout(function() { 
 
     document.getElementById("backToTop").style.opacity = 1; 
 
    }, 1); 
 
    }else if (selector("#backToTop").style.visibility == "visible") { 
 
    document.getElementById("backToTop").style.opacity = ""; 
 
    document.getElementById("backToTop").style.cursor = "default"; 
 
    setTimeout(function() { 
 
     document.getElementById("backToTop").style.visibility = ""; 
 
    }, 300); 
 
    } 
 
}

#backToTop{ 
 
    visibility: hidden; 
 
}

出典

2017-01-18 18:05:45 hamidreza

Okを完全に書き換え：

opacity=0; 
window.onload=function(){ 
setInterval(function(){ 
    var el=document.getElementById("backToTop"); 
    if(el.style.opacity>opacity){ 
    el.style.opacity-=0.1; 
    }else if(el.style.opacity<opacity){ 
    el.style.opacity+=0.1; 
    } 
    if(el.style.opacity>0){ 
    el.style.display="block"; 
    }else{ 
    el.style.display="none"; 
    } 
    },100); 
    };

これで、単にopacity = 1とすることができます。あなたのコードでは、滑らかで、ちらつきがなくなります。

出典

2017-01-18 16:21:30

最初の不透明度が適用され、ビデオで表示される理由を知っていますか？ – hamidreza

更新されたコードを試してください... –

良いアイデアが他の問題があります – hamidreza

jsスタイルを変更するDOM要素 - なぜこのコードは悪いですか？

答えて

関連する問題