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.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.color="lightskyblue";
}
oUpdownBtn.onmouseout=function(){
oPContent.style.color="black";
}
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");
oSingleText.onselect=function(){
alert(this.value);
}
oMultipleText.onselect=function(){
alert(this.value);
}
oSingleText.onclick=function(){
this.select();
}
var oFruit=document.getElementsByName("fruit");
var oPFruit=document.getElementById("fruitchosen");
for(var i=0;i<oFruit.length;++i){
oFruit[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.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/>
<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>
</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;
}