js小程序

最新推荐文章于 2023-04-16 09:05:58 发布
最新推荐文章于 2023-04-16 09:05:58 发布
阅读量2.9k 收藏 2
点赞数
分类专栏： html小编程整理 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38314794/article/details/72655612
版权

全选：

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form>
			爱好：
			<input type="checkbox" name="aihao"  />打篮球
			<input type="checkbox" name="aihao"  />乒乓球
			<input type="checkbox" name="aihao"  />羽毛球
			<input type="checkbox" name="aihao"  />足球
			<input type="checkbox" name="aihao"  />游泳
			<input type="checkbox" name="aihao"  />玩游戏
			<input type="button" value="全选" id="input" οnclick="checkNames()"/>
			<input type="button" value="反选" id="in" οnclick="checkNo()" />
		</form>
		<script>
			function checkNo(){
				var n = document.getElementsByName("aihao");
				var i = document.getElementById("in");
				for(var j = 0 ;j < n.length; j++){
					
					if(n[j].checked == false){
						n[j].checked = true;
					}else{
						n[j].checked = false;
					}
				}
			}
			function checkNames(){
				var n = document.getElementsByName("aihao");
				var i = document.getElementById("input");
				
				if(i.value == "全选"){
					for(var j = 0 ;j < n.length; j++){
						
						n[j].checked = true;
						
						i.value = "取消全选"
					}
				}else{
					for(var j = 0 ;j < n.length; j++){
						n[j].checked = false;
						i.value ="全选"
					}
				}
			}
		</script>
	</body>
</html>
用jquery实现全选
/*全选*/
				$("#allCheckBox").click(function(){
					$("input[name='cartCheckBox']").attr("checked",$(this).attr("checked"));
					sums();
					integral();
				});








