拼团商品列表页分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参

TypeError : Cannot set property 'innerHTML' of null
TypeError : Cannot set property 'value' of null
通过id或其他部分属性查找元素改变页面值时，如在点击中event.target.getAttribute('id')，event.target.getAttribute('wattr')，出现此类错误原因：
0-dom中无此id或相应的wattr
1-dom中有此id或相应的wattr

但都是在js代码执行是无法定位到

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>逛逛</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" href="/favicon.ico">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/wsta/f7/sm.min.css">

    <link rel="stylesheet" href="/wsta/f7/sm-extend.min.css">

</head>

<script>

    function $$(id) {

        return typeof id === 'string' ? document.getElementById(id) : id;

    }

    function checkTime(i) {

        if (i < 10) {

            i = "0" + i;

        }

        return i;

    }

    function showTime(id) {

        var curtime = new Date(); //当前时间

        var endtime = new Date("2017/02/16,00:00:00"); //目标时间

        var leftTime = (endtime.getTime() - curtime.getTime()) / 1000; //毫秒(ms)

        var leftDay = parseInt(leftTime / (24 * 60 * 60)); //剩余天数

        var leftHour = parseInt(leftTime / (60 * 60) % 24); //剩余小时

        var leftMin = parseInt(leftTime / 60 % 60); //剩余分钟

        var leftSec = parseInt(leftTime % 60); //剩余秒

        $$(id + 'day').innerHTML = checkTime(leftDay);

        $$(id + 'hour').innerHTML = checkTime(leftHour);

        $$(id + 'min').innerHTML = checkTime(leftMin);

        $$(id + 'sec').innerHTML = checkTime(leftSec);

        if (leftTime <= 0) {

            $$(id + 'day').innerHTML = 0;

            $$(id + 'hour').innerHTML = 0;

            $$(id + 'min').innerHTML = 0;

            $$(id + 'sec').innerHTML = 0;

        }

        setTimeout(showTime, 1000, id);

    }

    //  showTime();

</script>

<body>

<div class="page-group">

    <!-- 你的html代码 -->

    <div class="page">

        <div class="bar bar-header-secondary">

            <div class="icon icon-menu open-panel" data-panel='#panel-left-demo-menu'

                 style="width: 6%;float: left;"></div>

            <div class="searchbar" style="width: 94%;float: right;">

                <a class="searchbar-cancel">取消</a>

                <div class="search-input">

                    <label class="icon icon-search" for="search"></label>

                    <input type="search" id='search' placeholder='动态推荐面膜'/>

                </div>

            </div>

        </div>

        <nav class="bar bar-tab">

            <a class="tab-item external active" href="#">

                <span class="icon icon-home"></span>

                <span class="tab-label">首页</span>

            </a>

            <p class="tab-item external" onclick="wcartPage()">

                <span class="icon icon-cart shopping-cart"></span>

                <span class="tab-label shopping-cart_count">购物车</span>

            </p>

            <a class="tab-item external" href="#">

                <span class="icon icon-me"></span>

                <span class="tab-label">我</span>

            </a>

        </nav>

        <div class="content">

            <div class="page-index">

                <?php

                $img_url = 'http://' . $_SERVER['HTTP_HOST'] . '/wsta/witem/';

                foreach ($welcome_item AS $one) {

                    $img_arr = explode(',', $one->img_string);

                    ?>

                    <div class="card">

                        <div id="<?= 'id' . ($one->id) ?>" onclick="wdetailPage(<?= $one->id ?>)">

                            <div style="background-image:url(<?= $img_url . $img_arr[1]; ?>)" valign="bottom"

                                 class="card-header color-white no-border"><?= $one->name; ?>

                            </div>

                            <div class="card demo-card-header-pic">

                                <div valign="bottom" class="card-header color-white no-border no-padding img_item ">

                                    <img class='card-cover' src="<?= $img_url . $img_arr[0]; ?>" alt=""

                                         id="<?= ($one->id) . 'img' ?>">

                                    <img style="display: none" src="<?= $img_url . $img_arr[0]; ?>"

                                         id="<?= ($one->id) . 'img' ?>">

                                </div>

                                <div class="card-content">

                                    <div class="card-content-inner">

                                        <p><?= $one->desc; ?></p>

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="card-footer">

                            <table>

                                <tr>

                                    <td style="color: red;width: 30%;">￥<?= $one->price_out; ?></td>

                                    <td><a href="#" class="link" style="color: green;font-size: 60%;">

                                            <?php

                                            if (intval(rand(1, 5)) < 4) { ?>

                                                <script>

                                                    window.onload = showTime(<?=$one->id?>)

                                                </script>

                                                8折团 <span id="<?= $one->id ?>day"></span><sub>天</sub><span

                                                    id="<?= $one->id ?>hour"></span><sub>时</sub><span

                                                    id="<?= $one->id ?>min"></span>

                                                <sub>分</sub><span

                                                    id="<?= $one->id ?>sec"></span><sub>秒</sub>

                                            <?php } else { ?>

                                                我开团

                                            <?php } ?>

                                        </a></td>

                                    <td style="color: red;width: 30%;"><img class="icon_add-to-cart"

                                                                            src="<?= 'http://' . $_SERVER['HTTP_HOST'] ?>/wsta/fly-to-cart-effect-master/w/add-to-cart-black.svg"

                                                                            width="24%" style="float: right"

                                                                            id="<?= ($one->id) . 'icon' ?>"></td>

                                </tr>

                            </table>

                        </div>

                    </div>

                <?php

                }

                ?>

            </div>

        </div>

    </div>

</div>

<div class="panel-overlay"></div>

<div class="panel panel-left panel-cover  theme-white" id='panel-left-demo-menu'>

    <div class="content-block">

        <p style="">全部商品分类</p>

        <p>汽车用品</p>

        <p>箱包、奢侈品</p>

        <p>男装、女装、童装、内衣</p>

        <p>运动、户外</p>

        <p>个人化妆品、清洁用品、宠物</p>

    </div>

    <div class="list-block">

    </div>

</div>

</body>

</html>

<script type='text/javascript' src='/wsta/f7/zepto.min.js' charset='utf-8'></script>

<script type='text/javascript' src='/wsta/f7/sm.js' charset='utf-8'></script>

<script type='text/javascript' src='/wsta/f7/sm-extend.js' charset='utf-8'></script>

<script>

    $.init();

    function wdetailPage(id) {

        var url = "wone?id=" + id

        window.location = url

    }

    function wcartPage() {

        // var url = "wcart?id=" + 1

        var url = "wcart?cid=wtoy"

        window.location = url

    }

</script>

<script type="text/javascript" src="/wsta/jquery-easyui-1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="/wsta/jquery-ui-1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    <!--

    /*

     Add to cart fly effect with jQuery. - May 05, 2013

     (c) 2013 @ElmahdiMahmoud - fikra-masri.by

     license: http://www.opensource.org/licenses/mit-license.php

     */

    var wcart_count_value = 0

    $('.icon_add-to-cart').on('click', function () {

        wcart_count_value++

        var idicon = event.target.getAttribute('id')

        var cart = $('.shopping-cart');

        var id = idicon.substr(0, idicon.length - 4)

        //

        $.post("wcart_db_insert_one", {id: id, user: 'wtoy'});

        //

        var idimg = id + 'img'

        var imgtodrag = $('#' + idimg).eq(0)

        if (imgtodrag) {

            var imgclone = imgtodrag.clone()

                .offset({

                    top: imgtodrag.offset().top,

                    left: imgtodrag.offset().left

                })

                .css({

                    // 'opacity': '0.5',

                    'opacity': '1',

                    'position': 'absolute',

                    'height': '150px',

                    'width': '150px',

                    'z-index': '100000'

                })

                .appendTo($('body'))

                .animate({

                    'top': cart.offset().top + 10,

                    'left': cart.offset().left + 10,

                    'width': 75,

                    'height': 75

                }, 1000, 'easeInOutExpo');

            setTimeout(function () {

                cart.effect("shake", {

                    times: 3

                }, 200);

            }, 1500);

            imgclone.animate({

                'width': 16,

                'height': 10

            }, function () {

                //   $(this).detach()

            });

            var cart_count = $('.shopping-cart_count');

            //cart_count.text()

            cart_count.text(wcart_count_value)

            cart.attr('style', 'color:red')

            cart_count.attr('style', 'color:red')

            $('#' + idicon).attr('src', '<?= 'http://' . $_SERVER['HTTP_HOST'] ?>/wsta/fly-to-cart-effect-master/w/add-to-cart-red.svg')

        }

    });

    //-->

</script>

<?php

defined('BASEPATH') OR exit('No direct script access allowed');

?>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>逛逛</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <link rel="shortcut icon" href="/favicon.ico">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/wsta/f7/sm.min.css">

    <link rel="stylesheet" href="/wsta/f7/sm-extend.min.css">

</head>

<script>

    function $$(id) {

        return typeof id === 'string' ? document.getElementById(id) : id;

    }

    function checkTime(i) {

        if (i < 10) {

            i = "0" + i;

        }

        return i;

    }

    function showTime(id) {

        var curtime = new Date(); //当前时间

        var endtime = new Date("2017/02/16,00:00:00"); //目标时间

        var leftTime = (endtime.getTime() - curtime.getTime()) / 1000; //毫秒(ms)

        var leftDay = parseInt(leftTime / (24 * 60 * 60)); //剩余天数

        var leftHour = parseInt(leftTime / (60 * 60) % 24); //剩余小时

        var leftMin = parseInt(leftTime / 60 % 60); //剩余分钟

        var leftSec = parseInt(leftTime % 60); //剩余秒

        $$(id + 'day').innerHTML = checkTime(leftDay);

        $$(id + 'hour').innerHTML = checkTime(leftHour);

        $$(id + 'min').innerHTML = checkTime(leftMin);

        $$(id + 'sec').innerHTML = checkTime(leftSec);

        if (leftTime <= 0) {

            $$(id + 'day').innerHTML = 0;

            $$(id + 'hour').innerHTML = 0;

            $$(id + 'min').innerHTML = 0;

            $$(id + 'sec').innerHTML = 0;

        }

        setTimeout(showTime, 1000, id);

    }

    //  showTime();

</script>

<body>

<div class="page-group">

    <!-- 你的html代码 -->

    <div class="page">

        <div class="bar bar-header-secondary">

            <div class="icon icon-menu open-panel" data-panel='#panel-left-demo-menu'

                 style="width: 6%;float: left;"></div>

            <div class="searchbar" style="width: 94%;float: right;">

                <a class="searchbar-cancel">取消</a>

                <div class="search-input">

                    <label class="icon icon-search" for="search"></label>

                    <input type="search" id='search' placeholder='动态推荐面膜'/>

                </div>

            </div>

        </div>

        <nav class="bar bar-tab">

            <a class="tab-item external active" href="#">

                <span class="icon icon-home"></span>

                <span class="tab-label">首页</span>

            </a>

            <p class="tab-item external" onclick="wcartPage()">

                <span class="icon icon-cart shopping-cart"></span>

                <span class="tab-label shopping-cart_count">购物车</span>

            </p>

            <a class="tab-item external" href="#">

                <span class="icon icon-me"></span>

                <span class="tab-label">我</span>

            </a>

        </nav>

        <div class="content">

            <div class="page-index">

                <?php

                $img_url = 'http://' . $_SERVER['HTTP_HOST'] . '/wsta/witem/';

                foreach ($welcome_item AS $one) {

                    $img_arr = explode(',', $one->img_string);

                    ?>

                    <div class="card">

                        <div id="<?= 'id' . ($one->id) ?>" onclick="wdetailPage(<?= $one->id ?>)">

                            <div style="background-image:url(<?= $img_url . $img_arr[1]; ?>)" valign="bottom"

                                 class="card-header color-white no-border"><?= $one->name; ?>

                            </div>

                            <div class="card demo-card-header-pic">

                                <div valign="bottom" class="card-header color-white no-border no-padding img_item ">

                                    <img class='card-cover' src="<?= $img_url . $img_arr[0]; ?>" alt=""

                                         id="<?= ($one->id) . 'img' ?>">

                                    <img style="display: none" src="<?= $img_url . $img_arr[0]; ?>"

                                         id="<?= ($one->id) . 'img' ?>">

                                </div>

                                <div class="card-content">

                                    <div class="card-content-inner">

                                        <p><?= $one->desc; ?></p>

                                    </div>

                                </div>

                            </div>

                        </div>

                        <div class="card-footer">

                            <table>

                                <tr>

                                    <td style="color: red;width: 30%;">￥<?= $one->price_out; ?></td>

                                    <td><a href="#" class="link" style="color: green;font-size: 60%;">

                                            <?php

                                            if (intval(rand(1, 5)) < 4) { ?>

                                                8折团 <span id="<?= $one->id ?>day"></span><sub>天</sub><span

                                                    id="<?= $one->id ?>hour"></span><sub>时</sub><span

                                                    id="<?= $one->id ?>min"></span>

                                                <sub>分</sub><span

                                                    id="<?= $one->id ?>sec"></span><sub>秒</sub>

                                                <script>

                                                    window.onload = showTime(<?=$one->id?>)

                                                </script>

                                            <?php } else { ?>

                                                我开团

                                            <?php } ?>

                                        </a></td>

                                    <td style="color: red;width: 30%;"><img class="icon_add-to-cart"

                                                                            src="<?= 'http://' . $_SERVER['HTTP_HOST'] ?>/wsta/fly-to-cart-effect-master/w/add-to-cart-black.svg"

                                                                            width="24%" style="float: right"

                                                                            id="<?= ($one->id) . 'icon' ?>"></td>

                                </tr>

                            </table>

                        </div>

                    </div>

                <?php

                }

                ?>

            </div>

        </div>

    </div>

</div>

<div class="panel-overlay"></div>

<div class="panel panel-left panel-cover  theme-white" id='panel-left-demo-menu'>

    <div class="content-block">

        <p style="">全部商品分类</p>

        <p>汽车用品</p>

        <p>箱包、奢侈品</p>

        <p>男装、女装、童装、内衣</p>

        <p>运动、户外</p>

        <p>个人化妆品、清洁用品、宠物</p>

    </div>

    <div class="list-block">

    </div>

</div>

</body>

</html>

<script type='text/javascript' src='/wsta/f7/zepto.min.js' charset='utf-8'></script>

<script type='text/javascript' src='/wsta/f7/sm.js' charset='utf-8'></script>

<script type='text/javascript' src='/wsta/f7/sm-extend.js' charset='utf-8'></script>

<script>

    $.init();

    function wdetailPage(id) {

        var url = "wone?id=" + id

        window.location = url

    }

    function wcartPage() {

        // var url = "wcart?id=" + 1

        var url = "wcart?cid=wtoy"

        window.location = url

    }

</script>

<script type="text/javascript" src="/wsta/jquery-easyui-1.5.1/jquery.min.js"></script>

<script type="text/javascript" src="/wsta/jquery-ui-1.12.1/jquery-ui.js"></script>

<script type="text/javascript">

    <!--

    /*

     Add to cart fly effect with jQuery. - May 05, 2013

     (c) 2013 @ElmahdiMahmoud - fikra-masri.by

     license: http://www.opensource.org/licenses/mit-license.php

     */

    var wcart_count_value = 0

    $('.icon_add-to-cart').on('click', function () {

        wcart_count_value++

        var idicon = event.target.getAttribute('id')

        var cart = $('.shopping-cart');

        var id = idicon.substr(0, idicon.length - 4)

        //

        $.post("wcart_db_insert_one", {id: id, user: 'wtoy'});

        //

        var idimg = id + 'img'

        var imgtodrag = $('#' + idimg).eq(0)

        if (imgtodrag) {

            var imgclone = imgtodrag.clone()

                .offset({

                    top: imgtodrag.offset().top,

                    left: imgtodrag.offset().left

                })

                .css({

                    // 'opacity': '0.5',

                    'opacity': '1',

                    'position': 'absolute',

                    'height': '150px',

                    'width': '150px',

                    'z-index': '100000'

                })

                .appendTo($('body'))

                .animate({

                    'top': cart.offset().top + 10,

                    'left': cart.offset().left + 10,

                    'width': 75,

                    'height': 75

                }, 1000, 'easeInOutExpo');

            setTimeout(function () {

                cart.effect("shake", {

                    times: 3

                }, 200);

            }, 1500);

            imgclone.animate({

                'width': 16,

                'height': 10

            }, function () {

                //   $(this).detach()

            });

            var cart_count = $('.shopping-cart_count');

            //cart_count.text()

            cart_count.text(wcart_count_value)

            cart.attr('style', 'color:red')

            cart_count.attr('style', 'color:red')

            $('#' + idicon).attr('src', '<?= 'http://' . $_SERVER['HTTP_HOST'] ?>/wsta/fly-to-cart-effect-master/w/add-to-cart-red.svg')

        }

    });

    //-->

</script>

拼团商品列表页分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参的更多相关文章

5- vue django restful framework 打造生鲜超市 -完成商品列表页(上)
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
6- vue django restful framework 打造生鲜超市 -完成商品列表页(下)
Vue+Django REST framework实战搭建一个前后端分离的生鲜超市网站 Django rtf 完成商品列表页下 drf中的request和response drf对于django的 ...
（生鲜项目）06. django的view实现商品列表页
使用原始的django的View来返回json格式的商品列表目的是回顾一些django的基础知识, 好与后面的RESTful做对比 goods.views_base.py from django.v ...
react 从商品详情页返回到商品列表页，列表自动滚动上次浏览的位置
现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...
thinkphp在前端页面的js代码中可以使用 U方法吗? 可以使用模板变量如__URL__等吗?
thinkphp在前端页面的js代码中可以使用 U方法吗? : 可以的! tp的U方法, 是"全局的", 什么是全局的? 就是, 可以在 "任何地方"使用的: ...
（生鲜项目）07. api view实现商品列表页
第一步: 环境配置 1. DRF官网: https://www.django-rest-framework.org/ 仔细查看自己当前的python版本以及django版本是否支持DRF, 然后就看看 ...
（生鲜项目）08. ModelSerializer 实现商品列表页, 使用Mixin来实现返回, 以及更加方便的ListAPIView, 以及分页的设置
第一步: 学会使用ModelSerializer, 并且会使用ModelSerializer相互嵌套功能 1. goods.serializers.py from rest_framework imp ...
JS代码的位置与事件响应代码块的封装问题
JS代码的位置我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分最常用的方式是在页面中h ...
JS代码放置位置、变量与数据类型、运算符与逻辑表达运算符
内容简要: 1.JS代码放置位置的问题: 2.变量与数据类型: 3.运算符与逻辑表达式的运算符我的位置全局问题:为何在网页推荐位置(一般在<head></head>内部 ...

随机推荐

使用vs2015编译器编译libpqxx时发生的错误以及解决办法
d:\libpqxx-4.0\libpqxx-4.0\src\strconv.cxx(195): error C2440: “=”: 无法从“std::basic_istream<char,st ...
malloc，我误解你了
malloc用于动态申请内存,这个学过C语言的都知道.忘记了在哪本书上看到,malloc申请的内存不一定是连续,于是一直记住了.这句话有错吗?没有!但是当时只是记住了这个知识点,而没有深入的思考.直到 ...
Unicode Table
Unicode Table http://www.tamasoft.co.jp/en/general-info/unicode.html 00 01 02 03 04 05 06 07 08 09 ...
一题关于PHP的CTF
if(isset($_GET['time'])){ if(!is_numeric($_GET['time'])){ echo 'The time must be number.'; }else if( ...
phpstrom直接运行和调试php
最近想学服务器开发,但是没找到免费的虚拟主机,好在有一大把的php主机, 于是决定学php了,但并不准备学网页制作,只是把php作为服务器逻辑处理语言. 下载xampp,打开phpstrom的设置界面 ...
Unix系统编程（）信号类型和默认行为
信号类型和默认行为就是讲了有多少个信号类型好多啊,后面用到了再看...
php url配置项
第二百五十一节，Bootstrap项目实战--响应式轮播图
Bootstrap项目实战--响应式轮播图学习要点: 1.响应式轮播图本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图响应式轮播图第一步,设置轮播器区域car ...
关于Web应用程序，下列说法错误的是（）。
关于Web应用程序,下列说法错误的是( ). A．WEB-INF目录存在于web应用的根目录下 B. WEB-INF目录与classes 目录平行 C. web.xml在WEB-INF目录下 D. W ...
【BZOJ】1068: [SCOI2007]压缩（dp）
http://www.lydsy.com/JudgeOnline/problem.php?id=1068 发现如果只设一维的话无法转移那么我们开第二维,发现对于前i个来说,如果确定了M在哪里,第i个 ...

拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参

拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参的更多相关文章

随机推荐

热门专题

拼团商品列表页分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参

拼团商品列表页分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参的更多相关文章