12.23 WEB script

长文本分页

#frameContent{
    width:400px;            /*调整显示区的宽*/
    height:300px;            /*调整显示区的高*/
    font-size:14px;
    line-height:20px;
    border:1px solid #000000;
    overflow-pageINdex:hidden;   /*不显示超过指定页的内容*/
    overflow-y:hidden;           /*不显示超过指定高度的内容*/
    word-break:break-all;        /*文本换行行为,如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了,汉字会被当作字母处理，所以中文的自动换行需要用这个属性值。还有一个word-wrap,不截断单词直接换行，但这个属性如果用到中文上，将产生不可预料的结果*/
}
a{
    font-size:12px;
    color:#000000;
    text-decoration:underline;
}
a:hover{
    font-size:12px;
    color:#CC0000;
    text-decoration:underline;
}
<div  id="frameContent">XXX
</div>
<div id="pages" style="font-size:13px;"></div>
<script>
var obj = document.getElementById("frameContent");      //获取内容层
var pages = document.getElementById("pages");           //获取翻页层
window.onload = function()                              //重写窗体加载的事件
{
    var allpages = Math.ceil(parseInt(obj.scrollHeight)/parseInt(obj.offsetHeight));//获取页面数量
    pages.innerHTML = "<b>共"+allpages+"页</b>";                                    //输出页面数量
    for (var i=1;i<=allpages;i++){
        pages.innerHTML += "<a href=\"javascript:showPage('"+i+"');\">第"+i+"页</a>&nbsp;";//循环输出第几页
 
    }
}
function showPage(pageINdex)
{
    obj.scrollTop=(pageINdex-1)*parseInt(obj.offsetHeight);         //根据高度，输出指定的页
}
</script>
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------

↓下拉列表

<form>
   <select id="pro" οnchange="ChangeProvinceSelect(this.selectedIndex)">
    </select>
</form>
<script>
  var province = ["请选择","山东", "河北", "河南"];
        var city = [
                ["请选择"],
                ["济南", "青岛", "淄博"],
                ["石家庄", "沧州", "承德"],
                ["郑州", "洛阳", "焦作"]
        ];
        
         //new Array()    
            var pro = document.getElementById("pro");
            //指定列表pro中option的数量
            pro.length = province.length;
            //添加元素
            for (var i = 0; i < province.length; i++) {
                pro.options[i].text = province[i];
                pro.options[i].value = i;
            }
     
 
        function ChangeProvinceSelect(index)
        {
            var ci = document.getElementById("ci");
 
            ci.length = city[index].length+1;
            
           ci.options[0].text=city[0][0];
           
            for (var i = 0; i < city[index].length; i++)
            {
                ci.options[i+1].text = city[index][i];
                ci.options[i+1].value = city[index][i];
            }
        }

显示时间
     window.onload = function() {
      var showTime = document.getElementById("time");
      setInterval(function() {
       var time = new Date();
       var hours = time.getHours();
       var minutes = time.getMinutes();
       var seconds = time.getSeconds();
       showTime.innerHTML = hours + ":" + minutes + ":" + seconds;
      }, 1000);
     };
     </script>