静态网页基础知识

1、获取输入框的输入值

var x = document.getElementById('userInput').value

赋值的话:document.getElementById('userInput').value = 1

2、获取td的值、span的值等一个区域的值

var x = document.getElementById('result').innerText

赋值:document.getElementById('result').innerText = ”1“

或者:document.getElementById('result').innerHTML = 1

3、获得一个父组件的所有”x“类型的子组件

getElementsByTagName

如获得ul下面所有li类型的组件:

//获取ul
var ul = document.getElementById("photos"
//得到ul下面叫做li的所有标签
var lis =ul.getElementsByTagName("li");

4、设置定时:

setInterval(方法,间隔时间)-----间隔多久时间执行一次方法

如:

setInterval( function (){//获取ulvar ul = document.getElementById("photos")//得到ul下面叫做li的所有标签var lis =ul.getElementsByTagName("li");for(var i =0;i<lis.length;i++){lis[i].className="hide"}//下一个li显示index++;lis[index%lis.length].className="show"
},1000)

5、通过js创造新的组件并且添加到页面上显示

document.createElement("类型")

如:创造一个option类型的新节点

var option = document.createElement("option")

设置新节点的value值为3,代表是select中第四个选项:

option.setAttribute("value",3)

设置新节点的属性值

option.innerHTML=”第四个选项“

应用新节点到select中

document.getElementById("select").appendChild(option)

同样的,ul也可以用这种方法添加,不过创建的新节点是li

var li= document.createElement("li")

6、购物车案例,关键是要理清楚逻辑,通过层级关系去找需要的东西

<!DOCTYPE html>
<html><head><title>购物车</title><meta charset="utf-8" /><style type="text/css">h1 {text-align:center;}table {margin:0 auto;width:60%;border:2px solid #aaa;border-collapse:collapse;}table th, table td {border:2px solid #aaa;padding:5px;}th {background-color:#eee;}</style><script type="text/javascript">function add_shoppingcart(btn){//1.根据点击的按钮找到同行的商品和单价//根据点击的按钮找到他的爷爷,行var tr = btn.parentNode.parentNode;//爷爷tr的所有儿子tdvar tds = tr.getElementsByTagName("td");//第一个td是商品名var name = tds[0].innerText;//第二个td是价格var price = tds[1].innerText;//alert(price);//获得购物车var tbody = document.getElementById("goods");//判断购物车每一行,看是不是已经有同样的商品了,如果是的话就应该直接改变购物车里的对应行的数量和价格var tbtrs = tbody.getElementsByTagName("tr");//tbody的每一行for(var i=0;i<tbtrs.length;i++){var tbtds = tbtrs[i].getElementsByTagName("td");//tbody某一行的所有列if(name == tbtds[0].innerText){//第一列是商品名,如果点击加入购物车的商品在购物车中var inputtd = tbtds[2];//获得购物车里加号所在列var inputs = inputtd.getElementsByTagName("input");//获得第三列所有input(-,数量,+)var button = inputs[2];//加号按钮increase(button);//将这个按钮作为参数执行加加方法return;//结束方法}}//2.创建一个tr插入到购物车table下面var ntr = tbody.insertRow();//3.编写这一行的商品名和价格ntr.innerHTML='<td>'+name+'</td>'+'<td>'+price+'</td>'+'<td align="center">'+'<input type="button" value="-" onclick="decrease(this)"/>'+'<input type="text" size="3" id="sl" value="1"/>'+'<input type="button" value="+" onclick="increase(this)">'+'</td>'+'<td id="allPrice">'+price+'</td>'+'<td>'+'<input type="button" value="x" onclick="del(this)"/>'+'<td>'//4.改变总和total();}//删除一行function del(btn){//获取按钮对应的这一行var deltr = btn.parentNode.parentNode;//用这一行的父节点来删除这一行deltr.parentNode.removeChild(deltr);//4.改变总和total();}//数量++function increase(btn){//1.数量++var intd = btn.parentNode;//得到按钮所在列//得到该列所有叫input的组件,数量是第二个组件var inputs = intd.getElementsByTagName("input");var sl = inputs[1];var value = parseInt(sl.value);sl.value = ++value;// sl.setAttribute("value",++value);// alert(sl.value)//2.获取单价//获取这一行var trs = btn.parentNode.parentNode;//获取所有tdvar tds = trs.getElementsByTagName("td");//获取单价,单价是td里的text,var price = tds[1].innerText;//3.数量*单价var all = parseInt(price)*parseInt(sl.value);var alltd = tds[3];alltd.innerText = all;//4.改变总和total();}//数量--// function decrease(btn){//   //获得点击的这一行tr//   var intr = btn.parentNode.parentNode;//   //获得这一行的数量,不对,这只能获取第一行sl//   var sl = document.getElementById("sl");////   //数量减减//   var sl1 = parseInt(sl.value)-1//   sl.setAttribute("value",sl1) ;//   alert(sl.value)////   //获得这一行的单价//   var intds = intr.getElementsByTagName("td");//   var price = intds[1].innerText;//   //alert(price)////   //修改这一行的总金额//   var allprice = intds[3];//   var a = parseInt(sl1)*parseInt(price);//   allprice.innerHTML=a;// }//数量减减function decrease(btn){//先判断能不能减,如果数量是0则不能减var btntd = btn.parentNode;var inputs = btntd.getElementsByTagName("input");var sl = inputs[1];if(sl.value==0){//alert("数量为0,不能减");return;//1.方法有返回值时,结束方法、返回返回值,2.结束方法}else{//1.减减var value = parseInt(sl.value);sl.value = --value;//2.获取单价var tr = btn.parentNode.parentNode;var tds = tr.getElementsByTagName("td");var price = tds[1].innerText;//3.改变总金额var all = tds[3];all.innerText = parseInt(sl.value)*parseInt(price)//4.改变总和total();}}//改变合计function total(){var all = 0;//总金额//1.得到total列var total = document.getElementById("total");//2.遍历购物车表格tbody每一行tr的第四列tdvar tbody = document.getElementById("goods");var trs = tbody.getElementsByTagName("tr");for(var i=0;i<trs.length;i++){var tds = trs[i].getElementsByTagName("td");all += parseInt(tds[3].innerText)}total.innerText = all;}</script></head><body><h1>真划算</h1><table><tr><th>商品</th><th>单价(元)</th><th>颜色</th><th>库存</th><th>好评率</th><th>操作</th></tr>   <tr><td>罗技M185鼠标</td><td>80</td><td>黑色</td><td>893</td><td>98%</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/></td></tr><tr><td>微软X470键盘</td><td>150</td><td>黑色</td><td>9028</td><td>96%</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/></td></tr><tr><td>洛克iphone6手机壳</td><td>60</td><td>透明</td><td>672</td><td>99%</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/></td></tr><tr><td>蓝牙耳机</td><td>100</td><td>蓝色</td><td>8937</td><td>95%</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/></td></tr><tr><td>金士顿U盘</td><td>70</td><td>红色</td><td>482</td><td>100%</td><td align="center"><input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/></td></tr></table><h1>购物车</h1><table><thead><tr><th>商品</th><th>单价(元)</th><th>数量</th><th>金额(元)</th><th>删除</th></tr></thead><tbody id="goods">             
<!--        <tr>-->
<!--          <td>罗技M185鼠标</td>-->
<!--          <td>80</td>-->
<!--          <td align="center">-->
<!--            <input type="button" value="-"/>-->
<!--            <input type="text" size="3" readonly value="1"/>-->
<!--            <input type="button" value="+"/>-->
<!--          </td>-->
<!--          <td>80</td>-->
<!--          <td align="center"><input type="button" value="x"/></td>-->
<!--        </tr>         --></tbody><tfoot><tr><td colspan="3" align="right">总计</td><td id="total"></td><td></td></tr></tfoot></table>    </body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/43319.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

动态粒子发射特效404网站HTML源码

源码介绍 动态粒子发射404网站HTML源码&#xff0c;粒子内容可以进行修改&#xff0c;默认是4&#xff0c;0数字还有一个页面不存在英文&#xff0c;可以自行修改&#xff0c;喜欢的朋友可以拿去使用&#xff0c;源码是html&#xff0c;记事本打开修改即可&#xff0c;鼠标双击…

线程池的合理使用

线程池的合理使用 一、简介二、为什么要使用线程池三、核心参数四、如何合理配置线程参数1.1 corePoolSize && maximumPoolSize1.2 Handler 拒绝策略1.2.1AbortPolicy&#xff1a;优势&#xff1a;劣势&#xff1a; 1.2.2 DiscardPolicy&#xff1a;优势&#xff1a;劣…

海外媒体发稿-全媒体百科

全球知名媒体机构 在全球范围内&#xff0c;有许多知名的新闻机构负责报道世界各地的新闻事件。以下是一些国外常见的媒体机构&#xff1a; AP&#xff08;美联社&#xff09;合众国际社&#xff08;UPI&#xff09;AFP(法新社)EFE&#xff08;埃菲通讯社&#xff09;Europa …

521. 最长特殊序列 Ⅰ

521. 最长特殊序列 Ⅰ 题目链接&#xff1a;521. 最长特殊序列 Ⅰ 代码如下&#xff1a; class Solution { public:int findLUSlength(string a, string b) {if(ab) {return -1;}return max(a.size(),b.size());} };

VUE + 小程序 关于前端循环上传附件页面卡死的问题

最开始我使用for循环&#xff0c;后端能正常保存&#xff0c;但是前端页面卡死了&#xff0c;开始代码是这么写的 wx.showLoading({title: 文件上传中...,mask: true // 是否显示透明蒙层&#xff0c;防止触摸穿透&#xff0c;默认&#xff1a;false});const {fileList} that.…

Nginx理论篇与相关网络协议

Nginx是什么&#xff1f; Nginx是一款由C语言编写的高性能、轻量级的web服务器&#xff0c;一个线程能处理多个请求&#xff0c;支持万级并发。 优势&#xff1a;I/O多路复用。 I/O是什么&#xff1f; I指的是输入&#xff08;Input&#xff09;,O是指输出&#xff08;Outp…

【HarmonyOS NEXT】鸿蒙线程安全容器集collections.ArrayBuffer

collections.ArrayBuffer ArkTS TypedArray的底层数据结构。 属性 系统能力&#xff1a; SystemCapability.Utils.Lang 元服务API&#xff1a; 从API version 12开始&#xff0c;该接口支持在元服务中使用。 名称类型只读可选说明byteLengthnumber是否buffer所占的字节数。…

【安全设备】日志审计

一、什么是日志审计 日志审计是一站式的日志数据管理平台&#xff0c;主要致力于提供事前预警、事后审计的安全能力&#xff0c; 通过对日志数据的全面采集、解析和深度的关联分析&#xff0c;及时发现各种安全威胁和异常行为事件。日志审计是指通过集中采集信息系统中的各类信…

解决:Android Studio 突然打不开!提示Failed to create JVM:error code -1

Android studio1.5 一直用得好好的&#xff0c;突然有一天打不开&#xff0c;并提示&#xff1a; 可是系统配置中&#xff0c;java的配置也是正常的。 解决方法&#xff1a; 修改安装目录下的studio64.exe.vmoptions 文件 直接将文件内容改成&#xff1a; -Xms128m -Xmx512m…

谷歌+火狐浏览器——实现生成二维码并实现拖动——js技能提升

最新遇到的问题&#xff1a;前两个二维码拖动不了&#xff0c;只有第三个一维码生成后&#xff0c;才可以拖拽 【问题】&#xff1a;出现在都是绝对定位&#xff0c;但是没有指定z-index导致的。 解决办法&#xff1a;在方法中添加一个变量 renderDrag(id) {var isDragging f…

2024.7.9总结

今天真的要气炸了。本来想安装个pycharm学学python的&#xff0c;谁知&#xff0c;家里的电脑被姐夫搬走了&#xff0c;然后&#xff0c;在自己的笔记本下载安装出现特别多问题&#xff0c;主要是启动失败&#xff0c;不知道是不是之前删了一些不该删的文件。然后那个DLL错误修…

Python 3 AI 编程助手

Python 3 AI 编程助手 Python 3 是当前最流行的编程语言之一,特别是在人工智能(AI)领域。Python 3 的语法简洁明了,拥有丰富的库和框架,使其成为开发 AI 应用程序的首选语言。本文将介绍 Python 3 在 AI 编程中的关键特性、常用库以及如何使用 Python 3 构建 AI 应用程序…

Python CuPy库:GPU加速的科学计算

更多Python学习内容&#xff1a;ipengtao.com 在数据科学和机器学习领域&#xff0c;处理大规模数据集常常需要巨大的计算资源。Python的CuPy库通过提供一个类似NumPy但运行在NVIDIA GPU上的接口&#xff0c;大幅提升了数组操作的速度&#xff0c;使得复杂的数值计算变得更加高…

Three 圆柱坐标(Cylindrical)和 视锥体(Frustum)

圆柱坐标&#xff08;Cylindrical&#xff09; 圆柱坐标&#xff1a;一个点的cylindrical coordinates。英语&#xff1a;cylindrical coordinate system&#xff09;是一种三维坐标系统。它是二维极坐标系往 z-轴的延伸。添加的第三个坐标 &#x1d467; 专门用来表示 P 点离…

【C/C++】VSCode 插件支持

C/C基础 C/C&#xff08;包括C/C IntelliSense, debugging, and code browsing.&#xff09;C/C Theme&#xff1a;UI Themes for C/C extension.Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code llVM增强 CodeLLDB&#xff1a;这个插件就是安装llvm…

基于FPGA的图像边缘检测(OV5640)

一、简介 1.应用范围 边缘主要存在于图像中目标与目标之间&#xff0c;目标与背景之间&#xff0c;区域与区域之间。 边缘检测的目的就是找到图像中亮度变化剧烈的像素点构成的集合&#xff0c;表现出来往往是轮廓。如果图像中边缘能够精确的测量和定位&#xff0c;那么&…

GaussDB关键技术原理:高性能(四)

GaussDB关键技术原理&#xff1a;高性能&#xff08;三&#xff09;从查询重写RBO、物理优化CBO、分布式优化器、布式执行框架、轻量全局事务管理GTM-lite等五方面对高性能关键技术进行了解读&#xff0c;本篇将从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存…

SQLServer设置端口

要在SQL Server中设置端口&#xff0c;您需要修改配置文件sqlserver.ini。请按照以下步骤操作&#xff1a; 找到SQL Server的安装目录。通常情况下&#xff0c;它位于C:\Program Files\Microsoft SQL Server\MSSQLxx.InstanceName&#xff0c;其中xx是SQL Server的版本号&#…

Redis 7.x 系列【19】管道

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 往返时间2. 管道技术3. 代码演示4. 其他批处理4.1 原生批处理命令4.2 事务4.3 脚本…

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat

240708_昇思学习打卡-Day20-MindNLP ChatGLM-6B StreamChat 基于MindNLP和ChatGLM-6B实现一个聊天应用&#xff0c;本文进行简单记录。 环境配置 %%capture captured_output # 实验环境已经预装了mindspore2.2.14&#xff0c;如需更换mindspore版本&#xff0c;可更改下面mi…