1.事件的取消
如果在标签的事件中,执行return false就会将这次事件取消,例:
<a href = "http://mp.csdn.net" οnclick="return connfirm('确认离开吗?')">点击跳转</a>
结果会弹出一个确认框,确定即true,跳转去另一个页面,取消就是false,留在本页面。
onclick():表示当点击标签的时候
onsubmit():表示当表单提交的时候
onblur():表示失去焦点的时候,可以理解为鼠标光标点击其他地方,不在本窗口的时候
eval():这个函数可以把一个字符串当做JavaScript表达式一样去执行它,可以在不改动源代码的情况下去改的页面效果
<script type="text/javascript">
function runcode(){
var input = document.getElementById("myinput");
/* 得到用户输入的内容 */
var str = input.value;
/* 把用户输入的内容以代码形式执行,只有eval可以实现,不该动页面源代码却可以改动页面效果 */
eval(str);//使用eval可以实现不该动页面源代码的情况下,添加或修改页面的逻辑
}
function cal(){
/* 1.得到输入框 */
var input = document.getElementById("numberinput");
/* 2.得到输入内容 */
var str = input.value;
/* 3.把执行结果显示在input里面 */
input.value = eval(str);
}
</script>
<body>
<input type="text" id="myinput">
<input type="button" value="执行代码" οnclick="runcode()">
</body>
页面效果图:
2.全局函数
不需要使用对象去调用的函数就称为全局函数。例如:
parseInt() ,parseFloat()
evel("alert(CSDN)")
isNaN()
alert()
confirm()
3.自定义对象
JavaScript中创建对象的两种方式:
//第一中创建对象的方式
function Person(){}//定义了一个空对象,相当于声明一个对象
var p1= new Person();
p1.name="小明";
p1.age=3;
p1.run = function(){
alert(this.name+":"+this.age);
}
p1.run();//调用方法
//也可以定义一个带属性和方法的对象
function Person(name,age){
this.name = name;
this.age = age;
this.run = function(){
alert(this.name+":"+this.age);
}
}
var p2 = new Person("小明",33);
p2.run();
第二种创建方式:
var p3 ={
"name":"小明",
"age":20,
"run":function(){
alert(this.name+":"this.age);
}
}
p3.run();
4.如何给window添加事件
window下面的对象或者函数也称为全局对象,全局函数,在调用的时候window可以省略。
//1.给window添加点击事件
window.οnclick=function(){//window. 有没有都一样,全局的
alert("点击了");
}
alert():弹出提示信息框
//2添加加载完成事件
onload = function(){//window. 有没有都一样,全局的
alert("加载完成");
}
//3.添加获取焦点的事件
onfocus = function(){
console.log("焦点来了");
}
//4.添加失去焦点的事件
onblur = function(){
console.log("失去焦点");
}
效果图如下:
window的事件有:
onlick:当点击页面任意区域的时候会执行
onload:当页面加载完成的时候执行
onfocus:当页面获取焦点的时候执行
onblur:当页面失去焦点的时候执行
小练习:设置一个小框,每点击一次往前走一次,走到一定的距离后重新回头走。实现代码如下:
<style type="text/css">
#mydiv{
width:100px;
height:100px;
position:absolute;
border: 1px solid red;
}
</style>
<script type="text/javascript">
var x=0;
onclick = function(){
//每次点击位置+50
x+=50;
//位置移动到500后重置位置,从头开始
if(x>=500){//判断,x到500后重回到0
x=0;
}
console.log(x);//在浏览器控制台查看x的值
var d =
//获取div
document.getElementById("mydiv");
//设置元素距离左侧窗口50像素,把每次点击获得到的数值设置给div
d.style.left = x+"px";
}
onblur = function(){
//失去焦点后重置x的值
x=0;
var d =document.getElementById("mydiv");
d.style.left = "0px";
}
</script>
<body>
<div id="mydiv"></div>
</body>
5.添加定时器
setInterval(参数1:函数,参数2:执行下一次代码的间隔时间,单位是毫秒)
设置一个图片,让其自动移动。实现代码如下:
<style type="text/css">
img{
width: 150px;
height: 100px;
position: absolute;
left: 0px;
top:0px;
}
</style>
<script type="text/javascript">
onclick = function(){
var img = document.getElementById("myimg");
//得到原来的位置 //此处必须要加转换,转换为整数
var x = parseInt(img.style.left);
if(isNaN(x)){
x=0;
}
x+=10;
//把修改后的值设置回去
img.style.left = x+"px";
}
//创建定时器
setInterval(function(){
var img = document.getElementById("myimg");
var x= parseInt(img.style.left);
if(isNaN(x)){
x=0;
}
x+=2;
//把修改后的值设置回去
if(x>=200){
x=0;
}
img.style.left = x+"px";
},20);
</script>
</head>
<body>
<img alt="" src="c.png" id="myimg">
</body>
停止定时器:clearInterval();