• 万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！

    转--http://www.2cto.com/kf/201402/277535.html
    万能js实现翻页，动态生成内容自动翻页，兼容各种浏览器（已测试）----神器版！
    2014-02-11      0 个评论    来源：卡布洛技术专栏  
    收藏    我要投稿

    要求：动态输入内容，点击post生成内容条，实现自动翻页！

    废话不多说，直接上代码：

    js代码：

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    var date=new Date();
    var myDate=date.getDate()+"/"+(date.getMonth()+1)+"/"+date.getFullYear();
    var arr=new Array();
    var pagesize=8;
    var curpage=0;
    var id=0;
    var ind=0;
    function getContent(){
        var getMind=document.getElementById("mindBox").value.replace(/(^s*)|(s*$)/g,"");
        var getMoods=document.getElementsByName("Answer");
        var flag=false;
        var getMood=""
        for(var i=0; i<getmoods.length; i++)="" {="" if(getmoods[i].checked){="" flag="true;" ind="i;" }="" if(ind="=0){getMood="1.png"}else" if(getmind="=""){alert("Please" write="" your="" mind="" !");="" return="" false;}="" else="" if(!flag){alert("please="" choose="" mood="" arr[arr.length]="[myDate,getMood,getMind,id];//将获取的数据放入多维数组中" id++;="" function="" checktable(){="" var="" arry_return="new" array();="" start_t;="" end_t;="" start="curpage*pagesize;" if(pagesize+start=arr.length&&start<=arr.length){
            start_t = start;
            end_t=arr.length;
            for(var i=0; i<(arr.length-start_t); i++){
                arry_return.push(arr[i]);
            }
        }
        else if(start>arr.length){
            return arry_return;
        }
         
        return arry_return;//将筛选后的数据放到新的数组中
    }
    function showTable(array){//将数据循环展示在页面中
        var tbodyBox=document.getElementById("tb");
        var t=tbodyBox.childNodes;
        for(var m=t.length-1; m>=0; m--){
            tbodyBox.removeChild(t[m]);
        }
        for(var i=array.length-1;i>=0;i--){
            var row=document.createElement("tr");
    　　      var cellDate=document.createElement("td");
    　　　 cellDate.appendChild(document.createTextNode(array[i][0]));
            var cellMood=document.createElement("td");
            var img=document.createElement("img");
            img.setAttribute("src",array[i][1]);
            cellMood.appendChild(img);
            //cellMood.appendChild(document.createTextNode(array[i][1]));
            var cellMind=document.createElement("td");
            cellMind.appendChild(document.createTextNode(array[i][2]));
            var cellDelete=document.createElement("td");
            var inp=document.createElement("input");
            inp.setAttribute("type","button");
            inp.setAttribute("value","delete");
            inp.setAttribute("id",array[i][3]);
            inp.setAttribute("onclick","del(this)");
            cellDelete.appendChild(inp);
        　　  row.appendChild (cellDate);
            row.appendChild(cellMood);
            row.appendChild(cellMind);
            row.appendChild(cellDelete);
            tbodyBox.appendChild(row);
        }
    }
    function submitMind(){//input提交
        getContent();
        showTable(checkTable());
        document.getElementById("pagecount").innerHTML=arr.length;
        document.getElementById("pagenum").innerHTML=Math.ceil(arr.length/pagesize);
    }
    function PerPage(){//上一页
        (curpage<1)?curpage=0:curpage--;
        showTable(checkTable());
    }
    function NextPage(){//下一页
        var pagecount=Math.ceil(arr.length/pagesize);
        (curpage<(pagecount-1))?curpage++:document.getElementById("pageDown").disabled="true";
        showTable(checkTable());
    }
    function del(temp){//删除某条特定的数据
        var getID=temp.id;
        for(var i=0; i<br>
    css代码：<p></p>
    <p></p><pre class="brush:java;">.container{text-align:center;}
    .tit{font-size:24px;}
    table{100%; border:none;}
    tr,td{text-align:center;}
    .tableContent{850px; margin:0 auto;}</pre><br>
    html代码：<p></p>
    <p></p><pre class="brush:java;">
    <div class="container">
      <h1>My Micro Blog</h1>
      <span class="tit">What's in my mind:</span>
      <input type="text" id="mindBox" size="100" maxlength="400">
      <br>
      <br>
      <span class="tit">Today's mood:</span>
      <input type="radio" name="Answer" value="1">
      Over the moon
      <input type="radio" name="Answer" value="2">
      Happy
      <input type="radio" name="Answer" value="3">
      Sad
      <input type="submit" value="Post" onclick="submitMind()">
      <br>
      <div class="tableContent">
        <table id="tableBox">
        <tbody><tr>
            <th>Date</th>
            <th>Mood</th>
            <th>What's in my mind</th>
            <th>Delete</th>
        </tr>
        </tbody><tbody id="tb"></tbody>
         <tbody><tr>
            <td colspan="4" style=" background:#DDF4F6; line-height:32px;"><span class="fan" style="padding:0;">  <span id="pageUp" style="cursor:pointer;" onclick="PerPage()">prev</span>  <span id="pageDown" style="cursor:pointer;" onclick="NextPage()">next</span> <span>共  <span id="pagenum">1</span>页  <span id="pagecount">0</span>条</span> </span></td>
          </tr>
    </tbody></table>
    </div>
    </div>
    </pre><p></p>
    <p>效果图如下：</p>
    <p><img src="http://www.2cto.com/uploadfile/Collfiles/20140211/2014021108532459.jpg" alt="" http:="" www.2cto.com="" soft"="" target="_blank" class="keylink" style=" 630px; height: 342.43660418963617px;">下载下来就能用哟，不用积分的！
    </p><p>http://download.csdn.net/download/u010480479/6910785<br>
    </p>
    <p>如果有任何指教和交流，请加QQ：1740437。</p>
    <p><br>
    </p>
    <p><br>
    </p>                        </arr.length;></getmoods.length;>
  • 相关阅读:
    oracle用户被锁死
    windows远程桌面智能调整大小
    批量ping测试脚本
    信息的组织和提取方法
    BeautifulSoup
    requests模块学习
    Telerik Fiddler 应用方法
    js 时间格式换成 把字符串(yyyymmdd)转换成日期格式（yyyy-mm-dd）记录
    vuedraggable 拖拽 应用 不同列表之间的拖拽
    vue项目图片上传 vant van-uploader 图片上传
  • 原文地址：https://www.cnblogs.com/anruy/p/5086480.html
Copyright © 2020-2023  润新知