一些經常使用的前端基礎操做

時間 2019-11-10

標籤一些經常使用前端基礎简体版

原文原文鏈接

引言javascript

做爲一名web開發人員，前端知識是必不可少的，頁面佈局，瀏覽器兼容性，js，jQuery，異步調用及CSS樣式等等。如今最流行的h5,懂得h5以後，PC端和移動端都輕鬆搞定，音頻視頻處理等等，比以前的h4方便不少，速度和性能提升不少。css

以前一直作後端，前端的知識接觸的比較少，雖然有時候都是模塊開發，前端和後臺都要設計，可是那些對前端要求不高的。最近作一個智慧城市項目，客戶對前端要求不少的，本身此次把本身安排到主要進行前端設計這一塊，好久沒有寫前端東西了，忽然感受生疏了。經過這個項目，又重新開始拿起來個人前端的知識，在開發過程當中遇到了不少問題，雖然都是基礎性的問題，可是這些也是你們最多見的一些問題。也許你們都以爲簡單，就不記住了，都是用的時候去查，可是這樣浪費浪費時間的。工做之餘整理了一下這幾天遇到的一些問題，都是一些簡單的前端問題，越是簡單的東西越是容易被你們忽略的，空閒整理一下記錄下來。html

1、頁面自動刷新前端

一、在HTML頭地方添加<meta http-equiv="refresh" content="5"> 這樣一行代碼，頁面就會定時刷新。content是設置多長時間刷新一次java

二、在頁面中使用js設置一個時間間隔，調用刷新函數refresh。 setInterval("refresh();", 5000); --5秒刷新一次jquery

2、背景圖隨着屏幕變化而變化web

經過CSS設置：ajax

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

3、頁面滾動字幕後端

<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%;" onmouseover=stop() onmouseout=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>

4、視頻控件video

autoplay:false 若是出現該屬性，則視頻在就緒後立刻播放。

controls="controls" 若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

loop:若是出現該屬性，則當媒介文件完成播放後再次開始播放。

 1 <div id="main" style="width:100%;height:300px;">
 2         <div id="top" style="width:100%;height:50%;">
 3             <div id="top_left" style="width:50%;float:left;">
 4                 <video autoplay="false" style="width:100%;">
 5                     <source src="\i\video\ogg\ch01d.ogg" type="video/ogg" />
 6                     您的瀏覽器 不支持video標籤
 7                 </video>
 8             </div>
 9             <div id="top_right" style="width:50%;float:left;">
10                 <video autoplay="false" style="width:100%;">
11                     <source src="\i\video\ogg\ch01d.ogg" type="video/ogg" />
12                     您的瀏覽器 不支持video標籤
13                 </video>
14             </div>
15         </div>
16         <div id="bottom" style="width:100%;height:50%;">
17             <div id="bottom_left" style="width:50%;float:left;">
18                 <video autoplay="false" style="width:100%;">
19                     <source src="\i\video\ogg\ch01d.ogg" type="video/ogg" />
20                     您的瀏覽器 不支持video標籤
21                 </video>
22             </div>
23             <div id="bottom_right" style="width:50%;float:left;">
24                 <video autoplay="false" style="width:100%;">
25                     <source src="\i\video\ogg\ch01d.ogg" type="video/ogg" />
26                     您的瀏覽器 不支持video標籤
27                 </video>
28             </div>
29         </div>
30     </div>

View Code

5、canvas 元素用於在網頁上繪製圖形

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。

畫布是一個矩形區域，您能夠控制其每一像素。

canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

下面是使用canvas的demo：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <script type="text/javascript" src="js/jquery.min.js"></script>
 6     <script type="text/javascript">
 7         $(function () {
 8             circleProgress(10,50);
 9         });
