console
function alertMes() {
alert("广州新华学院");
}
window.onload = function(){
document.getElementById("welcome").onclick = function(){
alert("欢迎您!");
}
document.getElementById("btn").onclick = function(){
alert("我不是按钮");
}
var oPContent= document.getElementById("content");
oPContent.onmouseover = function () {
this.style.color = "red";
}
oPContent.onmouseout = function () {
this.style.color = "black";
}
var oBtn1= document.getElementById("btn1");
oBtn1.onmousedown = function() {
oPContent.style.color = "blue";
}
oBtn1.onmouseup = 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;
}
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 = "百度一下,你就知道";
}
};
oString.focus();
oString.oncopy = function() {
return false;
}
var oTxt1 = document.getElementById("txt1");
var oTxt2 = document.getElementById("txt2");
oTxt1.onselect = function ()
{
alert("你选中了单行文本框中的内容");
};
oTxt2.onselect = function ()
{
};
oTxt2.onclick = function() {
this.select();
}
var oFruit = document.getElementsByName("fruit");
var oP = document.getElementById("fruit");
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].onchange = function ()
{
if (this.checked)
{
oP.innerHTML = "你选择的是:" + this.value;
}
};
}
var oSelectAll = document.getElementById("selectAll");
var oFruit = document.getElementsByName("fruit1");
oSelectAll.onchange = function ()
{
if (this.checked) {
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].checked = true;
}
} else {
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].checked = false;
}
}
};
var oList = document.getElementById("list");
oList.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;
}
var oBtn2 = document.getElementById("btn2");
oBtn2.onclick = function ()
{
alert("JavaScript");
};
}
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 onclick="alertMes()">弹出信息</button>
<br/>
<br/>
<button id="welcome">弹出欢迎信息</button>
<br/>
<br/>
<div id="btn">点我</div>
<div>
<p id="content">广州新华学院</p>
<button id="btn1">按下松开</button>
</div>
<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 type="text" id="search" value="百度一下,你就知道"></input>
<br/>
<div id="hint"></div>
</div>
<br/>
<div>
<input id="txt1" type="text" value="如果我真的存在,也是因为你需要我。"/><br />
<textarea id="txt2" cols="20" rows="5">如果我真的存在,也是因为你需要我。</textarea>
</div>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p id="fruit"></p>
<div>
<p><label><input id="selectAll" type="checkbox"/>全选/反选:</label></p>
<label><input type="checkbox" name="fruit1" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit1" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit1" value="西瓜" />西瓜</label>
</div>
<select id="list">
<option value="http://wwww.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>
<br/>
<br/>
<input id="btn2" type="button" value="提交" />
</body>
</html>
#btn {
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;
}
#btn:hover {
background-color: dodgerblue;
}
#search{
color:#bbbbbb;
}