学习DOM以及弹幕的实现案例


DOM的定义

DOM(Document Object Model)是文档对象模型,是一组用来描述JS代码怎样与HTML文档进行交互和访问的web标准,它定义了一系列对象、方法和属性,用于访问、操作和创建文档中的内容、结构、样式、以及行为。
现在操作DOM可能已经落后了,但DOM里面还是很多是值得我们去学习的。对于DOM的学习,如果是仔细钻研的话,可能需要大量的时间;如果想快速的了解DOM,可以从四个方面入手:
1)操作节点
操作元素节点
操作属性节点
操作文本节点
2)操作CSS
操作css类
操作css行内样式
3)事件
4)定时器

对于学习DOM

对于DOM的操作,我的理解是首先你要知道你需要在什么操作节点上进行什么操作,就例如:你定义一个button,想要通过鼠标点击来alert,就是弹出一句话,那么你就可以给这个button注册一个点击事件,在这个点击事件里,发生了一个弹出一句话的这件事。其次要看看你想要操作的节点的效果对同一级别的兄弟元素有没有什么影响,例如有一堆button,你想要通过点击某一个button,让它的背景颜色由本来的蓝色变成红色,然后你再点击其它button,让第一个被点击过的button的样式变回原来的蓝色的同时第二个被点击的button则由蓝变红色(下面第一个案例就是实现这个效果)。当你知道你想要的对什么进行操作,对其它元素有无影响后,就会发现DOM变得简单了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
ul{list-style-type:none;}
li{
width:50px;
height:50px;
line-height:50px;
text-align:center;
border:6px solid skyblue;
border-radius:50%;
float:left;
background-color:#ccc;
}
li:hover{
cursor:pointer;
}
li.on{
background-color:gold;
border:6px solid lawngreen;
}
</style>
</head>
<body>
<ul>
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
var lis=document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(){
// 改变别人的模式,一刀切 去掉所有的on
for(var j=0;j<lis.length;j++){
lis[j].className="";
}
// 改变自己的样式 this代表当前的事件源
this.className="on"
}
}
</script>
</html>

下面用两种方式实现弹幕的例子来更直观的展示DOM的操作:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
</body>
<script>
var btn=document.getElementById("btn");
btn.onclick=function(){
var timer=null;
var words=document.getElementById("words").value;
// 创建span标签
var span=document.createElement("span");
// 将输入的内容塞到HTML中
span.innerHTML=words;
// 给span标签定位
span.style.position="absolute";
span.style.left="600px";
// 利用随机数,来决定每一个标签的高度的不同
// Math.floor是让小数取整,例如1.99为1
// document.documentElement.clientHeight代表HTML标签的高度
span.style.top=Math.floor(document.documentElement.clientHeight*Math.random())+"px";
// 将span挂载到树上
document.body.appendChild(span);
timer=setInterval(function(){
// 让span标签一次走4px的像素
span.style.left=parseInt(span.style.left)-4+"px"
// 表示当span的左边的距离小于span内容的长度时销毁,即当标签完全消失在页面中时销毁
if(parseInt(span.style.left)<-1*span.offsetWidth){
clearInterval(timer);
document.body.removeChild(span)
}
},50)
// 这个50代表每50毫秒,走一次
}
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.newList{
height: 100px;
overflow: hidden;
background-color: #ccc;
position: relative;
}
html{
height: 100%;
}
body{
height: 100%;
}
</style>
</head>
<body>
<input type="text" id="words" />
<input type="button" value="走你" id="btn" />
</body>
<script>
function Bullet(words){
this.span=document.createElement("span");
//这个利用随机数来实现字体在屏幕中字体大小的不同
if(Math.random()<0.2){
this.span.style.fontSize="50px";
}
//给span标签定位
this.span.style.position="absolute";
this.span.style.left=document.body.offsetWidth+"px";
//让弹幕从不同的高度出来
this.span.style.top=Math.floor(document.body.offsetHeight*Math.random())+"px";
this.span.innerHTML=words;
this.timer=null;
this.init();
this.move();
}
Bullet.prototype.init=function(){
document.body.appendChild(this.span)
}
Bullet.prototype.move=function(){
let that=this;
//定义span在每50毫秒走4像素的距离
//当弹幕完全消失在屏幕时被销毁和销毁定时器
this.timer=setInterval(function(){
that.span.style.left=parseInt(that.span.style.left)-4+"px";
if(parseInt(that.span.style.left)<-1*that.span.offsetWidth){
document.body.removeChild(that.span)
clearInterval(that.timer)
}
},50)
}
var btn=document.getElementById("btn");
btn.onclick=function(){
let words=document.getElementById("words").value;
let obj=new Bullet(words);
}
</script>
</html>

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

学习DOM以及弹幕的实现案例

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 学习DOM以及弹幕的实现案例
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