JavaScript操作BOM（document对象、window对象、history对象、location对象、定时函数 、JavaScript内置对象[Math .Date]、定时函数）...

最新推荐文章于 2023-05-29 14:25:22 发布
最新推荐文章于 2023-05-29 14:25:22 发布
阅读量141 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/BingBing-Deng/p/9204162.html
版权

上机练习3

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>完善当当购物车页面</title>

<link type="text/css"rel="stylesheet"href="css/cartStyle.css"/>

<script>

 

var danjia=[21.90,24.00];//商品的单价

var shuliang=[1,1];//商品的数量

var xiaoji=[danjia[0]*shuliang[0],danjia[1]*shuliang[1]];//商品的小计

 

function add(index){

//拿到页面中存放商品数量的input标签

var obj=document.getElementsByName("amount")[index];

shuliang[index]++;//商品数量自增

obj.value=shuliang[index];//更新商品数量

 

//拼接小计li标签id

var el_Id='price'+index;

//拿到页面中存放商品小计的li标签

var obj1=document.getElementById(el_Id);

 

//更新小计

xiaoji[index]=danjia[index]*shuliang[index];

obj1.innerHTML='￥'+xiaoji[index];

 

//更新总计

document.getElementById("totalPrice").innerHTML="￥"+(xiaoji[0]+xiaoji[1]);

}

 

function jian(index){

//拿到页面中存放商品数量的input标签

var obj=document.getElementsByName("amount")[index];

shuliang[index]--;//商品数量自减

if(shuliang[index]<=0){

shuliang[index]=1;

}

obj.value=shuliang[index];//更新商品数量

 

//拼接小计li标签id

var el_Id='price'+index;

//拿到页面中存放商品小计的li标签

var obj1=document.getElementById(el_Id);

 

//更新小计

xiaoji[index]=danjia[index]*shuliang[index];

obj1.innerHTML='￥'+xiaoji[index];

 

//更新总计

document.getElementById("totalPrice").innerHTML="￥"+(xiaoji[0]+xiaoji[1]);

}

 

</script>

</head>

<body>

 

<div class="content">

<div class="logo">

<img src="images/dd_logo.jpg"><span>关闭</span>

</div>

<div class="cartList">

<ul>

<li>¥<input type="text"name="price"value="21.90"></li>

<li><input type="button"name="minus"value="-"οnclick="jian(0)"><input type="text"name="amount"value="1"><input type="button"name="plus"value="+"οnclick="add(0)"></li>

<li id="price0">¥21.90</li>

<li><p>移入收藏</p><p>删除</p></li>

</ul>

<ul>

<li>¥<input type="text"name="price"value="24.00"></li>

<li><input type="button"name="minus" value="-" οnclick="jian(1)"><input type="text"name="amount"value="1"><input type="button"name="plus" value="+" οnclick="add(1)"></li>

<li id="price1">¥24.00</li>

<li><p>移入收藏</p><p>删除</p></li>

</ul>

<ol>

<li id="totalPrice">&nbsp;</li>

<li><span>结 算</span></li>

</ol>

</div>

</div>

</body>

</html>

 

动态时钟示例代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title></title>

<script>

function cli(){

var dateNow=new Date();

var year=dateNow.getFullYear();

var month=dateNow.getMonth()+1;

var dateTemp=dateNow.getDate();

var hours=dateNow.getHours();

var minutes=dateNow.getMinutes();

var seconds=dateNow.getSeconds();

var dateStr=year+"/"+month+"/"+dateTemp+""+hours+":"+minutes+":"+seconds;

document.getElementsByTagName("h1")[0].innerHTML=dateStr;

}

 

function reflash(){

//延迟一秒后刷新动态时钟

setTimeout("cli()",1000);

}

 

var inte;

function interval(){

//启动更新动态时钟

inte=setInterval("cli()",1000);

}

 

function stopInterval(){

//停止更新动态时钟

clearInterval(inte);

}

</script>

</head>

<body οnlοad="cli()">

 

<h1></h1>

<div><input type="button"value="手动更新动态时钟"οnclick="reflash()"/></div>

<div>

<input type="button"value="启动"οnclick="interval()"/>

<input type="button"value="停止"οnclick="stopInterval()"/>

</div>

</body>

</html>

 

 

 

 

转载于:https://www.cnblogs.com/BingBing-Deng/p/9204162.html

