目录
-
介绍
系统定制开发学习前端两个星期后学到了很多,知道了html系统定制开发是制作网页的“骨架”,css系统定制开发是制作好看的皮囊,js系统定制开发是让人动起来,哈哈哈,系统定制开发我觉得我理解的没有错,我感觉学习前端比学习Python有意思多了。
学习前端是一边学习一遍练习做的一个不能切换视频的界面,能换视频的播放器等我再学习一段时间应该就可以实现了,到时候再加上数据库,一个小型的视频播放网站就可以做成,哈哈哈。
-
HTML5
用HTML5编写网页简单的框架,导入css和js文件。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>播放器</title>
- <!--引入css文件-->
- <link rel="stylesheet" href="xin.css">
- <script type="text/javascript" src="yi.js"> //src:引入js文件的路径
- </script>
-
- </head>
- <!--设置图片路径-->
- <body>
- <div class="videoContainer" align="center">
- <video id="videoPlayer" ontimeupdate="progressUpdate()"
- width="640" height="440" controls="controls">
- <source src="图片/lv_0_20220609221451.mp4" type="video/mp4" >
- <source src="图片/mixkit-beach-front-with-children-playing-2176.webm"
- type="video/webm" >
- </video>
- </div>
- <div class="barContainer" align="center">
- <div id="durationBar">
- <div id="positionBar"><span id="displayStatus">进度条.</span></div>
- </div>
- </div>
- <div class="top" align="center">
- <button class="button-3d-1" onclick="play()">播放</button>
- <button onclick="pause()">暂停</button>
- <button onclick="stop()">重新开始</button>
- </div>
- </body>
- </html>
-
CSS3
用CSS3来美化界面,让界面美观能吸引人观看。其中我用到了和标签选择器。
- body{
- background: url("图片/妮露.jpg") fixed;
- background-size:100% 100%;
- }
- video{
- border: 10px dashed lightskyblue;
- margin: 17px;
- background-size: cover;
- background-image: url("图片/6c6eb2c68869953a6a0c6379650c460.jpg");
- }
- button{
- background-color: cornflowerblue;
- color: azure;
- }
- .top{
- height:24px;
- background:gold;
-
JavaScript
JavaScript是一个脚本语言,能直接在web上运行,用Js来给按钮添加动作。
- var video;
- var display;
- window.onload = function(){
- video = document.getElementById("videoPlayer");
- display = document.getElementById("displayStatus");
- }
- // 定义播放按钮
- function play(){
- video.play();
- }
- // 定义暂停按钮
- function pause() {
- video.pause();
- }
- // 定义重新开始按钮
- function stop() {
- video.pause();
- video.currentTime=0;
- }
- // 设置进度条
- function progressUpdate() {
- var positionBar = document.getElementById("positionBar");
- positionBar.style.width = (video.currentTime / video.duration * 100) +" ";
- display.innerHTML = (Math.round(video.currentTime *100)/100) + "能量值";
- }
-
效果图展示
下图就是整个的一个效果图,如果你也想尝试,可以复制代码,修改背景图片,和视频位置,就可以达到下面的效果了。
有三个基础播放按钮,分别是播放、暂停、重新开始。
第一次尝试做前端,学的也很浅,做的很是粗糙,不喜勿喷。
推荐一个编写前端的工具 webstorm,有了好的工具才能事半功倍。
-
类名命名规范
如果以后想要作为一名优秀的前端开发者,在定义类名的时候就不能马虎,这不仅影响后端效率和后期维护,我再分享一下类名命名。
中文 | 英文 |
---|---|
头 | heard |
内容 | content |
尾 | footer |
导航 | nav |
侧栏 | sidebar |
栏目 | column |
左右页 | left right center |
登录条 | loginbar |
标志 | logo |
广告 | banner |
页面主体 | main |
热点 | hot |
新闻 | news |
下载 | download |
子导航 | subnav |
菜单 | menu |
子菜单 | submenu |
搜索 | search |
友情链接 | friendlink |
这次我的分享就到这里结束了,喜欢的话留下你的赞吧