项目中遇到的问题总结-CSDN博客

本文链接：https://blog.csdn.net/wdzhszyq/article/details/78083187

1.在很多li中，无序点击，在后面需要用到上一个点击过的元素和下一个点击元素，怎么获取。

解决思路：
1.需要上一个点击元素的下标，下一个点击元素的下标；
2.声明一个空数组；用来保存点击过的li的下标；
3.获取数组长度-2的结果就是上一次的点击过的元素的下标；
4.下一次点击元素下标是数组长度-1，或者是this.index索引；
解决过程：

            lis[i].index=i;//索引当前下标
            var arr=[];//用来存储点击的元素下标
            lis[i].onclick=function () {
                arr.push(this.index);
                //console.log(this.index);
                //console.log(arr);
                //console.log(arr[arr.length-2]);//上一次点击的下标
                //console.log(this.index);//当前点击的下标
                if(arr[arr.length-2]==undefined){
                    arr[arr.length-2]==-1;
                }//规避第一次点击数组存储的undefined;
                /*1.判断点击当前的元素让其显示其余元素滑出*/
                if(a==true){
                    /*2.判断当前点击下标和上一次的点击下标是不是同一个*/
                    if(arr[arr.length-2]!=this.index){
                        $(".em-i-box").stop().slideUp(300);
                        $(this).find(".em-i-box").stop().slideDown(300);
                    }else if(arr[arr.length-2]==this.index){
                        $(this).find(".em-i-box").stop().slideUp(300);
                    }
                    a=false;
                }else{
                    $(".em-i-box").stop().slideUp(300);
                    $(this).find(".em-i-box").stop().slideDown(300);
                    a=true;
                }

2.需要用到一个插件日历，具体到年月日时分秒。

解决过程：1.引入一个jedate.min.js的插件js；
2.修改id；
3.注意点：前一个是第一个输入框；后一个是第二个输入框
4.原网站地址：http://www.jemui.com/

<script type="text/javascript" src="../../Public/script/jedate/jedate.min.js"></script>

    //插件日历
    function date(){
        jeDate({
            dateCell: "#date1",
            format: "YYYY年MM月DD日 hh:mm:ss",
            isinitVal: true,
            isTime: true, //isClear:false,
            minDate: "2014-09-19 00:00:00",
            okfun: function(val) {
                //alert(val)
            }
        });
        jeDate({
            dateCell: "#date2",
            format: "YYYY年MM月DD日 hh:mm:ss",
            isinitVal: true,
            isTime: true, //isClear:false,
            minDate: "2014-09-19 00:00:00",
            okfun: function(val) {
                //alert(val)
            }
        });
    }
    date();

3.有一个index.html和一个home.html，通过iframe标签的src把home引入到index中；当我点击index中的刷新按钮，需要刷新页面？如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
<style type="text/css">
    input{
        width: 100px;
        height: 100px;
        display: block;
    }
    iframe{
        border: 1px solid #000;
    }
</style>
</head>

<body>
    <input type="button" value="刷新" />
    <div>3</div>
    <section>
        <iframe src="home.html" frameborder="0"; marginheight="10" scrolling="no"; width="20%" name="ifrmname"></iframe>
    </section>
</body>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $("input").click(function(){
       /*只刷新iframe中的内容，也就是引入页面*/
       $("iframe").attr("src","home.html");
       /*当前页面和引入页面全部刷新*/
       window.location.reload(true);  
       /*直接跳转到home.html页面*/
       window.location.href="home.html";   
    })
</script>
</html>
更多详细链接:
http://www.jb51.net/article/77565.html
http://www.cnblogs.com/chiyueqi/archive/2013/04/10/3011753.html

4.如何屏蔽区域内的鼠标右键？

οncοntextmenu=”window.event.returnValue=false” 屏蔽代码，那个标签需要屏蔽就写在那个标签（区域）；

<!DOCTYPE html>
<html lang="en" oncontextmenu="window.event.returnValue=false" >

<head>
    <title></title>
    <meta charset="UTF-8">
<style type="text/css">

</style>
</head>

<body oncontextmenu="window.event.returnValue=false" >
    <div>
        <ul>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>123</li>
            <li>10</li>
        </ul>
    </div>
</body>
</html>

其他技巧：
1.禁止复制  oncopy = "return false";

2.禁止粘贴  onpaste="return false" ;

3.关闭功能键
function look(){
    if(event.shiftKey)
    alert("禁止按 Shift 键!"); //可以换成 ALT CTRL
}
document.onkeydown=look;

4.
竖滚动条隐藏  <body style="overflow:scroll;overflow-y:hidden">
横滚动条隐藏  <body style="overflow:scroll;overflow-x:hidden">
两个都隐藏  <body scroll="no">

5.在打开的子窗口刷新父窗口的代码里如何写？
window.opener.location.reload();

6.检查一段字符串是否全由数字组成?
function checkNum(str){return str.match(/\D/)==null}
alert(checkNum("123214214aa1"))  //false
alert(checkNum("1232142141"))  //true
/\D/正则 查找非数字字符 第一个是aa，结果为false;第二个没有找到是null，结果是true；

7.获取一个窗口大小：console.log(document.body.clientWidth+","+document.body.clientHeight);

8.用正则判断是否是数字？
    var str="1-23";
    var patt=/\D/g;
    if(patt.test(str)==false){
        alert("全是数字")
    }else{
        alert("有汉字或者字符")
    }

9.自动刷新并指向新页面。
＜meta http-equiv="Refresh" content="2";URL=http://www.chinayancheng.net"＞
数字2是停留2s;

10.控制网页显示的窗口
＜metahttp-equiv="window-target" content="_top"＞//防止网页被别人作为一个Frame调用;
更多mete标签用法点击：http://blog.csdn.net/piaopiaopiaopiaopiao/article/details/20728449

11.从中间弹出一个页面弹框
<script  type="text/javascript">
    window.open("http://www.cctv.com","","width=400,height=240,top="+(screen.availHeight-
240)/2+",left="+(screen.availWidth-400)/2); 
</script>

5.如何写css hack？

1.针对火狐的样式
@-moz-document url-prefix(){
        body{
                background-color:pink;
        }
}
1.针对谷歌的样式
@media screen and (-webkit-min-device-pixel-ratio:0)  {
         body{
                background-color:pink;
        }
}

6.谷歌中1920*1080屏单位换算1rem等于？%？

1rem=16px;
1%=1920/100=19.2px;
1px=1/19.2=0.05%;
1rem=0.8%;

7.jq中stop（）方法注意要点？

1.stop(),停止动画，停止第一个；
2.stop(true)，停止整个队列；
3.stop（true，true）停止动画并完成动作

8.text()，html()，val()区别？

1.text只获取文本字符；
2.html获取所有包括标签；
3.val获取表单的值；

9.append()末尾添加，prepend()头部添加？

10.remove() 过滤元素并移除，empty（）移除所有子元素

从p标签中找到.italic类名的删除；

$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});

11.addClass() 可以添加多个类名

$(“body div:first”).addClass(“important blue”);

12.js判断用户的浏览器设备是移动端还是pc端？

function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        //console.log("您的浏览设备为："); if phone true,if pc false;
        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            console.log("phone");
            return true;
        } else {
            console.log("pc");
            return false;
        }
    }

    alert(browserRedirect());