淘宝购物车



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<title>淘宝购物车页面</title>
		<link href="css/myCart.css" type="text/css" rel="stylesheet" />
		<script>
			$(function(){
				/*全选*/
				$("#allCheckBox").click(function(){
					$("input[name='cartCheckBox']").attr("checked",$(this).attr("checked"));
					sums();
					integral();
				});
				/*删除*/
				$(".cart_td_8 a").click(function(){
					$(this).parent().parent().prev().remove();
					$(this).parent().parent().remove();
					sums();
					integral();
				})
				/*商品总价*/
				function sums(){
					var sum = 0;
					$(".cart_td_7").each(function(){
						sum += parseFloat($(this).html());
						$("#total").html(sum);
					});
				}
				/*求积分*/
				 function integral(){
				 	var i = 0;
				 	$(".cart_td_4").each(function(){
				 		i += parseInt($(this).html());
				 		$("#integral").html(i);
				 	});
				 }
				/*减*/
				$("img[alt='minus']").click(function(){
					var num = $(this).next().val();
					if(num > 0){
						$(this).next().val(--num);
					}
					var ns =$(this).next().val(); 
					var n = $(this).parent().prev().html();
					$(this).parent().next().html(ns * n);
					sums();
					integral();
				});
				/*加*/
				$("img[alt='add']").click(function(){
					var num = $(this).prev().val();
					$(this).prev().val(++num);
					var ns =$(this).prev().val(); 
					var n = $(this).parent().prev().html();
					$(this).parent().next().html(ns * n);
					sums();
					integral();
				});
				/*删除所选*/
				$("[alt='delete']").click(function(){
					$("[name='cartCheckBox']").each(function(){
						var chec = $(this).attr("checked");
						alert(chec);
						if(chec == true){
							$(this).parent().parent().prev().remove();
							$(this).parent().parent().remove();
							sums();
							integral();
						}
					});
				});
			});
			
		</script>
	</head>

	<body>
		<div id="header"><img src="img/taobao_logo.gif" alt="logo" /></div>
		<div id="nav">您的位置：
			<a href="#">首页</a> >
			<a href="#">我的淘宝</a> > 我的购物车</div>
		<div id="navlist">
			<ul>
				<li class="navlist_red_left"></li>
				<li class="navlist_red">1. 查看购物车</li>
				<li class="navlist_red_arrow"></li>
				<li class="navlist_gray">2. 确认订单信息</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">3. 付款到支付宝</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">4. 确认收货</li>
				<li class="navlist_gray_arrow"></li>
				<li class="navlist_gray">5. 评价</li>
				<li class="navlist_gray_right"></li>
			</ul>
		</div>

		<div id="content">
			<table width="100%" border="0" cellspacing="0" cellpadding="0" id="shopping">
				<form action="" method="post" name="myform">
					<tr>
						<td class="title_1"><input id="allCheckBox" type="checkbox" value="" οnclick="selectAll()" />全选</td>
						<td class="title_2" colspan="2">店铺宝贝</td>
						<td class="title_3">获积分</td>
						<td class="title_4">单价（元）</td>
						<td class="title_5">数量</td>
						<td class="title_6">小计（元）</td>
						<td class="title_7">操作</td>
					</tr>
					<tr>
						<td colspan="8" class="line"></td>
					</tr>
					<tr>
						<td colspan="8" class="shopInfo">店铺：
							<a href="#">纤巧百****鞋坊</a> 卖家：
							<a href="#">纤巧百媚</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
					</tr>
					<tr id="product1">
						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product1" οnclick="selectSingle()" /></td>
						<td class="cart_td_2"><img src="img/taobao_cart_01.jpg" alt="shopping" /></td>
						<td class="cart_td_3">
							<a href="#">日韩流行风时尚美眉最爱独特米字拼图金属坡跟公主靴子黑色</a><br /> 颜色：棕色 尺码：37<br /> 保障：
							<img src="img/taobao_icon_01.jpg" alt="icon" /></td>
						<td class="cart_td_4">5</td>
						<td class="cart_td_5">138.00</td>
						<td class="cart_td_6">
							<img src="img/taobao_minus.jpg" alt="minus" οnclick="changeNum('num_1','minus')" class="hand" /> 
							<input id="num_1" type="text" value="1" class="num_input" readonly="readonly" /> 
							<img src="img/taobao_adding.jpg" alt="add" οnclick="changeNum('num_1','add')" class="hand" /></td>
						<td class="cart_td_7">0</td>
						<td class="cart_td_8">
							<a id="del" href="javascript:deleteRow('product1');">删除</a>
						</td>
					</tr>

					<tr>
						<td colspan="8" class="shopInfo">店铺：
							<a href="#">香****美丽日记</a> 卖家：
							<a href="#">lokemick2009</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
					</tr>
					<tr id="product2">
						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product2" οnclick="selectSingle()" /></td>
						<td class="cart_td_2"><img src="img/taobao_cart_02.jpg" alt="shopping" /></td>
						<td class="cart_td_3">
							<a href="#">chanel/香奈尔/香奈尔炫亮魅力唇膏3.5g</a><br /> 保障：
							<img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
						<td class="cart_td_4">12</td>
						<td class="cart_td_5">265.00</td>
						<td class="cart_td_6">
							<img src="img/taobao_minus.jpg" alt="minus" οnclick="changeNum('num_2','minus')" class="hand" /> 
							<input id="num_2" type="text" value="1" class="num_input" readonly="readonly" /> 
							<img src="img/taobao_adding.jpg" alt="add" οnclick="changeNum('num_2','add')" class="hand" /></td>
						<td class="cart_td_7">0</td>
						<td class="cart_td_8">
							<a id="del" href="javascript:deleteRow('product2');">删除</a>
						</td>
					</tr>

					<tr>
						<td colspan="8" class="shopInfo">店铺：
							<a href="#">实体经营</a> 卖家：
							<a href="#">林颜店铺</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
					</tr>
					<tr id="product3">
						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product3" οnclick="selectSingle()" /></td>
						<td class="cart_td_2"><img src="img/taobao_cart_03.jpg" alt="shopping" /></td>
						<td class="cart_td_3">
							<a href="#">蝶妆海晳蓝清滢粉底液10#（象牙白）</a><br /> 保障：
							<img src="img/taobao_icon_01.jpg" alt="icon" /> <img src="img/taobao_icon_02.jpg" alt="icon" /></td>
						<td class="cart_td_4">3</td>
						<td class="cart_td_5">85.00</td>
						<td class="cart_td_6"><img src="img/taobao_minus.jpg" alt="minus" οnclick="changeNum('num_3','minus')" class="hand" /> <input id="num_3" type="text" value="1" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" οnclick="changeNum('num_3','add')" class="hand" /></td>
						<td class="cart_td_7">0</td>
						<td class="cart_td_8">
							<a id="del" href="javascript:deleteRow('product3');">删除</a>
						</td>
					</tr>

					<tr>
						<td colspan="8" class="shopInfo">店铺：
							<a href="#">红***小屋</a> 卖家：
							<a href="#">taobao豆豆</a> <img src="img/taobao_relation.jpg" alt="relation" /></td>
					</tr>
					<tr id="product4">
						<td class="cart_td_1"><input name="cartCheckBox" type="checkbox" value="product4" οnclick="selectSingle()" /></td>
						<td class="cart_td_2"><img src="img/taobao_cart_04.jpg" alt="shopping" /></td>
						<td class="cart_td_3">
							<a href="#">相宜促销专供 大S推荐 最好用的LilyBell化妆棉</a><br /> 保障：
							<img src="img/taobao_icon_01.jpg" alt="icon" /></td>
						<td class="cart_td_4">12</td>
						<td class="cart_td_5">12.00</td>
						<td class="cart_td_6"><img src="img/taobao_minus.jpg" alt="minus" οnclick="changeNum('num_4','minus')" class="hand" /> <input id="num_4" type="text" value="2" class="num_input" readonly="readonly" /> <img src="img/taobao_adding.jpg" alt="add" οnclick="changeNum('num_4','add')" class="hand" /></td>
						<td class="cart_td_7">0</td>
						<td class="cart_td_8">
							<a id="del" href="javascript:deleteRow('product4');">删除</a>
						</td>
					</tr>

					<tr>
						<td colspan="3">
							<a href="javascript:deleteSelectRow()"><img src="img/taobao_del.jpg" alt="delete" /></a>
						</td>
						<td colspan="5" class="shopend">商品总价（不含运费）：<label id="total" class="yellow"></label> 元<br /> 可获积分 <label class="yellow" id="integral"></label> 点<br />
							<input name=" " type="image" src="img/taobao_subtn.jpg" /></td>
					</tr>
				</form>
			</table>

		</div>
	</body>

