标题:onblur和onfocus和onmousemove
只看楼主
lovemm
Rank: 2
来 自:广州
等 级:论坛游民
威 望:1
帖 子:170
专家分:24
注 册:2008-11-4
结帖率:71.43%
已结贴  问题点数:5 回复次数:8 
onblur和onfocus和onmousemove
这是我写的一个JS,里面有三个方法我不知错在哪里劳烦各位检查检查,知道知道我,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.
<html xmlns="http://www.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="javascript">

//装载网页是弹出调用hello(),利用onload调用
//onload事件描述的是--页面装载
function hello(){
alert("Hello");
}

//当网页卸载时利用unload调用bye()
//unonload事件描述的是--页面的卸载
function bye(){
alert("bye");
}

//点解"提交"时,会弹出“请输入密码框”,通过onclick调用
//onclick是点击事件
function test(){
var name1 = window.prompt("请输入你的密码","");
window.alert("你输入的密码是:"+name1);
}

//当鼠标在点击输入框是利用onfocus调用clear()方法替换uname的value
//onfocus描述的时间作用是--成为焦点
function clear(){
alert("sdasd");
document.form1.uname.value="";
}

//当输入框失去焦点onbulr调用writer()方法显示输入的内容
//onbulr描述的时间作用--当对象失去焦点
function writer(){
alert("你填写的姓名:"+document.form1.uname.value);
}

//body利用onmousemove使body内的图片随着鼠标的移动而移动
//onmousemove事件的作用是--鼠标的移动
function move(x,y){
tu.style.left = x;
tu.style.top = y;
}


//利用系统时间储存在now
function time(){
var now = new Date();
var year = now.getYear();
var month = now.getMonth();
var date = now.getDate();
var day = now.getDay();
day = day ==0?"日":day;

var hours = now.getHours();
var mins = now.getMinutes();
var secs = now.getSeconds();
var DayTime = "今天是:"+year + "年"+((month<10)?"0":"")+ month + "月"+date+"日 星期"+day;
var NowTime = "现在时间:";

if(hours<12){
NowTime+="上午";
}else{
NowTime+="下午";
}
NowTime+= ((hours<=12) ? hours : hours - 12)+((mins<10) ? ":0":":")+mins+((secs<=10) ? ":0":":")+secs;
document.clock.clock1.value = DayTime;
document.clock.clock2.value = NowTime;
}

//利用onload调用start()在输入框中显示时间,start()将time()中的对象now起来,再显示在输入框
function start(){
window.setInterval("time()",1000);
}
</script>
<body  onload="start(); hello();" unonload="bye();" onmousemove="move(event.x,event.y);">
<form name="clock" >
<div align="center">
<input type="text" name="clock1" size="30" readonly="readonly"/><br />
<input type="text" name="clock2" readonly="readonly"/></form>
<div id="tu"><img src="top.jpg" /></div>
<form name="form1">
<input type="text" name="uname" value="请输入你的姓名" onfocus="clear();" onblur="writer();"/>
<input type="button" name="b1" value="提交" onclick="test();"/>
</form>
</div>
</body>
</html>


这是我对这视频写的一个综合JS,里面有三个方法我不知错在哪里劳烦各位检查检查,指导指导我,里面的clear()和move()方法我是不直掉错在哪里会让我的页面实现不了他应有的效果,move()方法我是想实现图片随鼠标移动,clear()方法是实现当鼠标点解输入框,输入框中value就取空,但不一直调试都找不出错误
搜索更多相关主题的帖子: onmousemove onfocus onblur 
2009-12-23 15:03
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
得分:3 
自己写还是别处复制过来改的?
2009-12-23 15:16
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
得分:0 
你应该说说看你预计的效果和当前的效果分别是怎么样的
2009-12-23 15:18
lovemm
Rank: 2
来 自:广州
等 级:论坛游民
威 望:1
帖 子:170
专家分:24
注 册:2008-11-4
得分:0 
回复 2楼 aspic
我是看视频的,之后将他讲的例子全部综合在我这个HTML里面的
2009-12-24 19:04
lovemm
Rank: 2
来 自:广州
等 级:论坛游民
威 望:1
帖 子:170
专家分:24
注 册:2008-11-4
得分:0 
回复 3楼 aspic
预期效果:clear()和move()方法我是不直掉错在哪里会让我的页面实现不了他应有的效果,move()方法我是想实现图片随鼠标移动,clear()方法是实现当鼠标点解输入框,输入框中value就取空。



现在效果:clear()方法实现不了,输入框的值还是没有变化,还是我原本设置的值,
          move()方法就变成了图片定在页面上,没有预期的图片跟着鼠标移动,
         
2009-12-24 19:11
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
得分:0 
clear换成别的名称试试
move函数 其实可以的 不过你动稍微快点就丢失焦点了 你慢慢试看看
2009-12-25 08:57
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
得分:0 
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function move(x,y){
    var tu = document.getElementById('tu');
    tu.style.left = x;
    tu.style.top = y;
}
</script>
<body onmousemove="move(event.x,event.y)">
<div id="tu" style="position:absolute"><img src="https://bbs.bccn.net/images/default/star_level3.gif" /></div>
</body>
</html>
获取对象最好用标准的dom方法
2009-12-25 09:01
aspic
Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17
等 级:贵宾
威 望:51
帖 子:2258
专家分:8050
注 册:2008-2-18
得分:0 
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function move(){
    var x = event.clientX; //获取当前鼠标位置的X坐标
    var y = event.clientY; //获取当前鼠标位置的Y坐标
    var pic = document.getElementById('pic');
    pic.style.left = x + 'px';
    pic.style.top = y + 'px';
}
document.onmousemove = move;
</script>
<body>
<img src="https://bbs.bccn.net/images/default/star_level3.gif" style="position:absolute" id="pic" />
</body>
</html>
给你写个比较好用的 不过没有写ff兼容
2009-12-25 09:11
lovemm
Rank: 2
来 自:广州
等 级:论坛游民
威 望:1
帖 子:170
专家分:24
注 册:2008-11-4
得分:0 
回复 8楼 aspic
非常感谢
2010-04-09 11:28



参与讨论请移步原网站贴子:https://bbs.bccn.net/thread-294139-1-1.html




关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.513926 second(s), 8 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved