电影排行榜

Posted 小刘编码员

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了电影排行榜相关的知识,希望对你有一定的参考价值。

前言:各位csdn的源员们,大家好。我是小刘,初来乍到请大家多多指教,这是第14次发表博客,如有错误请大家观看后谅解,并在评论区留下您宝贵的意见,小刘将会用最大的努力去改正以及认真对待每一次代码的编写,请大家一定要多多包涵,你们的支持是我继续努力的最大动力,当然大家觉得不错可以关注我喔,带你走遍代码的每一个角落,让你感受代码的神奇之处。
 

首先我向大家透露一点点小方法,一定要认真观看喔!
 

本次用到的编程软件:DW
 

本次涉及到的内容html,css以及javascript

第一步:编写代码

1.首先写源代码

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>电影排行榜</title>
	<link rel="stylesheet" href="css/style.css">
</head>

<body>
	<div class="container">
		<h2 class="title">电影排行榜</h2>
		<ul id="list">	
		
		</ul>
	</div>	
	<script src="js/script.js"></script>
</body>
</html>

这些都是html的代码,起着不可或缺的作用。看起来是非常的简单,但是呢却不是那么的简单,因为他的作用是非常的大呢,如果缺少的话,整个项目将会崩溃,无法运行,在浏览器中也会显示空白的出现,这就是html的作用之处,代码的神奇无法想象呢,开局简单  首先前面就是开头的部分,然后在body里面就给它设置了页面布局的开头部分

*{
	margin:0;
	padding: 0;
}

这个* 代表这所有的布局样式,只要自己没设置的全部自动设置为这个样式

.container{
	width:600px;
	margin: 30px auto 0;
	border:1px solid #ccc;
}
.title{
	padding:10px;
	color: #F8BFBF;
}

这些css布局,主要给这个网页设置高度,宽度和边框,后面的那个title主要给标题设置内边距和颜色样式。

ul>li {
    list-style: none;
    padding: 5px 10px;
    border: 1px dashed #ccc;
	font-size: 18px;
	overflow: hidden;
}
ul li>span{
	font-size: 24px;
	font-style: italic;
	margin-right: 10px;
}

现在此时此刻代码就用到了选择器了 ,它所用到的应该就是直接子选择器了吧,他的属性就是选择下一个子元素,进行设置css的样式

.red{
	color:#E62326;
}
.content{
	padding-top: 10px;
/*	display: none;*/
}
.content div{
	width:40%;
    height:140px;
    float: left;
}
.content img{
	width:100%;
    height: 100%;
}
.content p{
	width:56%;
	font-size: 12px;
	padding: 4px 10px;
	float: left;
}

这些就是一些样式的基本设置了,给一些代码设置基本的样式,来起到把网页更加完美好看的布局,使人在视觉上和感官上非常的完美,这样就起到了css布局页面设置的作用了。

var movieList=[
	{
		number:1,
		movieName:"狙击手",
		imgsrc:"images/m1.jpg",
		introduce:"地处东非资源富饶的萨基亚,是21世纪初非洲大陆屈指可数的增长经济体。因为政治利益,3年前的总统大选结果遭到军方否认,国家陷入了战争的深渊。 萨基亚被由总统的秩序军和军阀的自由军一分为二。常年的战争使得人民的生活陷入水深火热之中,滥用的生化武器让原本肥沃的土地变得贫瘠。 战争也带来了外国军队、恐怖分子、军火公司、私人武装……这里变成了角逐利益与生死的竞技场。"
	},
	{
			number:2,
			movieName:"叶问4:完结篇",
			imgsrc:"images/m2.jpg",
			introduce:"因故来到美国唐人街的叶问,意外卷入一场当地军方势力与华人武馆的纠纷,面对日益猖狂的民族歧视与压迫,叶问挺身而出,在美国海军陆战队军营拼死一战,以正宗咏春,向世界证明了中国功夫。"
		},
	{
		number:3,
		movieName:"肥龙过江",
		imgsrc:"images/m3.jpg",
		introduce:"港警察朱福龙(甄子丹 饰)因一次工作失误惨被降级,万般无奈之际又遭未婚妻可儿(周励淇 饰)悔婚,事业爱情的双重打击令他一蹶不振,暴饮暴食六个月后体重猛增到200斤!上司黄警官不忍其继续堕落,委派朱福龙前往日本押送一名犯人,并承诺只要完成任务就可以为他恢复职位。可惜来到日本,倒霉的事件便接连在他身上发生,不仅财物尽失,连犯人也在押送途中逃脱了。幸好得到前香港警察潇洒哥(王晶 饰)的帮助才得以暂时解困,为了完成任务找回犯人,朱福龙与潇洒哥共同行动,不料在查找真相的过程中发现了日本黑帮的惊天阴谋......"
	},
	{
		number:4,
		movieName:"哪吒之魔童降世",
		imgsrc:"images/m4.jpg",
		introduce:"天地灵气孕育出一颗能量巨大的混元珠,元始天尊将混元珠提炼成灵珠和魔丸,灵珠投胎为人,助周伐纣时可堪大用;而魔丸则会诞出魔王,为祸人间。元始天尊启动了天劫咒语,3年后天雷将会降临,摧毁魔丸。太乙受命将灵珠托生于陈塘关李靖家的儿子哪吒身上。然而阴差阳错,灵珠和魔丸竟然被掉包。本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。然而面对众人对魔丸的误解和即将来临的天雷的降临,哪吒是否命中注定会立地成魔?他将何去何从?"
	},
	{
		number:5,
		movieName:"汉时关",
		imgsrc:"images/m5.jpg",
		introduce:"东汉末年,忠良之后刘契为避乱世,在大漠之中守护着一座破败的关隘——汉时关,并且宣称汉时关是一个乱世之中的“避难所”,凡是进来的人,都能保证他的安全。各种势力聚集于此达到了一种奇异的平衡。 直到某天为求援军的汉军将领耿忠的到来,打破了这个江湖规矩,从此刘契被一系列事件推着做出关于死亡,亲情,友情,爱情,家国等一系列抉择。当刘契最后披上父亲传承给他的甲胄,带着极少的人和大胡军队奋勇拼杀的时候,完成了侠之大者为国为民的灵魂觉醒!"
	},
	{
		number:6,
		movieName:"捉仙记",
		imgsrc:"images/m6.jpg",
		introduce:"天意是天界出了名的留级生,因为前世孽缘未了始终无法成仙,只能在仙书阁做一名小仙童,一次无意释放了被囚的雪妖,天意下凡捉妖失去法力,以凡人身份与雪妖周旋,无意却产生了感情。天意得知自己前世犯错导致了雪女成妖,自愿在黄泉路上徘徊千年,最终雪妖为救回天意牺牲了自己。"
	},
	{
		number:7,
		movieName:"大漠江湖",
		imgsrc:"images/m7.jpg",
		introduce:"心怀江湖梦的小铁匠吕三思偶遇自己崇拜的大侠百里无忧,替大侠押送西厂女鹰犬何青缨,可何青缨却说出另一个版本,她其实是受西厂迫害的义士,那百里无忧才是出卖义士的走狗!疑点越来越多,孰是孰非需要吕三思做出判断。女鹰犬可能不是鹰犬,而大侠可能也不是大侠,忠奸难辨,从未涉足江湖的吕三思发现,这个江湖与自己想象的全然不同。"
	}
];

这些原本可以在html源代码中可以实现的布局,为什么非要要在js中编写呢??很多人就会问,这是为什么啊,在html中编写不是更加的方便嘛,这样多麻烦啊,其实你们要想到在js编码中,布局会使得布局更加的完美,因为在js中有些动态的编码,会使得代码更加灵活的运用,这些代码就是页面的内容部分,只是把源代码中的代码窃过来了而已。其中代码中设置页面的页数,名称,还有图片的路径,以及通过电影名称的来介绍电影的具体内容。

window.onload=function(){
	creatLi();
	var lis=document.getElementById("list").getElementsByTagName("li");
//	console.log(typeof lis);
//	console.log(lis);
	for(var i=0;i<lis.length;i++){
		lis[i].onmouseover=function(){
//			console.log(this);
			this.querySelector(".content").style.display="block";
		};
		lis[i].onmouseout=function(){
			this.querySelector(".content").style.display="none";
		}
	}
}
//console.log(movieList);
function creatLi(){
	var li=null;
	var list=document.getElementById("list");
	console.log(typeof movieList);
	for(var i in movieList){
		li=document.createElement("li");
		li.innerHTML='<span class="red">'+movieList[i].number+'</span>'+movieList[i].movieName+'<div class="content"><div><img src="'+movieList[i].imgsrc+'" alt=""></div><p>简介:'+movieList[i].introduce+'</p></div>';
		list.appendChild(li);
	}
	li=null;
	//for in...
}

这些代码主要的作用,就是给它设置动态的一种效果,js的代码简介不用多说吧,主要作用就是点击这个标题会显示一些内容部分。

这些就是代码所表现的视图效果,当鼠标触碰到了网页标题时,他会出来的就是内容部分

 

以上是关于电影排行榜的主要内容,如果未能解决你的问题,请参考以下文章

python爬取猫眼电影top100排行榜

解决方案电影标题中缺少代码的片段,完成挑战更多[关闭]

电影排行榜

对猫眼电影排行的爬取

网络爬虫学习——抓取猫眼电影排行

用pyquery 初步改写崔庆才的 抓取猫眼电影排行(正在更新)特意置顶,提醒自己更新