拼团商品列表页 分析 js代码行位置对执行的影响和window.onload的原理 setTimeout传参
w
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>内部 ...
随机推荐
- python内置函数之dict()
class dict(**kwargs) 返回一个字典.本方法用来创建一个字典对象.只能传入一个参数. >>> dict(a=1) {'a': 1} 也可以传入映射函数作为参数 &g ...
- 危险系数 set容器
题目描述 抗日战争时期,冀中平原的地道战曾发挥重要作用. 地道的多个站点间有通道连接,形成了庞大的网络.但也有隐患,当敌人发现了某个站点后,其它站点间可能因此会失去联系. 我们来定义一个危险系数DF( ...
- ISTQB测试人员认证 初级（基础级）大纲
ISTQB测试人员认证 初级(基础级)大纲 ---中文修订版本1(2015年5月6日) 2015-06-22 大纲pdf下载 ISTQB资料中心 在课程大纲中,每个章节都会提供相应的认知水平要求: ...
- 【转】在MAC下配置MySQL 5.7 数据库的编码问题
1.MySQL 5.7 for MAC 默认没有my.cnf文件 ,首先 新建my.cnf文件: 2.在my.cnf文件追加 1 2 3 4 5 6 7 8 [mysqld] character-se ...
- oozie中时间EL表达式
EL表达式: 常量表示形式 含义说明 ${coord:minutes(int n)} 返回日期时间:从一开始,周期执行n分钟 ${coord:hours(int n)} 返回日期时间:从一开始,周期执 ...
- Android基础总结（七）BroadcastReceiver
广播(掌握) 广播的概念 现实:电台通过发送广播发布消息,买个收音机,就能收听 Android:系统在产生某个事件时发送广播,应用程序使用广播接收者接收这个广播,就知道系统产生了什么事件. Andro ...
- C语言中对输入输出格式的控制
格式化输出的控制 #include<stdio.h> int main(void){ float a=111123.681111f; printf("%1.3f",a) ...
- 【转】【C#】迭代器IEnumerable和IEnumerator
迭代器模式是设计模式中行为模式(behavioral pattern)的一个例子,他是一种简化对象间通讯的模式,也是一种非常容易理解和使用的模式.简单来说,迭代器模式使得你能够获取到序列中的所有元素而 ...
- 第二百五十七节，Tornado框架-路由映射，逻辑处理，文件归类配置
Tornado框架-路由映射,逻辑处理,文件归类配置 Tornado框架 Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起 ...
- 图像处理之二维码生成-qr
Javascript生成二维码(QR) 网络上已经有非常多的二维码编码和解码工具和代码,很多都是服务器端的,也就是说需要一台服务器才能提供二维码的生成.本着对服务器性能的考虑,这种小事情都让服务器 ...