console 命令行工具 X clear

console

//onclicvk不是button专用

window.onload = function(){//页面加载
    var oBtn=document.getElementById("btn");
    oBtn.onclick=function(){
        alert("欢迎您！");
    }

    var oDivBtn=document.getElementById("divBtn");
    divBtn.onclick=function(){
        alert("我不是按钮！");
    }

    var oPContent=document.getElementById("content");
    oPContent.onmouseover=function(){
        this.style.color="red";
    }
    
    oPContent.onmouseout=function(){
        this.style.color="black";
    }

    var oUpdownBtn=document.getElementById("updown");
    oUpdownBtn.onmousedown=function(){
        oPContent.style.color="blue";
    }

    oUpdownBtn.onmouseup=function(){
        oPContent.style.color="black";
    }
    oUpdownBtn.onmousemove=function(){
        this.style.backgroundColor="lights";
    }
     
     var oString=document.getElementById("string");
     var oLength=document.getElementById("length");
     oString.onkeyup=function(){
         var str=oString.value;
         oLength.innerHTML=str.length;
     }

     var oNumber=document.getElementById("number");
     var oHint=document.getElementById("hint");
     oNumber.onkeyup=function(){
         var regex=/^[0-9]*$/;

         if(regex.test(oNumber.value)){
             oHint.innerHTML="输入正确";
             oHint.style.color="green";
         }
         else{
             oHint.innerHTML="必须输入数字";
             oHint.style.color="red";
         }
     }
//获取焦点
     var oSearch=document.getElementById("search");
     oSearch.onfocus=function(){
         if(this.value=="百度一下。你就知道"){
             this.value="";
         }
     }
     oSearch.onblur=function(){
         if(this,value==""){
             this.value="百度一下。你就知道";
         }
     }
  
    var oSingleText=document.getElementById("singleText");
     var oMultipleText=document.getElementById("multipleText");

   oSingleText.onselect =function(){
         //alert(this.value);
     }
      oSingleText.onclick =function(){
         this.select();
     }
     oMultipleText.onselect =function(){
         alert(this.value);
     }
    
//单行文本和多行文本的选中事件
    var oFruits= document.getElementsByName("fruit");
    var oPFruit=document.getElementById("fruitchosen");
    for(var i=0;i<oFruits.length;++i){
        oFruits[i]=onchange=function(){
            if(whis.checked){
                oPFruit,innerHTML="您的选择是： "+this.value;
            }
        }
    } 
//具有多个选项
    var oSelectAll=document.getElementById("selectAll");
    var oFruits1=document.getElementsByName("fruit1");

    oSelectAll.onchange=function(){
        if(this.checked){
            for(i=0;i<oFruits1.length;++i){
                oFruits1[i].checked=true;
        }
           
    }
    else{
        for(var i=0;i<oFruits1.length;++i){
           oFruits1[i].checked=false;

            }
        }
    }
    var oLinkList=document.getElementById("linkList");
    oLinkList.onchange=function(){
        var link=this.options[this.selectedIndex].value;
        window.open(link);
    }

    //防止页面内容被复制
    document.body.oncopy=function(){
        return false;
    }


    //防止页面内容被选取
    document.onselectstart=function(){
        return false;
    }

    //禁止使用鼠标右键
     document.oncontextmenu =function() {
        return false;
    } 

}
function alertMes(){
    alert("新华学院");
}

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
	</style>
	<script>

	</script>
</head>

<body>
	<button onclick="alertMes()">弹出信息</button>
        <br/>
        <br/>
        <button id="btn">弹出欢迎信息</button>
        <br/>
        <br/>
        <div id="divBtn">点我</div>
        <br/>
        <br/>
        <div >
            <p id="content">广州新华学院</p>
            <button id="updown">按下松开</button>
        </div>
        <br/>
        <br/>
        <div>
            <label>输入任意字符：</label>
            <input type="text" id="string"></input>
            <br />
            <label>字符串长度为：</label>
            <span id="length">0</span>
        </div> 
         <br/>
    <div>
        <label>输入数字：</label>
        <input type="text" id="number"></input>
        <br/>
        <div id="hint"></div>
        <br/>
        <br/>
        <div>
            <input id="search" type="text" value="百度一下，你就知道"></input>
            <button>搜索</button>
        </div>
        <br/>
        <br/>
        <input id="singleText" type="text" value="我是单行文本框"></input>
        <br />
        <textarea id="multipleText" cols="20" row="6">我是多行文本框，可以输入很多行</textarea> 

    </div>
    <br/> 

    <div>
            <label><input type="radio" name="fruit" value="苹果"></input>苹果</label>
            <label><input type="radio" name="fruit" value="香蕉"></input>香蕉</label>
            <label><input type="radio" name="fruit" value="西瓜"></input>西瓜</label>
            <br />
            <p id="fruitchosen"></p>
        </div> 


<div>
            <p><label><input id="selectAll" type="checkbox"></input>全选/反选：</label></p>
            <label><input type="checkbox" name="fruit1" value="苹果"></input>香蕉</label>
            <label><input type="checkbox" name="fruit1" value="香蕉"></input>西瓜</label>
            <label><input type="checkbox" name="fruit1" value="西瓜"></input>西瓜</label>
        </div> 


        <br />
        <select id="linkList">
            <option value="http://www.baidu.com">百度</option>
            <option value="http://www.sina.com.cn">新浪</option>
            <option value="http://www.qq.com">腾讯</option>
            <option value="http://www.sohu.com">搜狐</option>
        </select> 
    </body>
</html>

#divBtn {
    display: inline-block;
    width: 80px;
    height: 24px;
    line-height: 24px;
    font-family:微软雅黑;
    font-size:15px;
    text-align: center;
    border-radius: 3px;
    background-color: deepskyblue;
    color: White;
    cursor: pointer;
} 
#search{
    color:#bbbbbb;
}