Question

在下面的代码中，我有一个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>

Answer 1

也许你应该总是隐藏按钮并在之前没有点击时显示它。

当它隐藏在第一个位置时，您将无法获得已经点击它的用户的闪烁按钮！

这没有用。由于此按钮是页面中最顶层的元素，如果我没有在第一个位置显示它，然后在页面加载后显示它，则所有其他元素都会移动。我编辑了这个问题

将按钮包裹在具有按钮尺寸的div中！什么都没动？

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

你的问题是“无格式内容的闪光” 使用js显示或隐藏按钮时，页面会移动，除非您在操作完成之前隐藏所有内容！

您可以尝试谷歌“避免闪现无格式内容”或阅读：Avoid Flash of unstyled content

根据localStorage值显示/隐藏HTML5元素

1 个答案: