12.23Web考试

↓用长文本分页时加这个

#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;
}

↓用时间时加这个

#time{
		width:200px;
		height:40px;
		float:right;
		line-height:40px;
		text-align:center;
		font-size:24px;
		background:#0CF;
		}

-------------------------------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------------------------------
↓变颜色的例子
<ul class="sy">
  <li id="td1" onmouseover="over('td1')" onmouseout="out('td1')">首页</li>
  <li id="td2" onmouseover="over('td2')" onmouseout="out('td2')">图片</li>
  <li id="td3" onmouseover="over('td3')" onmouseout="out('td3')">贴吧</li>
  <li id="td4" onmouseover="over('td4')" onmouseout="out('td4')">琪琪</li>
  <li id="td5" onmouseover="over('td5')" onmouseout="out('td5')">问问</li>
  <li id="td6" onmouseover="over('td6')" onmouseout="out('td6')">嗯嗯</li>
  </ul>



↓下拉列表例子

<form>
   
   <select id="pro" onchange="ChangeProvinceSelect(this.selectedIndex)">
    </select>
    <select id="ci" >
      <option >请选择</option>
    </select>
      
</form>


↓长文本分页例子


<div  id="frameContent">积极工作
巴斯德曾经说过一句话：立志是事业的大门，工作是登门入室的旅途。我相信主动积极的工作是幸福生活的基础，我们应携起手来主动积极地去完成每一件事情，力求精益求精，摆脱依赖心理，工作就是一份责任，无论什么时候，我们都应该“用积待工作极勤奋的态度对”。生命为什么而精彩？不是你有了多少的财富，也不是你的生活多么的灿烂。而是他的工作为我们这个社会带来了什么。
一朝开始便永远能够将事业续继下去的人是幸福的。积极是一个人进取的表现，积极也是任何公司和企业都提倡的一种工作作风。而责任是保持积极工作态度的重要因素，所以我们要想积极工作，就要对待工作有一颗责任的心，我们对社会，对家庭的责任是不可或缺的。社会的繁荣需要我们的努力工作来维持，家庭的稳定和幸福也要我们的努力来满足。
我们每个人都有着不同的经历和机遇，我们不可能每个人都取得非凡的成就，但是如果我们对身边的每件事情都积极对待，每天进步一点点，我们至少会成为一个优秀的人。面对现实的残酷，我们可能束手无策，DNA我们可以通过改变态度来决定事情的发展。虽然不知道未来会怎样，但我们可以努力做好今天的自己。
在剧烈的竞争当中多付出一点，便可多赢一点。相信每一个积极向上，乐于奉献的人都会有一个光辉的未来。积极、独立、自强、奉献让我们起飞，我们会让我们自己飞的更高！
</div>
<div id="pages" style="font-size:13px;"></div>


↓实施时间例子


<div id="time"></div>

----------------------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------------------


<script type="text/javascript">

↓这是变颜色的
      function over(id){
            document.getElementById(id).style.background="skyblue";
			document.getElementById(id).style.fontSize = "20px";  
      }
      function out(id){
            document.getElementById(id).style.background="white";
			document.getElementById(id).style.fontSize = "15px";
      }
	  



↓这是换页的

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);         //根据高度，输出指定的页
}





↓这是下拉的

 
        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>