两个

来源：互联网发布：2015java面试宝典下载编辑：程序博客网时间：2024/04/28 13:18
第一个
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        .ad{            position: fixed;            right: 0;            bottom: 0;            width: 250px;            height: 120px;            background-image: url("images/ad.jpg");            display: none;        }        .ad span{            position: absolute;            right: 0;            top: 0;            width: 40px;            height: 20px;            background-image: url("images/h.jpg");            cursor: pointer;        }    </style>    <script src="../jquery-1.11.1/jquery-1.11.1.js"></script>    <script>        $(function () {            $(".ad").slideDown(1000).slideUp(1000).fadeIn(1000).children("span").click(function () {                $(this).parent().fadeOut(1000);            });            $(".ad").slideDown(1000, function () {                $(".ad").slideUp(1000, function () {                   $(".ad").fadeIn(1000, function () {                       $(".ad").children("span").click(function () {                          $(this).parent().fadeOut(1000, function () {                              alert("执行完毕");                          });                       });                   }) ;                });            });        })    </script></head><body><div class="ani">孔曰成仁，孟曰取义，唯其义尽，所以仁至。读圣贤书，所学何事？而今而后，庶几无愧。</div><div class="ad">    <span></span></div></body></html>第二个<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <link href="css/Check.css" rel="stylesheet">    <script src="../jquery-1.11.1/jquery-1.11.1.min.js"></script>    <script>        jQuery(function () {            //需求1：点击按钮显示遮罩层和添加数据表格            //需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格            //需求3：点击get所在的标签，删除所在的tr            //需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中            //需求1：点击按钮显示遮罩层和添加数据表格            $("#j_btnAddData").click(function () {                //显示遮罩层和j_formAdd这个盒子                $("#j_mask").show();                $("#j_formAdd").show();            });            //需求2：点击里面的关闭按钮隐藏遮罩层和添加数据表格            $("#j_hideFormAdd").click(function () {                //显示遮罩层和j_formAdd这个盒子                $("#j_mask").hide();                $("#j_formAdd").hide();            });            //需求3：点击get所在的标签，删除所在的tr            $("a.get").click(function () {                //删除的是所在的tr。                $(this).parent("td").parent("tr").remove();            });            //需求4：点击里面的添加内容，全部能容这个成tr嵌套td的形式添加到tbody中            $("#j_btnAdd").click(function () {                //bug1： 内容不能为空                if($("#j_txtLesson").val() === ""){                    alert("内容不能为空！");                    return;                }                //全部能容这个成tr嵌套td的形式添加到tbody中                //获取tr，然后为tr赋值。                var tr = $("<tr></tr>");                //赋值                tr.html('<td>'+$("#j_txtLesson").val()+'</td><td>'+$("#j_txtBelSch").val()+'</td>' +                    '<td><a href="javascrip:;" class="get">KO</a></td>');                //在房间tbody中                $("#j_tb").append(tr);                //bug3：新产生的tr没有时间绑定                tr.find("a").click(function () {                    //删除的是所在的tr。                    tr.remove();                });                //问题代码//                var str = $("#j_tb").html();//                str += "<tr><td>111</td></tr>";//                console.log(str);//                $("#j_tb").html(str);//                console.log($("#j_tb").html())                //显示遮罩层和j_formAdd这个盒子                $("#j_mask").hide();                $("#j_formAdd").hide();                //bug2:设置完毕，清空内容                $("#j_txtLesson").val("");            });        });    </script></head><body><div class="wrap">    <div>        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd">    </div>    <table>        <thead>        <tr>            <th>公司名称</th>            <th>所属单位</th>            <th>已关注</th>        </tr>        </thead>        <tbody id="j_tb">        <tr>            <td>中科技</td>            <td>产品研发部</td>            <td><a href="javascrip:" class="get">KO</a></td>        </tr>        <tr>            <td>中石化</td>            <td>产品市场部</td>            <td><a href="javascrip:" class="get">KO</a></td>        </tr>        <tr>            <td>中联想</td>            <td>系统开发部</td>            <td><a href="javascrip:" class="get">KO</a></td>        </tr>        <tr>            <td>中电子</td>            <td>产品销售部</td>            <td><a href="javascrip:" class="get">KO</a></td>        </tr>        </tbody>    </table></div><div id="j_mask" class="mask"></div><div id="j_formAdd" class="form-add">    <div class="form-add-title">        <span>添加数据</span>        <div id="j_hideFormAdd">x</div>    </div>    <div class="form-item">        <label class="lb" for="j_txtLesson">公司名称:</label>        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入公司名称">    </div>    <div class="form-item">        <label class="lb" for="j_txtBelSch">所属单位:</label>        <input class="txt" type="text" id="j_txtBelSch" value="研发部门">    </div>    <div class="form-submit">        <input type="button" value="添加" id="j_btnAdd">    </div></div></body></html>

style文件

* {    padding: 0;    margin: 0;}.wrap {    width: 410px;    margin: 100px auto 0;}table {    border-collapse: collapse;    border-spacing: 0;    border: 1px solid #c0c0c0;}th,td {    border: 1px solid #d0d0d0;    color: #404060;    padding: 10px;}th {    background-color: #09c;    font: bold 16px "΢���ź�";    color: #fff;}td {    font: 14px "΢���ź�";}td a.get {    text-decoration: none;}a.del:hover {    text-decoration: underline;}tbody tr {    background-color: #f0f0f0;}tbody tr:hover {    cursor: pointer;    background-color: #fafafa;}.btnAdd {    width: 110px;    height: 30px;    font-size: 20px;    font-weight: bold;}.form-item {    height: 100%;    position: relative;    padding-left: 100px;    padding-right: 20px;    margin-bottom: 34px;    line-height: 36px;}.form-item > .lb {    position: absolute;    left: 0;    top: 0;    display: block;    width: 100px;    text-align: right;}.form-item > .txt {    width: 300px;    height: 32px;}.mask {    position: absolute;    top: 0px;    left: 0px;    width: 100%;    height: 100%;    background: #000;    opacity: 0.5;    display: none;}.form-add {    position: fixed;    top: 30%;    left: 50%;    margin-left: -197px;    padding-bottom: 20px;    background: #fff;    display: none;}.form-add-title {    background-color: #f7f7f7;    border-width: 1px 1px 0 1px;    border-bottom: 0;    margin-bottom: 15px;    position: relative;}.form-add-title span {    width: auto;    height: 18px;    font-size: 16px;    font-family: ����;    font-weight: bold;    color: rgb(102, 102, 102);    text-indent: 12px;    padding: 8px 0px 10px;    margin-right: 10px;    display: block;    overflow: hidden;    text-align: left;}.form-add-title div {    width: 16px;    height: 20px;    position: absolute;    right: 10px;    top: 6px;    font-size: 30px;    line-height: 16px;    cursor: pointer;}.form-submit {    text-align: center;}.form-submit input {    width: 170px;    height: 32px;}
阅读全文
0 0