Question

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

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

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

Answer 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>

未经测试。

简单的html5投票系统

1 个答案: