1.利用焦点实现选择网站
document.getElementById("1").focus(); -->为a标签加了一个边框
<body onload="defau()">
<a href="http://www.baidu.com/" id="1">百度</a>
<a href="http://www.google.com.hk/" id="2">谷歌</a>
<a href="http://www.youku.com/" id="3">优酷</a>
<a href="http://www.tudou.com/" id="4">土豆</a>
<input id="Button1" type="button" value="选择" onclick="showtable()" />
<br />
<input id="Button2" type="button" value="进入" onclick="openhref()" />
<script type="text/javascript">
var i = 1;
var focusid;
function defau() {
document.getElementById('1').focus();
focusid = 1;
}
function showtable() {
var id = i + 1;
document.getElementById(id).focus();
focusid = id;0
i++;
if (i == 4) {
i = 0;
}
}
function openhref() {
var href = document.getElementById(focusid).href;
document.location = href;
}
</script>
</body>
2.鼠标悬停切换图片
重点： onmouseover(鼠标在移进) onmouseout(鼠标移出)
<body>
<a href="#" onmouseover="over(this)" onmouseout="out(this)"><img src="../images/icon4.png" alt="" id="img"></a>
<script>
function over(obj)
{
document.getElementById("img").src="../images/location.png";
}
function out(obj)
{
document.getElementById("img").src="../images/icon4.png";
}
</script>
</body>
3.点击表单隐藏文字
<style>
input {
width: 150px;
height: 16px;
color: #ccc;
font-size: 12px;
}
</style>
</head>
<body>
<!-- 获取焦点和失去焦点事件 -->
<input type="text" value="请输入..." id="inp">
<button id="btn">查找</button>
<script>
var inp = document.getElementById("inp")
inp.onfocus = function () {
if (inp.value == "请输入...") {
inp.value = "";
inp.style.color = "#333";
inp.style.background="pink";
}
}
inp.onblur = function () {
if (inp.value == "") {
inp.value = "请输入...";
inp.style.color = "#ccc";
inp.style.background="#fff";
}
}
</script>
</body>
焦点在外.png
焦点在内.png
网友评论