引言
作为一名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%;" 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>
四、视频控件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>
五、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>
六、消息弹出框，在右边底部显
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)
下面是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>
七、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>
运行效果：这里的背景设置的全屏的，还有div使用百分比，无论屏幕大小多少，分辨率多少，怎么缩放，布局不会改变，位置不会被移动，永远全屏显示。