</html>








                

        

        

    




    

      

        

            

              
                
                  小小小小小小小小小小码农
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    2
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
【帮助篇】微信小程序开发常用JS代码整理_微信小程序通用的js代码

				
			

			

				

					2401_84520332的博客
				

				

					04-21
					
					1397
					
				

			

		

		

			
				
经过日积月累， 以下是小编归纳整理的深入了解Java虚拟机文档，希望可以帮助大家过关斩将顺利通过面试。由于整个文档比较全面，内容比较多，篇幅不允许，下面以截图方式展示。由于篇幅限制，文档的详解资料太全面，细节内容太多，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以添加V获取：xhs1999xhs （备注Java）

			
		

	



                

              
                



	

		

			

				
					
微信小程序中的JavaScript 简明介绍

				
			

			

				

					m0_58859743的博客
				

				

					07-12
					
					7456
					
				

			

		

		

			
				
小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。
主要介绍JavaScript在小程序中的特点。

			
		

	



                


  
              

                


	

		

			

				
					
微信小程序开发【七】-- js详解

				
			

			

				

					老六说编程的博客
				

				

					04-16
					
					2320
					
				

			

		

		

			
				
对于小程序而言，逻辑层就是.js脚本文件的集合，逻辑层将数据进行处理后发送给视图层，同时接收视图层的事件反馈。

			
		

	





	

		

			

				
					
微信小程序---JavaScript脚本

				
			

			

				

					m0_72694993的博客
				

				

					09-21
					
					3660
					
				

			

		

		

			
				
1>首先小程序的执行入口为app.js所以先在app.js中执行（小程序执行顺序根据其中require的模块顺序决定文件的执行顺序）定义全局变量：在app.js中globalData定义全局变量，获取global需要用getApp（）.globalData方法。4.作用域：在文件中声明的变量和函数只在该文件中有效，不同的文件可以命名定义相同名称的函数和变量，不会相互影响。然后渲染页面（通过app.json文件中的路径顺序进行执行相应的js文件）通过require函数获取对应文件的接口；

			
		

	



		

			
		



	

		

			

				
					
微信小程序之JavaScript

				
			

			

				

					朗朗上口就行啦的博客
				

				

					05-18
					
					4214
					
				

			

		

		

			
				
学习路径：菜鸟教程，主要就是熟悉一下JavaScript的语法规则，然后我学习的是微信小程序，所以JavaScript很多内容都不需要，例如在html中的使用

1、JavaScript简介

JavaScript 拥有动态类型，使用关键字 var 来定义变量，返回时确定数据类型
	JavaScript使用分号分割语句（非必要），使用分号是可以在一行执行多条语句
	JavaScript中的let命令所在的代码块内有效
	JavaScript中的const不需要声明变量类型，c语言用法cons...

			
		

	





	

		

			

				
					
微信小程序JavaScript

				
			

			

				

					大脸猫~
				

				

					09-19
					
					9061
					
				

			

		

		

			
				
浏览器中JavaScript

DOM：浏览器文档对象模型
BOM：浏览器对象模型

