console 命令行工具 X clear

console

window.onload = function()
{
    //鼠标事件
    var oBtn1 = document.getElementById("btn1");
    oBtn1.onclick= function(){
        alert("新华学院");
    }
    var oDivBtn = document.getElementById("divBtn");
    oDivBtn.onclick= function(){
        alert("我不是一个按钮");
    }

    var oPContent = document.getElementById("content");
    oPContent.onmousemove= function()
    {//鼠标移入
        this.style.color="orange";
    }
    oPContent.onmouseout= function()
    {//鼠标移出
        this.style.color="black";
    }

    var oUpDownBtn = document.getElementById("updown");
    oUpDownBtn.onmousedown= function()
    {//鼠标按下
        oUpDownBtn.style.backgroundColor="pink";
    }
    oUpDownBtn.onmouseup= function()
    {//鼠标松开
        oUpDownBtn.style.backgroundColor="white";
    }
    oUpDownBtn.onmouseover= function()
    {//鼠标移入
        this.style.color="orange";
    }
    oUpDownBtn.onmouseout= function()
    {//鼠标移出
        this.style.color="black";
    }

    //键盘事件
    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()//键盘弹起
    {
        //正则表达式，^ 和 $ 分别指字符串的开始与结束，\b 描述单词的前或后边界，\B表示非单词边界
        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 = "balck";
        }
    }
    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);
    }

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

    oSingleText.onclick = function()
    {
        this.select();
    }

    //单选框的值发生变化时
    var oFruits = document.getElementsByName("fruit");
    var oPFruit = document.getElementById("fruitchosen");

    for(var i =0 ;i < oFruits.length; ++i)
    {
        oFruits[i].onchange = function()
        {
            if(this.checked)
            {
                oPFruit.innerHTML = "你的选择是：" + this.value;
            }
        }
    }

    //复选框的值发生变化时
    var oSelectAll = document.getElementById("selectAll");
    var oFruit1= document.getElementsByName("fruit1")
    oSelectAll.onchange = function()
    {
        if(this.checked)
        {
            for(var i =0;i<oFruit1.length;++i)
            {
                oFruit1[i].checked = true;
            }
        }
        else
        {
            for(var i =0;i<oFruit1.length;++i)
            {
                oFruit1[i].checked = false;
            }
        }
    }
    //下拉列表的值发生变化
    var oLinkList = document.getElementById("linkList");
    oLinkList.onchange = function()
    {
        var url = this.options[this.selectedIndex].value;
        window.open(url);
    }

    //禁止复制
    document.body.oncopy = function()
    {
        return false;
    }
    //禁止选中
    document.body.onselectstart = function()
    {
        return false;
    }
    //禁止右键菜单
    document.body.oncontextmenu = function()
    {
        return false;
    }
}

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

window.onbeforeunload = function(e)
{
    e.returnValue = "记得下次要来哦！";
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
        <button id="btn" onclick="alertMes()">弹出信息</button>
        </br>
        <button id="btn1">弹出信息</button>
        </br>
        <div id="divBtn">点我</div>
        </br>
        </br>
        <div>
            <p id="content">广州新华学院</p>
            <button id="updown" >按下松开</button>
        </div>
        </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/>
        <br/>
        <div>
            <input id="search" type="text" value="百度一下，你就知道"></input>
            <button>搜索</button>
        </div> 
        <br/>
        <div>
            <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> 
        <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>
            <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;
}