标签： 前端

开始在固定位置 达到一定高度后随屏幕滚动

leokim / / HTML, Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<style type="text/css">
 
.div1 {
    height:2000px;
}
 
 
.div2 {
    width:200px;
    height:200px;
    background-color:#3399FF;
    margin-top:100px;
}
.div2_1{
    position:fixed;
    width:200px;
    height:200px;
    z-index:999;
    background-color:#3399FF;
    top:0px;
    _position:absolute;
    _bottom:auto;
    _top:[removed]eval(document.documentElement.scrollTop));
}
</style>
 
<script type="text/javascript">
window.onscroll=function(){ 
    var t=document.documentElement.scrollTop||document.body.scrollTop;  
    var div2=document.getElementById("div2"); 
    if(t>= 100){ 
        div2.className = "div2_1";
    }else{
        div2.className = "div2";
    } 
}
</script>
 
 
<div class="div1">
    <div id="div2" class="div2"></div>
</div>

JS 中如何判断 undefined 和 null

leokim / / 前端

JS 中如何判断 undefined

以下是不正确的用法：

exp 为 null 时，也会得到与 undefined 相同的结果，虽然 null 和 undefined 不一样。注意：要同时判断 undefined 和 null 时可使用本法。

var exp = undefined;
if (typeof(exp) == undefined)
{
    alert("undefined");
}

 

 

——————————————————————————–

JS 中如何判断 null

 

exp 为 undefined 时，也会得到与 null 相同的结果，虽然 null 和 undefined 不一样。注意：要同时判断 null 和 undefined 时可使用本法。

var exp = null;
if (!exp)
{
    alert("is null");
}

 

为了向下兼容，exp 为 null 时，typeof 总返回 object。

JavaScript 中没有 isNull 这个函数。

 

 

<p  10px auto; color: rgb(0, 0, 0); font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; font-size: 12px; line-height: 18px; widows: 1;">尽管如此，我们在 DOM 应用中，一般只需要用 (!exp) 来判断就可以了，因为 DOM 应用中，可能返回 null，可能返回 undefined，如果具体判断 null 还是 undefined 会使程序过于复杂。

form submit 验证

leokim / / Javascript
1
2
3
4
5
6
7
8
9
10
<script>
function submitFun(){
    //逻辑判断
    return true; //允许表单提交
    //逻辑判断
    return false;//不允许表单提交
}
</script>
<form onsubmit="reture submitFun();"> //注意此处不能写成 onsubmit="submitFun();"否则将表单总是提交
</form>

图片ajax上传

leokim / / Javascript

用的是CI框架

后端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<?php
 
class Upload extends MY_Controller {
 
    function __construct() {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
    }
 
    function index() {
        $data = array();
        $data['upload_url'] = site_url('upload/ajax_upload');
        $this->load->view('upload', $data);
    }
 
    function do_upload() {
        $config['upload_path'] = './uploads/';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '1024';
        $config['max_width'] = '1024';
        $config['max_height'] = '768';
        $this->load->library('upload', $config);
 
        if (!$this->upload->do_upload('AidImg')) {
            echo("<script>parent.callback('" . $this->upload->display_errors() . "',false)</script>");
            exit;
        } else {
            $data = array('upload_data' => $this->upload->data());
            $img_path = base_url() . 'uploads/';
            echo "<script>parent.callback('" . $data['upload_data']['file_name'] . "',true,'" . $img_path . "')</script>";
            exit;
        }
    }
 
}
 
?>

前端代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
    <head>
        <title>Upload Form</title>
        <script type="text/javascript" src="<?php echo base_url() ?>access/js/jquery-1.8.0.min.js"></script>
    </head>
    <body>
        <form id="formImg" action="do_upload" method="post" target="hidden_frame" enctype="multipart/form-data">
            <div>
                <input type="hidden" name="sh_id" id="sh_id" value="{$id}">
                <!--这里的{$id}大家可以随便填1个进去-->
                <input id="AidImg" type="file" name="AidImg" onchange="uploadImg()"/>
                <div style="display:none;" id="imgError">图片不可为空</div>
                <iframe style="display:none" name='hidden_frame' id="hidden_frame"></iframe>
                <div><img id="p_img" src="" width="80" height="80"/> </div>
 
                <span class="help_inline">尺寸：80*80</span>
 
            </div>
        </form>
    </body>
</html>
 
<script>
    function uploadImg()
    {
        var names = $("#AidImg").val().split(".");
        if (names[1] != "gif" && names[1] != "GIF" && names[1] != "jpg" && names[1] != "JPG" && names[1] != "png" && names[1] != "PNG")
        {
            $("#imgError").html("<span>" + "图片必须为gif,jpg,png格式" + "</span>");
            $("#formImg .help-inline").hide();
            $("#imgError").show();
            return;
        }
        $("#formImg").submit();
        $("#imgError").show();
        $("#imgError").html("图片上传中ing");
    }
 
    function callback(message, success, path)
    {
        if (success == false)
        {
            $("#imgError").html("<span>" + message + "</span>");
            $("#imgError").show();
        }
        else {
            $("#imgError").hide();
            $(".fromtrs").show();
            $("#formImg .help-inline").hide();
            var paths = path;
            $("#p_img").attr("src", path + message);
            $("#p_img").attr("imgname", message); //这里由于数据库里只存入图片名称加后缀名，故和路径拆开了
        }
    }
</script>