1

前段时间，我创建了一个简单的 Cocoa (OSX) 应用程序，它有 5 个按钮，允许用户对 5 个选项之一进行投票。当一个按钮被点击时，应用程序会给出一些关于点击哪个按钮的反馈，感谢用户的投票并返回初始状态以允许下一个投票者。投票被写入一个简单的文本文件，以便在所有投票后检索。非常简单但就其目的而言还可以（一种在我女儿学校投票给班级代表的奇特方式）。

现在我被要求为使用 html5 的 Web 浏览器开发相同的系统。学校希望该设置同时在多台计算机上运行。所以我们有一个本地服务器和两三台计算机连接到它。来自投票的数据需要写入服务器。

有人可以指出我已经这样做的示例的正确方向吗？我找到了一些投票系统，但它们都可以使用单选按钮或复选框，我需要在（也是动画的）背景上使用 5 个大图形（如果可能的话是动画的）。我认为对于经验丰富的 HTML5 编辑器来说这一切都非常简单，但我是初学者。

4

1 回答 1

1

好的，您提到您是“初学者”（仅供参考，我也不是专业开发人员），但我假设您知道表单是什么以及它们如何工作。下面是超级简单的，我什至不会使用 AJAX。（评论中的解释。）

代码将在一个文件中。您提到了 PHP，所以我假设您可以使用它。这就是我在下面使用的：

<?

if (isset($_POST['vote'])) { // Check if there is a vote POSTed to our page
    // Store the vote. I don't know how you did it the previous time, I'm just going to write it to a text file
    $file = fopen("votes.txt", "w");
    fwrite($file, $_POST['vote']);
    fclose($file);
}

?>

<!-- the voting page -->

<HTML>
    <HEAD>
        <title>Vote</title>
    </HEAD>
    <BODY>
        <!-- Create a form to be able to send the vote to the server in the simplest way, but don't display it -->
        <form action="thispage.html" method="post" style="display:none;">
            <!-- I don't know what possible values there are. I'll just take 'foo' and 'bar'. Of course you can add more. -->
            <input type="radio" name="vote" value="foo" />
            <input type="radio" name="vote" value="bar" />
        </form>

        <!-- The images representing the (invisible) radio button -->
        <!-- I use the data-value attribute to store to which radio button this image corresponds -->
        <img src="path/to/foo/image" data-value="foo" />Vote FOO<br />
        <img src="path/to/bar/image" data-value="bar" />Vote BAR<br />

        <!-- Import jQuery for the sake of simplicity. -->
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <!-- The trickiest part. The script. -->
        <script>
            $("img").click(function() {
                 var value = $(this).data('value');        // Get the value
                 $("input[value='" + value + "']").click();// Click the corresponding radio button
                 $("form").submit(); // Submit the form.
            });
        </script>
    </BODY>
</HTML>

未测试。

于 2013-05-02T16:31:21.140 回答