学习JavaScriptday03

最新推荐文章于 2024-02-08 00:53:17 发布

Dc_高

最新推荐文章于 2024-02-08 00:53:17 发布

阅读量82

点赞数

分类专栏： JavaScript 文章标签： day03

本文链接：https://blog.csdn.net/baidu_39105268/article/details/80616516

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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();

Dc_高

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习JavaScriptday03

1.事件的取消如果在标签的事件中，执行return false就会将这次事件取消，例：&lt;a href = "http://mp.csdn.net" onclick="return connfirm('确认离开吗？')"&gt;点击跳转&lt;/a&gt;结果会弹出一个确认框，确定即true，跳转去另一个页面，取消就是false，留在本页面。onclick():表示当点击标签的时候onsubm...
复制链接

扫一扫