nodejs中的javascript实现
ECMAScript， Native， Npm 组成
Native：原生的模块，来使用一些原生JavaScript不具有的一些能力
npm 包管理工具，世界上最大的开源库生态系统，可以听过npm扩展包来快速的实现一些功能
nodejs：基于谷歌的v8引擎实现的JavaSc...

			
		

	





	

		

			

				
					
有关微信小程序如何使用mathjs

				
			

			

				

					11-15
				

			

		

		

			
				
mathjs9.3.2

			
		

	





	

		

			

				
					
小程序预览PDF文件插件Pdf.js

				
			

			

				

					11-20
				

			

		

		

			
				
本文将详细介绍如何使用"小程序预览PDF文件插件Pdf.js"，以及在Uniapp框架中实现PDF预览的步骤。  Pdf.js是由Mozilla开发的一款开源JavaScript库，它允许在Web浏览器中直接预览PDF文件，而无需依赖任何其他第三方...

			
		

	





	

		

			

				
					
three.js 精简小程序版源码，小程序加载3D模型，3D场景，VR全景 适配多个小程序平台

					
最新发布

				
			

			

				

					01-11
				

			

		

		

			
				
精简了three.js小程序版的源码，适配小程序端，使用实例可查看资源中的小程序。 关于跨平台： 本人只在微信小程序平台测试过，快手、字节等小程序平台并未测试。 但是由于three.js是基于type为webgl的canvas，所以...

			
		

	





	

		

			

				
					
微信小程序引入日历组件引入的moment.js文件

				
			

			

				

					05-23
				

			

		

		

			
				
微信小程序引入日历组件时引入的moment.js文件，获取日期

			
		

	





	

		

			

				
					
基于JavaScript实现简单的随机抽奖小程序

				
			

			

				

					10-23
				

			

		

		

			
				
为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行，开发工具和编译运行工具也能够尽可能简单（诸如text文本即可编辑，window系统自带的浏览器即可编译运行的情况），决定尝试使用javascript来做

			
		

	





	

		

			

				
					
javascript第一个小程序

				
			

			

				

					魏小魏
				

				

					05-12
					
					4232
					
				

			

		

		

			
				
恶搞小程序  javascript小程序

			
		

	





	

		

			

				
					
微信小程序 js中遍历list

				
			

			

				

					yechaoa
				

				

					08-28
					
					4万+
					
				

			

		

		

			
				
wxml 遍历用 wx:for



js:

for (var index in res.data) {
    title : res.data[index].title
 }

res.data是数组，index是下标



			
		

	





	

		

			

				
					
小程序app.js的配置

				
			

			

				

					_陌默
				

				

					05-17
					
					5475
					
				

			

		

		

			
				
微信小程序必须通过官方的微信开发者工具进行开发，每一个页面都至少由两部分组成 .wxml,.js，也有可能会有 .wxss, .json它们分别对应普通的HTML，JS, CSS但是又有细微的差别。

首先默认首页是index.wxml，其中app.js, app.json, app.wxs中存放一些全局公共的东西。

1.首先介绍app.json中的结构：

它是由json数据对构成，

eg...

			
		

	





	

		

			

				
					
微信小程序登录逻辑整理

					
热门推荐

				
			

			

				

					hss01248的专栏
				

				

					11-30
					
					5万+
					
				

			

		

		

			
				
官方文档文档相关地址:用户登录 
获取用户数据 
用户数据的签名验证和加解密微信两个api所拿到的信息:login和getUserInfo注册/登录小程序端:通过上面wx.login和wx.getUserInfo两个api拿到相应的信息,并通过上方接口传给自己的服务器. 
需要传输的信息有7个参数:appid  小程序唯一标识
secret  小程序的 app secret
js_code  //w

			
		

	





	

		

			

				
					
JS程序

				
			

			

				

					w327690的博客
				

				

					05-21
					
					444
					
				

			

		

		

			
				
第二章  JavaScript程序
1.程序书写位置
1.Js代码必须位于<script>标签内部
例如：
<script type=“text/javascript”> 		alert(‘hello world’); 	</script>		
2.<script>可以出现在html页面的任何位置
习惯于放在<head>块中。
3.也可以...

			
		

	





	

		

			

				
					
node.js小程序

				
			

			

				

					09-04
				

			

		

		

			
				
Node.js小程序是指使用Node.js作为后端技术的小程序开发。在Node.js小程序中，可以使用微信提供的小程序接口来获取用户登录凭证(code)、用户信息(iv和encryptedData)，以及将这些信息存储到缓存中。在官方文档的示例...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值