console 命令行工具 X clear

console

//两种方法：在script和在元素中调用
//第二种:更具可读性和维护性
window.onload = function()
{
    var oBtn=document.getElementById("btn");
    oBtn.onclick = function(){
        alert("欢迎您！");
    }
    //oBtn.focus();

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

    var oDivcontent = document.getElementById("content");
    //鼠标移进(悬停)为红色
    oDivcontent.onmouseover=function()
    {
        this.style.color="red";
    }
    //鼠标移出为黑色
    oDivcontent.onmouseout=function()
    {
        this.style.color="black";
    }

    var oUpdownBtn = document.getElementById("Updown");
    //鼠标按下为蓝色
    oUpdownBtn.onmousedown=function()
    {
        this.style.color="blue";
    }
    //松开为黑色
    oUpdownBtn.onmouseup=function()
    {
        this.style.color="black";
    }
    //鼠标移进背景色为天蓝色
    oUpdownBtn.onmousemove=function()
    {
        this.style.backgroundColor="lightskyblue";
    }

    var oString = document.getElementById("string");
    var oLength = document.getElementById("length");
    oString.onkeyup = function() //键盘松开即完成输入
    {
        var str = oString.value;
        oLength.innerHTML = str.length;
    }
    //oString.focus();
    
    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="";
            this.style.color="black";
        }
    }
    oSearch.onblur=function() //失去焦点时
    {
        if(this.value=="百度一下，你就知道"){
            this.value="百度一下，你就知道";
            this.style.color="#bbbbbb";
        }
    }
    
    //表单元素：单选框，复选框，下拉列表，多行文本，单行文本 
    var oSingleText = document.getElementById("singleText");
    var oMultipleText = document.getElementById("multipleText");
    //onselect只有单行文本和多行文本有的事件 
    oSingleText.onselect = function(){
       //alert(this.value);

    }

    oSingleText.onclick = function(){ //点击时
       this.select(); //选中状态
    }

   oMultipleText.onselect = function(){
        alert(this.value);
    }

    //onchange只有单选框，复选框和下拉列表有的事件
    var oFruits = document.getElementsByName("fruit");
    var oPFruit = document.getElementById("fruitchoosen");
    for(var i = 0;i<oFruits.length;i++){
        oFruits[i].onchange = function()
        {
            if(this.checked){
                oPFruit.innerHTML="你的选择是："+this.value;
            }
        }
    }
    
    
    var oSelectAll = document.getElementById("selectAll");
    // 只有数组才有length
    var oFruits1 = document.getElementsByName("fruit1");
    
    oSelectAll.onchange=function(){
        if(this.checked){
            for(var 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.body.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>
    </div>
    <br/> 
    <div>
        <input id="search" type="text" value="百度一下，你就知道"></input>
        <button>搜索</button>
    </div>
    <br/> 
    <br/>
    <div>
        <input id="singleText" type="text" value="我是单行文本框"></input>
        <br/>
        <br/>
        <textarea id="multipleText" cols="20" rows="6">我是多行文本框，可输入多行</textarea>
    </div>
    <br/>
    <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="fruitchoosen"></p>        
    </div>
    <br/>
    <br/>
    <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>        
    </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
}