console 命令行工具 X clear

console

window.onload = function () {//页面加载完成再开始函数
    //JS里面写
    var oBtn1=document.getElementById("btn1");
    oBtn1.onclick=function(){
        alert("欢迎你！");
    }
      var oBtn2=document.getElementById("divBtn");
    oBtn2.onclick=function(){
        alert("我不是一个按钮！");
    }
    //鼠标移入移出
      var oBtn3=document.getElementById("content");
    oBtn3.onmouseover=function(){
       this.style.color="red";
    }
      oBtn3.onmouseout=function(){
       this.style.color="black";
    }
    //鼠标按下松开
       var oBtn4=document.getElementById("updown");
    oBtn4.onmousedown=function(){
       oBtn3.style.color="blue";
    }
      oBtn4.onmouseup=function(){
       oBtn3.style.color="black";
    }

    oBtn4.onmousemove=function(){
       this.style.color="lightskyblue";
    }
      oBtn4.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(){
        var regex=/^[0-9]*$/;
        if(regex.test(oNumber.value)){
            ohint.innerHTML="输入正确";
           ohint.style.color="green";
        }else{
              ohint.innerHTML="输入错误,必须输入数字";
           ohint.style.color="red";
        }
    }
    //表单元素
    //表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表） 
    //tab键（获取焦点）

    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";
        }
    }
    //聚焦文本框
   // oString.focus();
    //oSearch.focus();
    //单多行文本内容选中事件
    var oSingleText=document.getElementById("singleText");
    var oMultipleText=document.getElementById("multipleText");
    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){
        //给每个事件选中任意一个单选按钮（也就是触发onchange事件）
        oFruits[i].onchange=function(){
            if(this.checked){//判断是否选中
                oPFruit.innerHTML="你的选择是："+this.value;
            }
        }
    }
    //复选框值发生变化
    var oSelectAll=document.getElementById("selectAll");
    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 url=this.options[this.selectedIndex].value;
        window.open(url);
    }
    //禁止复制
    document.body.oncopy=function(){
        return false;
    }
     //禁止选中：防止页面内容被选取。
    document.body.onselectstart=function(){
        return false;
    }
     //禁止右键菜单
    document.oncontextmenu=function(){
        return false;
    }


} 
//HTML函数调用
function alertMes(){
    alert("新华学院");
}
//页面关掉之前完成的,要有onload
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/>
        <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 />
        <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> 
         <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;
}