前端集锦

最新推荐文章于 2024-07-22 15:19:55 发布

ABC好难

最新推荐文章于 2024-07-22 15:19:55 发布

阅读量290

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_31540915/article/details/74857396

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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();
});

ABC好难

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端集锦

\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.代码规范网站
复制链接

扫一扫