a18740351964
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Javascript 类型转换、封闭函数及常见内置对象操作示例
12-13
本文实例讲述了Javascript 类型转换、封闭函数及常见内置对象。分享给大家供大家参考，具体如下： Javascript组成 1、ECMAscript javascript的语法（变量、函数、循环语句等语法） 2、DOM 文档对象模型 操作html和...
访问购物车节点（JavaScript）
weixin_48112113的博客
07-21 5635
1. 任务要求 1）DOM对象模型； 2）掌握通过document.getElementsByName函数访问document对象的Html文档节点； 3）JavaScript函数使用； 4）confirm对话框的使用。 2. 需求说明 (1)单击“+”按钮，数据量文本框可以数字变大，单击“-”按钮，数据量文本框可以数字变小，当数字为1时，会提示“不能再减！”，且相应的小计处会显示当前记录的总价； ...
北大青鸟 当当网网 js 上机作业
qq_34743097的博客
05-25 1425
北大青鸟 当当网网 js 上机作业
使用JS实现当当购物车结算页面
weixin_63112037的博客
09-03 2830
1、添加、减少商品数量，总价随之改变；2、点击删除，删除所选的商品；3、点击关闭，关闭当前页面。
制作简易的当当购物车页面
qq_53867976的博客
09-25 1928
制作简易的当当购物车页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt
一个简单的当当网购物车页面，可以实现简单购物
qq_46519536的博客
05-29 350
一个简单的当当网页面，可以实现简单的购物效果。点加号可以添加添加商品，点减号可以减商品，
JavaScript Date对象 日期获取函数
12-07
JavaScript Date对象使用小例子： 运行结果： 总结： 1、尽管我们认为12月是第12个月份，但是JavaScript从0开始计算月份，所以月份11表示12月； 2、nowDate.setDate(33)；javaScript知道在12月份没有33天，只有31...
JavaScript封闭函数及常用内置对象示例
10-17
主要介绍了JavaScript封闭函数及常用内置对象,结合实例形式分析了JavaScript封闭函数及常用内置对象的定义与简单使用相关操作技巧,需要的朋友可以参考下
window对象的子对象
热门推荐
qq_42025192的博客
03-19 1万+
window对象(有属性和方法) 特点： window是浏览器宿主对象，与js无关，支持所有浏览器，表示浏览器窗口 所有js的全局对象、全局函数、全局变量都是window对象的成员 注：以下所有属性都可以不需要window前缀，子对象更加详细的属性和方法见另一篇博客： window对象的子对象（属性的一种） 1、window.document ...
Javascript中DOM，window对象,history对象，location对象，document对象，内置对象
qq_42408149的博客
09-16 2846
BOM BOM：浏览器对象模型（Browser Object Model） BOM提供了独立于内容的，可以于浏览器窗口进行互动的对象结构 常用的属性： history:有关客户访问过的URL的信息 location:有关当前的URL的信息 &lt;button onclick="javascript:location.href='http=：//www.163.com';"...
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
练习2：访问当当购物车页面节点
11-21
北大青鸟，accp8.0,练习2：访问当当购物车页面节点。..
javascript外部对象,window对象,document对象
钟晚语夕的专栏
12-06 3070
BOM: Browser Object Model:浏览器对象模型，用来访问和操纵浏览器窗口，使js有能力与浏览器“对话”，通过使用BOM，可移动窗口、更改状态文本、执行其他不与页面内容发生直接联系第操作，且没有相关标准，但被广泛支持。 1、外部对象就是浏览器提供（内部）的API 2、这些对象由W3C规定，由浏览器开发者设计并开发 3、这些对象分为2部分，其中BOM包含了DOM 4、我们
window对象的常用属性和方法以及对象
weixin_30311605的博客
11-03 436
一、window 窗口对象 - Javascript语言描述 --------------------------------------------------------------------- 注:页面上元素name属性和JavaScript引用的名称必须一致包括大小写 否则会提示你一个错误信息 "引用的元素为空或者不是对象" -------------------------------...
javascript之window对象
ajwqb06628的专栏
01-01 405
javascript之window对象 　　window ：window对象是BOM中所有对象的核心，除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。 1、全局的window对象 　　JavaScript中的任何一个全局函数或变量都是window的属性...
Javascript的window对象
我爱吃菠菜的专栏
08-17 338
一个Html页面可以有一个或多个子框架,比如一个frameset里面包含几个frame的构造,这里所讲的框架编程包括框架的自我控制以及框架之间的互相访问.例如从一个框架中引用另一个框架中的JavaScript变量、调用其他框架内的函数、控制另一个框架中表单的行为等。框架间的相互引用 一个页面中的所有框架以集合的形式作为window 对象的属性提供，例如：window.frames 就表示该页面内
JavaScript中window对象中的常用对象属性
别让现实一步步侵吞你最初的梦想
06-09 849
window：               documen
window对象的所有属性以及方法（不包括netsape）
continue my dream
09-02 1312
window对象的所有属性以及方法（不包括netsape） 属性： clientInformation:包含关于浏览器的培植的信息（ie4+） clipboardData:提供对os剪贴板的访问（ie5+） closed:指示是否关闭窗口的bool值 defaultStatus:包含浏览器状态栏默认信息的字符串 dialogHeight:如果用showModelDialog()或sho
JavaScript中操作BOM对象重点总结
妖精小狗的博客
08-31 4390
BOM：浏览器对象模型（Browser Object Model）： BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构 BOM可实现功能： 弹出新的浏览器窗口 移动、关闭浏览器窗口以及调整窗口的大小 页面的前进、后退   window对象： 1. 常用属性 属性名称 说明 history 有关客...
window.location与document.location是同一个对象
最新发布
06-12
是的，window.location和document.location是指向同一个Location对象的引用，它们是等价的。在JavaScript中，Location对象表示当前文档的URL，包括URL的协议、主机名、端口、路径、查询字符串和哈希值等信息。window...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值