拼团商品列表页 分析 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>内部 ...
随机推荐
- Spring学习12-Spring利用mock进行单元测试
一.概述 对于Java组件开发者来说,他们都盼望拥有一组能够对组件开发提供全面测试功能的好用的单元测试.一直以来,与测试独立的Java对象相比,测试传统型J2EE Web组件是一项更为困难的任务 ...
- 从零开始，跟我一起做jblog项目（一）引言
从零开始,跟我一起做jblog项目(一)引言 想做一个java版的blog,源自一个很久之前的想法 当时刚学习JAVA的web编程 想买自己的域名,自己的VPS,安装自己的WEB服务 用google ...
- Makefile 11——支持头文件目录指定
现在,是时候在对应目录放入对应文件了: /× foo.h */ #ifndef __FOO_H #define __FOO_H void foo(void) #endif/*__FOO_H*/ /* ...
- CentOS6.5+nginx+mysql+php(laravel)服务器环境搭建
公司准备迭代会员中心项目,要上laravel框架,替代以前的Ecshop框架,PHP工程师将部分功能页面代码提交,自己也准备着手搭建一个测试环境将项目跑起来: 一. 环境依赖安装设置 关闭防火墙 [r ...
- python操作word（改课文格式）【最终版】
python操作word的一些方法,前面写了一些感悟,有点跑题,改了下题目,方便能搜索到.心急的可以直接拉到最后看代码,我都加了比较详细的注释. 从8.3号早上9点,到8.8号下午5点半下班,终于把这 ...
- 如何测试是否安装了web服务器
windows默认没有安装web服务器,我们可以安装IIS. 我们安装个tomacte服务器,开发web程序必须的!!如果测试后出现这个页面说明安装成功le ! 我们这个安装的是本地服务器,可以把we ...
- 网页抓取信息（php正則表達式、php操作excel）
1.问题描写叙述 实现对固定网页上自己须要的信息抓取,以表格形式存储. 我是拿wustoj上的一个排行榜来练习的,地址:wustoj 2.思路 网页自己就简单学习了一下php,刚好用它来做点事情吧,我 ...
- ThinkPHP 汉字转成多种形式拼音
模型: <?php namespace Admin\Model; use Think\Model; /** * 汉字转拼音 * @author huangguojin */ class ZHMo ...
- mac环境搭建selenium
前言 搭建python+selenium,mac自带python2.7,需要公司使用的python是3.x,可以自己百度安装python环境. 1. selenium安装 1. selenium的安装 ...
- git error Another git process seems to be running in this repository
How to fix error Another git process seems to be running in this repository When you use Git, you se ...