前端集锦

来源：互联网发布：收快递的软件编辑：程序博客网时间：2024/05/22 05:08

1.快捷键关闭浏览器alt+f4
2.maven安装与eclipse搭建
http://www.cnblogs.com/HD/p/4201847.html
http://www.cnblogs.com/noteless/p/5213075.html
3.html标签使用no-js
http://blog.justwd.net/2012/02/about-no-js/
4.代码规范网站
http://www.planetb.ca/syntax-highlight-word
5. <html lang="en"> <html lang="en-US"> <html lang="en-zn">
第一个lang标签只指定一个语言代码。第二个指定一个语言代码，后跟一个国家代码。
它不能帮助浏览器显示该页面，但它对于搜索引擎，屏幕阅读器以及其他可能读取和尝试解释页面
的东西，除了人类也是有用的
6. Bootstrap框架—CSS全局样式之按钮样式
http://blog.csdn.net/xiaowu_hhb/article/details/53434382
7.Java数据类型和MySql数据类型对应一览
http://www.cnblogs.com/hellocz/p/6393500.html
8.bootstrap datetimepicker控件只显示年、年月、年月日
http://blog.csdn.net/feng1603/article/details/41869523
9.alert升级插件sweetalert2使用方法
http://www.cnblogs.com/hulin520/p/5818746.html
10.HTML5 3D视频碎片效果
http://demo.itivy.com/html5-canvas-video/index.html
html5实现鼠标移动鲸鱼
http://www.xwcms.net/js/html5sl/81828.html
http://www.xwcms.net/webAnnexImages/fileAnnex/20140720/67871/index.html
11.css学习网站
https://developer.mozilla.org/en-US/docs/Web/CSS
12.word-wrap和word-break的区别
http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html
13.向后台传参的三个方式：
（1）ajax

e.g $.ajax({    url://接口地址    type:'GET';//or 'POST'    data:{'wangzhi':'baidu.com'},    cache:false,    success:function(data){    }})

（2）window.location.href=接口地址？要传的值

e.g     window.location.href = baseUrl+'marriage?main_key='+allData;

（3）form表单提交

        var obj = Object.assign(data01, data02, data03, data04);//将四个对象拼接        var dataObj = JSON.stringify(obj);//对象转字符串        /*前两步可省略，只是项目需要处理数据*/        var url = 接口地址;        var form=$("<form>");//定义一个form表单        form.attr("style","display:none");        form.attr("target","");        form.attr("method","post");        form.attr("action",url);        var input1=$("<input>");        input1.attr("type","hidden");        input1.attr("name","obj");        input1.attr("value",dataObj);        $("body").append(form);//将表单放置在web中        form.append(input1);        form.submit();//表单提交         form.remove();

14.解决跨域问题的几种方法
https://segmentfault.com/a/1190000000718840
15.Javascript控制根据不同分辨率动态加载js

**js**    if(window.innerWidth > 1360 && window.innerWidth <= 1920){//浏览器分辨率在1360px-1920px之间        var body = document.getElementsByTagName('body')[0];         var script= document.createElement('script');         script.type= 'text/javascript';         script.src= 'x_obj.js';         body.appendChild(script);    }else if(window.innerWidth <= 1360){//浏览器分辨率<=1360px        var body = document.getElementsByTagName('body')[0];         var script= document.createElement('script');         script.type= 'text/javascript';         script.src= 'x_obj1.js';         body.appendChild(script);    }

16.AJAX GET和POST方式的区别：
大多数情况下使用GET
POST使用范围：
a.更新服务器上的文件或增删改查数据库
b.向服务器发送大量数据（POST没有数据长度限制）
c.发送包含未知字符的用户输入，POST比GET更稳定也更加可靠
17.JavaScript概念之screen/client/offset/scroll/inner/avail的width/left
http://blog.csdn.net/cddcj/article/details/52241592
18.垂直水平居中

**html**<div class="wrapper"> **css**.wrapper{        position: absolute;        top:50%;        left:50%;        border:1px solid red;        border-radius: 6px;        -webkit-transform:translate(-50%,-50%);//chrome和safari        -moz-transform:translate(-50%,-50%);//firefox        transform: translate(-50%,-50%);//其它浏览器      }原理：top:50%;left:50%;使得div为wrapper的左上点居中，translate(-50%,-50%)使得div的中心点居中

9.日期显示方法

**html**<div id="date" style="height:25px;width:100%;background-color:black;display:block"></div>**js:**function getCurDate()          {           var d = new Date();           var week;           switch (d.getDay()){           case 1: week="星期一"; break;           case 2: week="星期二"; break;           case 3: week="星期三"; break;           case 4: week="星期四"; break;           case 5: week="星期五"; break;           case 6: week="星期六"; break;           default: week="星期天";           }           var years = d.getFullYear();           var month = add_zero(d.getMonth()+1);           var days = add_zero(d.getDate());           var hours = add_zero(d.getHours());           var minutes = add_zero(d.getMinutes());           var seconds=add_zero(d.getSeconds());           var ndate = week+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+years+"年"+month+"月"+days+"日 "+hours+":"+minutes+":"+seconds+"&nbsp;&nbsp;&nbsp;";           date.innerHTML= ndate;           date.innerHTML+="<style>#date{color:#fff;font-size:14px;text-align:right;}</style>";          }          function add_zero(temp)          {           if(temp<10) return "0"+temp;           else return temp;          }          setInterval("getCurDate()",1000);

10.bootstrap小三角通过js控制方向360度旋转

**css:**.rotate{    transform-origin:center center; //旋转中心要是正中间 才行    transform: rotate(180deg);    -webkit-transform: rotate(180deg);    -moz-transform: rotate(180deg);    -ms-transform: rotate(180deg);    -o-transform: rotate(180deg);    transition: transform 0.2s; //过度时间 可调    -moz-transition: -moz-transform 0.2s;     -moz-transition: -moz-transform 0.2s;     -o-transition: -o-transform 0.2s;      -ms-transition: -ms-transform 0.2s; }.rotate1{    transform-origin:center center;    transform: rotate(0deg); //返回原点    -webkit-transform: rotate(0deg);    -moz-transform: rotate(deg);    -ms-transform: rotate(0deg);    -o-transform: rotate(0deg);    transition: transform 0.2s;     -moz-transition: -moz-transform 0.2s;     -moz-transition: -moz-transform 0.2s;      -o-transition: -o-transform 0.2s;     -ms-transition: -ms-transform 0.2s; }**html:**<span class="caret" id="caret" style="color: #fff; display: inline-block; cursor: pointer;"></span> **js:**$(function() {    var center = {        init : function() {            this.modal();        },        modal : function() {            $(".caret").click(function() {                if ($(".caret").hasClass("rotate")) { // 点击箭头旋转180度                    $(".caret").removeClass("rotate");                    $(".caret").addClass("rotate1");                } else {                    $(".caret").removeClass("rotate1"); // 再次点击箭头回来                    $(".caret").addClass("rotate");                }            })        }    }    center.init();});

阅读全文

0 0