一些常用的前端基础操作

最新推荐文章于 2024-05-17 01:18:21 发布

tCDPYh6sA3

最新推荐文章于 2024-05-17 01:18:21 发布

阅读量456

点赞数

本文链接：https://blog.csdn.net/tCDPYh6sA3/article/details/60962007

版权

引言

作为一名web开发人员，前端知识是必不可少的，页面布局，浏览器兼容性，js，jQuery，异步调用及CSS样式等等。现在最流行的h5,懂得h5之后，PC端和移动端都轻松搞定，音频视频处理等等，比之前的h4方便很多，速度和性能提高很多。

之前一直做后端，前端的知识接触的比较少，虽然有时候都是模块开发，前端和后台都要设计，但是那些对前端要求不高的。最近做一个智慧城市项目，客户对前端要求很多的，自己这次把自己安排到主要进行前端设计这一块，很久没有写前端东西了，突然感觉生疏了。通过这个项目，又从新开始拿起来我的前端的知识，在开发过程中遇到了很多问题，虽然都是基础性的问题，但是这些也是大家最常见的一些问题。也许大家都觉得简单，就不记住了，都是用的时候去查，但是这样浪费浪费时间的。工作之余整理了一下这几天遇到的一些问题，都是一些简单的前端问题，越是简单的东西越是容易被大家忽略的，空闲整理一下记录下来。

一、页面自动刷新

1、在HTML头地方添加<meta http-equiv="refresh" content="5"> 这样一行代码，页面就会定时刷新。content是设置多长时间刷新一次

2、在页面中使用js设置一个时间间隔，调用刷新函数refresh。 setInterval("refresh();", 5000); --5秒刷新一次

二、背景图随着屏幕变化而变化

通过CSS设置：

body {
background:url('img/index/bk.jpg') no-repeat;
background-size:100% 100%;
background-position:center center;
background-size:cover;
background-attachment:fixed;
}

三、页面滚动字幕

<div id="main" style="width:500px;height:500px;background-color:gray;border:1px solid;">
<div id="d1"><marquee scrollamount=2; style="width:100%;">向左滚动</marquee></div>
<div id="d2"><marquee scrollamount=2 style="width:100%;"><a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d3"><marquee scrollamount=2 style="width:100%;" οnmοuseοver=stop() οnmοuseοut=start()>鼠标放在文字上停止滚动</marquee></div>
<div id="d4"><marquee scrollamount=2 style="width:100%;" behavior=alternate>来回移动</marquee></div>
<div id="d5"><marquee scrollamount=2 style="width:100%;height:200px;" direction=up>·上下滚动<br>·调用了JavaScript代码<br>·可以点击链接<p>·<a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d6"><marquee scrollamount=2 style="width:100%;"><a style="color:#CC6600">颜色设置</a></marquee></div>
</div>

四、视频控件video

autoplay:false 如果出现该属性，则视频在就绪后马上播放。

controls="controls" 如果出现该属性，则向用户显示控件，比如播放按钮。

loop:如果出现该属性，则当媒介文件完成播放后再次开始播放。