<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
         a:link, a:visited
        {
            color: black;
            text-decoration: none;
        }
        div ul li
        {
            display: list-item;
            list-style-type: none;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
        $(function () {

            //Change the link color when the Mouse over (A1)
            $("a").each(function () {
                $(this).hover(function () {
                    $(this).css({ "color": "red" });
                });
            });

            //Append msg to the page (A3)
            $('#submit').click(function () {
                var msg = $('#words').val();
                var time = getTime();
                if (msg.trim() != "" && msg != undefined) {
                    var msgnew = time + "<br/>" + "<li>" + msg + "</li>";
                    $('#TalkArea').append(msgnew);
                    $('#TalkArea').css({ "background-color": "yellow", "width": "500px" });
                }
            });

            //Get Date
            function getTime() {
                var date = new Date();
                var day = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
                var m = date.getMonth() + 1;
                var month = m > 9 ? m : "0" + m;
                var hour = date.getHours() > 9 ? date.getHours() : "0" + date.getHours();
                var minute = date.getMinutes() > 9 ? date.getMinutes() : "0" + date.getMinutes();
                var second = date.getSeconds() > 9 ? date.getSeconds() : "0" + date.getSeconds();
                var year = date.getFullYear();
                var time = day + "/" + month + "/" + year + " " + hour + ":" + minute + ":" + second;
                return time;
            }

            //Enter to submit (A2)
            document.onkeydown = function (e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which;
                if (code == 13) {
                    $("#submit").click();
                }
            }
        });
    </script>
</head>
<body>
    <div>
        Here is a start!<br />
        <a href="#">A</a><br />
        <a href="#">B</a><br />
        <a href="#">C</a><br />
        <a href="#">D</a><br />
        <input type="text" id="words" /><br />
        <input type="button" value="Submit" id="submit" />
    </div>
    <div>
        <ul id="TalkArea">
        </ul>
    </div>
</body>
</html>


效果图：