JS day03

最新推荐文章于 2024-07-26 09:57:46 发布

weixin_45741427

最新推荐文章于 2024-07-26 09:57:46 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/weixin_45741427/article/details/103333404

版权

隐藏页面标签的两种方式

display:none 元素隐藏并脱离文档流, 改回原来的值则显示
visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流

自定义对象(了解)

第一种方式:
function Person(name,age){
//给对象添加属性
this.name=name;
this.age=age;
//给对象添加方法
this.run = function(){
alert(this.name+":"+this.age);
}
} */
//实例化对象
//var p = new Person(“关羽”,42);
//p.run();

第二种:

  var p2 = {
  		/* 以键值对的形式添加属性和方法 */
  		"name":"刘备",
  		"age":43,
  		"run":function(){
  			alert(this.name+":"+this.age);
  		}
  }
  p2.run();

DHTML

简介: Dynamic(动态)HTML=html+css+js
对象分类:

JavaScript内置对象:包括 string number boolean array
BOM:Browser(浏览器) Object Modle,包含和浏览器相关的各种对象
DOM:Document(文档) Object Model,包含和页面相关的各种对象

BOM

window对象, 该对象里面属性和方法称为全局属性和全局方法,访问时可以省略window.
window对象中常见的方法:
1. parseInt/Flaot()
2. alert() //弹出提示框
3. confirm() //弹出确认框
4. prompt() //弹出文本框
5. isNaN() 判断是否是数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function fn1(){
	alert("弹出提示框");
}
function fn2(){
	var a =confirm("吃了吗?");
	alert(a);
	return a;
}
function fn3(){
	var b = prompt();
	alert(b)
	return b;
}
</script>
</head>
<body>
<input type="button" value="弹出提示框" οnclick="fn1()">
<input type="button" value="弹出确认框" οnclick="fn2()">
<input type="button" value="弹出文本框" οnclick="fn3()">
</body>
</html>

window中常见的属性
1. location 位置
  获得和修改浏览器的访问地址:
  location.href //获取
  location.href=“http://tmooc.cn” //修改注意必须要加http://
  location.reload(); 重新加载(刷新)
2. history 历史当前窗口的历史页面
  history.length 页面数量
  history.back() 返回上一页面
  history.forward() 前往下一页面
  history.go(n) n正值则前进负值后退 0刷新
3. screen 屏幕
  screen.width/height 获得屏幕的分辨率
  screen.availWidth/availHeight 获取屏幕可用分辨率
4. navigator 导航/帮助
  navigator.userAgent 获取浏览器的版本信息
window中相关的事件
1. onclick 窗口点击事件
2. onload 页面加载完成事件 ****
3. onfocus 页面获取焦点事件
4. onblur 页面失去焦点事件
  注意：切换页面，鼠标点击页面会触发 onfocus、onblur时间

eval()方法

可以将字符串以js代码的形式执行
“2+3*5-5”

通过js代码给标签添加css样式

在start方法中调用stop方法为了避免重复开启定时器 ###通过标签名获取元素们
var arr = document.getElementsByTagName(“标签名”);

###Low版轮播图步骤

页面中添加div在div里面添加三个img
通过样式让div和img设置相同的宽高200*150
让所有图片隐藏(脱离文档流的隐藏)
在页面加载完成的时候获取第一张图片并让其显示
开启定时器准备一个递增的全局变量x然后在定时器的方法中让其对3取余数
获取所有的图片数组,遍历数组,遍历时判断如果i等于第5步取到的余数时让当前遍历的图片显示其它的隐藏
###定时器

开启 var timer = setInterval(方法,时间间隔);
停止 clearInterval(timer);
###只执行一次的定时器
setTimeout(方法,时间间隔);

###DOM Document Object Model文档对象模型

和页面相关的内容
####查找页面元素的方法

通过id查找
document.getElementById()
通过标签名查找
document.getElementsByTagName()
通过标签的name属性查找
document.getElementsByName()
通过标签的class属性查找
document.getElementsByClassName();
获取页面的body元素
document.body
####创建新元素

var d = document.createElement(“div”);
d.innerText=“abc”;
####添加到页面
父元素.appendChild(新元素);
document.body.appendChild(d);
####插入元素
父元素.insertBefore(新元素,弟弟元素);
####删除元素
父元素.removeChild(被删除的元素);

###代码介绍

定时器移动图片
添加数字练习
循环添加三张图片
low版轮播图
高级版轮播图 ***
倒计时练习
dom相关练习
北上广练习
###高级版轮播图步骤:
搭建页面，通过css给图片和div设置相同的宽高
修改图片的定位为绝对定位，并且在上级div里添加相对定位
在页面加载完成的时候得到所有的图片数组，遍历数组，让数组里面图片的left值为i*200
创建1秒执行100次的定时器在定时器里面获取所有图片数组，遍历数组，得到当前遍历图片的left值让其-=2 把新的值再次给到图片
在移动图片时如果left值<=-200时让left值=400
让上级div超出范围不显示
让定时器通过一个moveTimer记录，在判断left值<=-200时让定时器停止
把移动一张图片定时器的所有代码封装到一个方法中，再开启另外一个定时器，每隔2秒调用次方法
给div添加鼠标悬停事件悬停时调用stop方法方法中停止2秒执行的定时器
div添加鼠标移出事件调用start方法方法中再次开启2秒执行的定时器。
当页面失去焦点时调用 stop方法当页面获取焦点时调用 start方法

weixin_45741427

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS day03

隐藏页面标签的两种方式display:none 元素隐藏并脱离文档流, 改回原来的值则显示visibility:hidden(隐藏)/visible(显示) 隐藏元素不脱离文档流自定义对象(了解)第一种方式:function Person(name,age){//给对象添加属性this.name=name;this.age=age;//给对象添加方法this.run ...
复制链接

扫一扫