0

以下のコードでは、id='questionaire' のボタンがあります。ユーザーがボタンをクリックすると、イベントをローカルストレージに保存して、ユーザーが次にページを開いたときにボタンが表示されないようにします。

以前に window.onload=function(){} スクリプトを使用してこれを行うことができましたが、ボタンがクリックされた場合、ボタンが一瞬表示されてから消えました。これは見栄えがよくありませんでした。

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Storage?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
    <?php
        echo "
        <form>
            <input type='button' class='button' value='Question' id='questionaire'>
        </form>
        ";

        echo "<script type='text/javascript'>
                document.getElementById('questionaire').onclick = function() {
                    localStorage.clicked = 'true';
                }
            </script>";
... <More HTML code> ...
    ?>      
</body>
</html>
4

1 に答える 1

1

おそらく、ボタンを常に非表示にして、以前にクリックされていないときに表示する必要があります。

そもそも非表示の場合、既にクリックしたユーザーの点滅ボタンは表示されません!

これは役に立ちません。このボタンはページの最上位の要素であるため、最初に表示せず、ページの読み込み後に表示すると、他のすべての要素が移動します。質問を編集しました

ボタンのサイズを持つdiv内にボタンをラップしてください！その後何も動かない

<div style="width: XXpx; height: XXpx; display: inline-block;">
    <input type='button' class='button' value='Question' id='questionaire'>
</div>

あなたの問題は、操作が完了するまですべてを非表示にしない限り、jsでロード時にボタンを表示または非表示にするときにページが移動する「スタイル設定されていないコンテンツのフラッシュ」です!

「スタイルのないコンテンツのフラッシュを避ける」をグーグルで試すか、これを読むことができます：スタイルのないコンテンツのフラッシュを避ける

于 2013-08-08T06:52:34.867 に答える