10         function circleProgress(value, average) {
11             var canvas = document.getElementById("yuan");
12             var context = canvas.getContext('2d');
13             var _this = $(canvas),
14             value = Number(value),// 當前百分比,數值
15             average = Number(average),// 平均百分比
16             color = "",// 進度條、文字樣式
17             maxpercent = 100,//最大百分比，可設置
18             c_width = _this.width(),// canvas，寬度
19             c_height = _this.height();// canvas,高度
20             // 判斷設置當前顯示顏色
21             if (value == maxpercent) {
22                 color = "#29c9ad";
23             } else if (value > average) {
24                 color = "#27b5ff";
25             } else {
26                 color = "#ff6100";
27             }
28             // 清空畫布
29             context.clearRect(0, 0, c_width, c_height);
30             // 畫初始圓
31             context.beginPath();
32             // 將起始點移到canvas中心
33             context.moveTo(c_width / 2, c_height / 2);
34             // 繪製一箇中心點爲（c_width/2, c_height/2），半徑爲c_height/2，起始點0，終止點爲Math.PI * 2的 整圓
35             context.arc(c_width / 2, c_height / 2, c_height / 2, 0, Math.PI * 2, false);
36             context.closePath();
37             context.fillStyle = '#ddd'; //填充顏色
38             context.fill();
39             // 繪製內圓
40             context.beginPath();
41             context.strokeStyle = color;
42             context.lineCap = 'square';
43             context.closePath();
44             context.fill();
45             context.lineWidth = 10.0;//繪製內圓的線寬度
46 
47             function draw(cur) {
48                 // 畫內部空白
49                 context.beginPath();
50                 context.moveTo(15, 15);
51                 context.arc(c_width / 2, c_height / 2, c_height / 2 - 10, 0, Math.PI * 2, true);
52                 context.closePath();
53                 context.fillStyle = 'rgba(255,255,255,1)';  // 填充內部顏色
54                 context.fill();
55                 // 畫內圓
56                 context.beginPath();
57                 // 繪製一箇中心點爲（c_width/2, c_height/2），半徑爲c_height/2-5不與外圓重疊，
58                 // 起始點-(Math.PI/2)，終止點爲((Math.PI*2)*cur)-Math.PI/2的 整圓cur爲每一次繪製的距離
59                 context.arc(c_width / 2, c_height / 2, c_height / 2 - 5, -(Math.PI / 2), ((Math.PI * 2) * cur) - Math.PI / 2, false);
60                 context.stroke();
61                 //在中間寫字
62                 context.font = "bold 18pt Arial";  // 字體大小，樣式
63                 context.fillStyle = color;  // 顏色
64                 context.textAlign = 'center';  // 位置
65                 context.textBaseline = 'middle';
66                 context.moveTo(c_width / 2, c_height / 2);  // 文字填充位置
67                 context.fillText(value + "%", c_width / 2, c_height / 2 - 20);
68                 context.fillText("世紀家園", c_width / 2, c_height / 2 + 20);
69             }
70             // 調用定時器實現動態效果
71             var timer = null, n = 0;
72             function loadCanvas(nowT) {
73                 timer = setInterval(function () {
74                     if (n > nowT) {
75                         clearInterval(timer);
76                     } else {
77                         draw(n);
78                         n += 0.01;
79                     }
80                 }, 15);
81             }
82             loadCanvas(value / 100);
83             timer = null;
84         };
85     </script>
86     <title>百分比DEMO</title>
87 </head>
88 <body>
89     <canvas id="yuan"></canvas>
90 </body>
91 </html>

View Code

6、消息彈出框，在右邊底部顯

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.1
10      @ how to use and example: Please Open demo.html
11      */
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('<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:' + this.layer.width + 'px;height:' + this.layer.height + 'px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">' + title + '</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:' + (this.layer.width - 17) + 'px;height:' + (this.layer.height - 50) + 'px;color:#1f336b;text-align:left;overflow:hidden;">' + text + '</div></div></div>');
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 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title></title>
 6 <script type="text/javascript" src="js/jquery.min.js"></script>
 7 <script type="text/javascript" src="js/Message.js"></script>
 8 <script type="text/javascript"> 
 9 function GetMessage() {
10 $.ajax({
11 type: "POST",
12 url: "Ashx/GetMessage.ashx",
13 data: "",
14 //出錯處理
15 error: function () {
16 alert("網絡出現故障!請重試!");
17 },
18 //發送前事件
19 beforeSend: function () {
20 },
21 //成功後事件
22 success: function (data) {
23 if (data != null && data != "") {
24 $.messager.lays(350, 300);
25 $.messager.show('<font style="color:red;">智慧城市報警提示</font>', '<font style="font-size:12px; text-align:left;color:green;">' + unescape(data) + '</font>');
26 }
27 }
28 });
29 }
30 setInterval("GetMessage();", 5000);//設定秒調用一次
31 </script>
32 </head>
33 <body>
34 </body>
35 </html>

View Code

7、Div的佈局設計

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5 <script type="text/javascript" src="js/jquery.min.js"></script>
 6 <title>主頁-背景隨着屏幕大小改變</title>
 7 <style type="text/css">
 8 body {
 9 background:url('img/index/bk.jpg') no-repeat;
10 background-size:100% 100%;
11 background-position:center center;
12 background-size:cover;
13 background-attachment:fixed;
14 }
15 #div_top {
16 width:100%;
17 height:50px;
18 }
19 #div_center {
20 width:100%;
21 height:90%;
22 margin-top:100px;
23 float:left;
24 }
25 #div_left {
26 width:45%;
27 height:100%;
28 margin-left:4%;
29 float:left;
30 }
31 #div_right {
32 width:45%;
33 height:100%;
34 margin-left:3%;
35 float:left;
36 }
37 </style>
38 </head>
39 <body>
40 <div id="main">
41 <div id="div_top">
42 <img alt="logo" src="img/index/logo.png" />
43 </div>
44 <div id="div_center">
45 <div id="div_left">
46 <div id="div_left_row1">
47 <img alt="zhzk" src="img/index/zhqk.png" />
48 <img alt="szyy" src="img/index/szyy.png" /> 
49 </div>
50 <div id="div_left_row2">
51 <img alt="wyfw" src="img/index/wyfw.png" />
52 <img alt="jfsbzt" src="img/index/jfsbzt.png" />
53 </div>
54 <div id="div_left_row3" >
55 <img alt="xtgl" src="img/index/xtgl.png" />
56 </div> 
57 </div>
58 <div id="div_right">
59 <div id="div_right_row1">
60 <img alt="crk" src="img/index/crk.png" />
61 <img alt="fjdc" src="img/index/fjdc.png" />
62 </div>
63 <div id="div_right_row2">
64 <img alt="rqbj" src="img/index/rqmj.png" />
65 <img alt="tcc" src="img/index/tcc.png" />
66 </div>
67 <div id="div_right_row3">
68 <img alt="dzxg" src="img/index/dzxg.png" />
69 <img alt="lymj" src="img/index/lymj.png" />
70 <img alt="spjk" src="img/index/spjk.png" />
71 </div> 
72 </div>
73 </div>
74 </div>
75 </body>
76 </html>