JavaScript计算器与评论系统演示-优快云博客

本文展示了一个使用JavaScript实现的简单计算器功能，并结合了论坛的无刷新评论系统，包括倒计时、评论发表、节点替换及样式操作。

<!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">
       .class1{ background-color:Red}
       .class2{ background-color:Blue}
       .class3{ font-size:50px} /*也可以写成下面的值，安娜，安娜别把把我丢在这里*/
       .class3{ font-size::xx-large}
       .class4{  counter-reset:inherit}
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
/*

    //JQuery计算器
        $(function () {
            $("#bnt1").click(function () {
                var $t1 = $("#txt1").val();
                var $t2 = $("#txt2").val();
                var t1 = parseInt($t1,10);
                var t2 = parseInt($t2,10);
                $("#txt3").val(t1 + t2);
            })

        })


        //注册倒计时。
        var dateTime = 5;
        var intervalID;
        $(function () {

            $("#bnt2").attr("disabled", true).siblings("#bnt3").attr("disabled", true);
            $("#bnt3").hide();//hide()是隐藏元素
            intervalID = setInterval("countDown()", 1000);

        })
        function countDown() {
            if (dateTime <= 0) {
                $("#bnt2").attr("disabled", false).siblings("#bnt3").attr("disabled", false);
                $("#bnt3").show();//show()是显示元素
                $("#bnt2").val("同意");
                clearInterval(intervalID);
                return;
            }
            dateTime--;
            $("#bnt2").val("请仔细阅读,还剩下【" + dateTime + "】秒");
        }


        //论坛的无刷新评论
        $(function () {
            $("#bnt5").click(function () {

                var txt = $("#txt5").val();
                var txtarea = $("#txtarea").val();
                //if (txt == "" || txtarea == "") {
                if ($("#txt5").val().length <= 0 || $("#txtarea").val().length<=0) {
                    alert("标题或者内容不能为空");
                    return;
                }

                var tr = $("<tr><td>标题：" + txt + "</td></tr><tr><td>" + txtarea + "</td></tr>");
                $("#tab1").append(tr);
                $("#txt5").val("");
                $("#txtarea").val("");
            })
        })

        //点击<ol>下的某个<li>内容，将其移除添加到另外一个<ol>下的<li>里去
        $(function () {
            $("#ol1 li").mouseover(function () {
                $(this).css("color", "red").siblings().css("color", "black").click(function () {
                    $(this).css("color", "black").appendTo($("#ol2"))
                })
            });
        })


        //节点替换

        $(function () {
            $("#bnt6").click(function () {
                $("br").replaceWith("<hr/>");
            })
        })



        //式样操作
        //《样式的添加》
        $(function () {
            $("#bnt7").click(function () {
                $("#div1").addClass("class3")
            });
        })
        //《样式的切换》
        $(function () {
            $("#bnt8").click(function () {
                $("#div1").toggleClass("class1");
            });
        })
        //《样式的删除》
        $(function () {
            $("#bnt9").click(function () {
                $("#div1").removeClass("class1");
            });
        })
        
*/

    </script>
</head>
<body>
<input type="text" id="txt1" />+<input type="text" id ="txt2" /><input type="button" id ="bnt1" value="=" /><input type="text" id="txt3" /><br />
<textarea cols="20" rows="5">注册</textarea><br />
<input type="button" id="bnt2"  value="同意"/>   <input type="button" id="bnt3"  value="不同意"/>

<table id="tab1">
<tr><td>匿名     沙发</td></tr>
</table>
<input type="text" id="txt5" /><br />
<textarea rows="5" cols="16" id="txtarea"></textarea><br />
<input type="button" value="发表评论" id="bnt5" /><br />

<ol id="ol1" ><!--style="float:left;width:30%"-->
<li>湖南</li>
<li>广东</li>
<li>上海</li>
<li>北京</li>
</ol>
<ul id="ol2"> <!--style="float:left;width:30%"--> </ul>
<br />
<input type="button" value="替换" id="bnt6" />


<div id="div1">地方大幅度的</div>
<input type="button" id="bnt7"  value="addClass"/>
<input type="button" id="bnt8" value="toggleClass" />
<input type="button" id="bnt9" value="removeClass" />

</body>
</html>