一些常用的前端基础操作-白红宇

一些常用的前端基础操作

阅读量：5173 次

发布时间：2019-06-13

本文共 6917 字，大约阅读时间需要 23 分钟。

引言

作为一名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="d3"><marquee scrollamount=2 style="width:100%;" οnmοuseοver=stop() οnmοuseοut=start()>鼠标放在文字上停止滚动</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>

四、视频控件video

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

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

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

View Code

五、canvas 元素用于在网页上绘制图形

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面是使用canvas的demo：

1  2  3  4     
       5      6     86     百分比DEMO87 88 89     
      90 91

View Code

六、消息弹出框，在右边底部显

Message.js代码:

1 (function (jQuery) { 2     /* 3      * jQuery Plugin - Messager 4      * Author: corrie    Mail: corrie@sina.com    Homepage: www.corrie.net.cn 5      * Copyright (c) 2008 corrie.net.cn 6      * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License] 7      * 8      * $Date: 2008-08-30  9      * $Vesion: 1.110      @ how to use and example: Please Open demo.html11      */12     this.version = '@1.1';13     this.layer = { 'width': 200, 'height': 100 };14     this.title = '信息提示';15     this.time = 114000;16     this.anims = { 'type': 'slide', 'speed': 600 };17 18     this.inits = function (title, text) {19         if ($("#message").is("div")) { return; }20         $(document.body).prepend('
      
       
        ×
        
         ' + title + '
        
        
       
 
       
        
         ' + text + '
        
       
      
');21     };22     this.show = function (title, text, time) {23         if ($("#message").is("div")) { return; }24         if (title == 0 || !title) title = this.title;25         this.inits(title, text);26         if (time) this.time = time;27         switch (this.anims.type) {28             case 'slide': $("#message").slideDown(this.anims.speed); break;29             case 'fade': $("#message").fadeIn(this.anims.speed); break;30             case 'show': $("#message").show(this.anims.speed); break;31             default: $("#message").slideDown(this.anims.speed); break;32         }33         $("#message_close").click(function () {34             setTimeout('this.close()', 1);35         });36         //$("#message").slideDown('slow');37         this.rmmessage(this.time);38     };39     this.lays = function (width, height) {40         if ($("#message").is("div")) { return; }41         if (width != 0 && width) this.layer.width = width;42         if (height != 0 && height) this.layer.height = height;43     }44     this.anim = function (type, speed) {45         if ($("#message").is("div")) { return; }46         if (type != 0 && type) this.anims.type = type;47         if (speed != 0 && speed) {48             switch (speed) {49                 case 'slow':; break;50                 case 'fast': this.anims.speed = 200; break;51                 case 'normal': this.anims.speed = 400; break;52                 default:53                     this.anims.speed = speed;54             }55         }56     }57     this.rmmessage = function (time) {58         setTimeout('this.close()', time);59         //setTimeout('$("#message").remove()', time+1000);60     };61     this.close = function () {62         switch (this.anims.type) {63             case 'slide': $("#message").slideUp(this.anims.speed); break;64             case 'fade': $("#message").fadeOut(this.anims.speed); break;65             case 'show': $("#message").hide(this.anims.speed); break;66             default: $("#message").slideUp(this.anims.speed); break;67         };68         setTimeout('$("#message").remove();', this.anims.speed);69         this.original();70     };71     this.original = function () {72         this.layer = { 'width': 200, 'height': 100 };73         this.title = '信息提示';74         this.time = 114000;75         this.anims = { 'type': 'slide', 'speed': 600 };76     };77     jQuery.messager = this;78     return jQuery;79 })(jQuery)

View Code

下面是demo：

1  2  3  4 
       5  6  7  8 32 33 34 35

View Code

七、Div的布局设计

1  2  3  4 
       5  6 主页-背景随着屏幕大小改变 7 38 39 40 
      
       41 
       
        42 
        43 
       
44 
       
        45 
        
         46 
         
          47 
          48 
           49 
         
50 
         
          51 
          52 
          53 
         
54 
         
          55 
          56 
         
 57 
        
58 
        
         59 
         
          60 
          61 
          62 
         
63 
         
          64 
          65 
          66 
         
67 
         
          68 
          69 
          70 
          71 
         
 72 
        
73 
       
74 
      
75 76