微信小程序开发学习——顺序、选择、循环、数学函数

        1.条件语句

只需在js中写JavaScript的条件语句就行

math对象:

代码如下:

<!--pages/tiaojian/tiaojian.wxml-->
<view class="box"><view class="title">输入x,条件输出y</view><view><input placeholder='请输入x' type="digit" bindblur="calc"></input></view><view>输出值y=:{{y}}</view>
</view>
// pages/tiaojian/tiaojian.js
Page({calc: function(e){var x,y;x = e.detail.value;if(x<0){y=Math.abs(x);}else if(x>=0&&x<10){y=Math.exp(x) * Math.sin(x);}else if(x>=10&&x<20){y=Math.pow(x,3);}else{y=(3 + 2 * x) * Math.log(x);}this.setData({y: y})}
})

2.button组件和hidden参数

button组件:

view中可以加入hidden参数,进行暂时隐藏。具体用法如下完整代码显示:

<!--pages/chengji/chengji.wxml-->
<view class="box"><view class="title">成绩计算器</view><view><input placeholder='请输入姓名' placeholder-class="placehoder" type="text" bindblur="nameInput"></input></view><view><input placeholder='请输入语文成绩' placeholder-class="placehoder" type="number" bindblur="yuwenInput"></input></view><view><input placeholder='请输入数学成绩' placeholder-class="placehoder" type="number" bindblur="shuxueInput"></input></view><button bindtap="mysubmit" class="button">提交</button><view hidden="{{flag}}"><view class="content-item">姓名:{{name}}</view><view class="content-item">语文成绩:{{yuwengrade}}</view><view class="content-item">数学成绩:{{shuxuegrade}}</view><view class="content-item">平均成绩:{{average}}</view></view>
</view>
// pages/chengji/chengji.js
Page({data:{flag : true,name : "",yuwengrade : "",shuxuegrade : "",average : ""},nameInput:function(e){this.setData({name:e.detail.value})},yuwenInput:function(e){this.setData({yuwengrade:e.detail.value})},shuxueInput:function(e){this.setData({shuxuegrade:e.detail.value})},mysubmit:function(){if(this.data.name=""||this.data.shuxuegrade==""||this.data.yuwengrade=="")return;else{this.setData({average:(this.data.shuxuegrade*1+this.data.yuwengrade*1)/2,flag : false})}}
})

并且需要注意一点:定义的参数,默认是字符串类型的,如果要变成数型运算,需要*1进行转换。

3.循环样例

 

只需在js中写JavaScript的循环语句就行。

支持的循环类型:

for/in样例:

JavaScript全局对象:

全局变量即定义在所有函数之外的变量,能被该文件的所有函数使用。

完整代码如下:

<!--pages/xunhuan/xunhuan.wxml-->
<view class="box"><view class="title">循环计算器</view><view><input placeholder='请输入起始x' placeholder-class="placehoder" type="number" bindblur="xInput"></input></view><view><input placeholder='请输入截至y' placeholder-class="placehoder" type="number" bindblur="yInput"></input></view><button type="primary" bindtap="calc" class="button">求和</button><view hidden="{{flag}}"><view class="content-item">结果:{{sum}}</view></view>
</view>
// pages/xunhuan/xunhuan.js
var start,end,sum;//定义了全局变量
Page({xInput:function(e){start = parseInt(e.detail.value);},yInput:function(e){end = parseInt(e.detail.value);},calc:function(){sum = 0;for(var i=start;i<=end;i++){sum = sum+i*1;  }this.setData({sum:sum})}
})

4.时钟、回调函数

实现一个一分钟倒计时计时器。开始计时按钮开始计时,重置按钮恢复60s,停止计时按钮停止计时。

四个与时钟相关的函数:

setTimeout(function callback,number delay,any rest)

callback函数为delay时间结束后执行的一个函数,any rest重置方法。

clearTimeout(number timeoutID)

取消由setTimeout设置的计时器,参数timeoutID为要取消的计时器的ID

setInterval(function callback,number delay,any rest)

与setTimeout的区别为,setInterval每delay个时间执行一次callback。

clearInterval(number interval ID)

取消setInterval设置的计时器。

代码如下:

<!--pages/jishiqi/jishiqi.wxml-->
<view class="box" hidden="{{hidden}}"><view class="title">计时器</view><view class="time">{{num}}</view><view class="btnLayout"><button bindtap="start">开始计时</button><button bindtap="reset">重置</button><button bindtap="stop">停止计时</button></view>
</view>
// pages/jishiqi/jishiqi.js
var num = 60;
var timerID;
Page({data:{hidden:true,num:num},onLoad:function(options){var that = this;that.show()},show:function(){var that = this;that.setData({hidden :false})},start:function(){var that = this;timerID = setInterval(()=>{that.timer()},1000)},stop:function(){clearInterval(timerID)},reset:function(){var that = this;num = 60;that.setData({num:num})},timer:function(){var that = this;if(num>0){that.setData({num:--num})}else{that.setData({num:0})}}
})

这里我们都用了局部变量that = 初始的this,因为在运行过程中this指向可能改变,因此用that可以避免因为指向改变导致的错误。

5.使用数组和随机函数

设计一个小程序用于显示三色旗,当点击按钮时更换三色旗颜色。

直接上代码就能理解:

<!--pages/suijiflag/suijiflag.wxml-->
<view class="box">
<view class = "title">随机三色旗</view>
<view class = "flex-warp"><view class="item" style="background-color:{{color1}}"></view><view class="item" style="background-color:{{color2}}"></view><view class="item" style="background-color:{{color3}}"></view>
</view><button type="primary" class="btn" bindtap="changecolor">改变颜色</button>
</view>
// pages/suijiflag/suijiflag.js
Page({createColor:function(){var color = [];//定义数组var letters = "0123456789ABCDEF";for(var i=0;i<3;i++){var c = "#";for(var j=0;j<6;j++){c += letters[Math.floor(Math.random()*16)];}color.push(c);}this.setData({color1:color[0],color2:color[1],color3:color[2]})},onLoad:function(options){this.createColor();},changecolor:function(){this.createColor();}
})

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

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

相关文章

俄罗斯网络间谍组织在有针对性的攻击中部署LitterDrifter USB蠕虫

导语 俄罗斯网络间谍组织最近在针对乌克兰实体的攻击中&#xff0c;部署了一种名为LitterDrifter的USB蠕虫。这种蠕虫具有自动传播恶意软件的功能&#xff0c;并与威胁行为者的命令和控制服务器进行通信。该组织被称为Gamaredon&#xff0c;其攻击行动被认为是大规模的&#xf…

年薪30w项目经理都在用的6个项目管理软件

大家好&#xff0c;我是老原。又到了每月一次的好用工具推荐&#xff0c;不少粉丝都在搓手等待了。 要知道&#xff0c;实时掌握项目进度、把关项目质量、应对项目风险、协调资源…如果能好用的工具高效提升你的工作效率&#xff0c;对于领导来说&#xff0c;绝对是加分项。 …

【C++】set和map的底层结构(AVL树红黑树)

文章目录 一、前言二、AVL 树1.AVL树的概念2.AVL树节点的定义3.AVL树的插入4.AVL树的旋转5.AVL树的验证6.AVL树的删除、AVL树的性能 三、红黑树1.红黑树的概念2.红黑树的性质3.红黑树节点的定义4.红黑树结构5.红黑树的插入操作6.红黑树的验证7.红黑树与AVL树比较 四、红黑树模拟…

ResizeObserver观察元素宽度的变化

ResizeObserver观察元素宽度的变化 ResizeObserver观察元素宽度的变化 ResizeObserver观察元素宽度的变化 ResizeObserver 构造函数创建一个新的 ResizeObserver 对象&#xff0c;它可以用于监听 Element 内容盒或边框盒或者 SVGElement 边界尺寸的大小。查看详细说明 案例 &l…

小白也能看懂的国内外 AI 芯片概述

随着越来越多的企业将人工智能应用于其产品&#xff0c;AI芯片需求快速增长&#xff0c;市场规模增长显著。因此&#xff0c;本文主要针对目前市场上的AI芯片厂商及其产品进行简要概述。 简介 AI芯片也被称为AI加速器或计算卡&#xff0c;从广义上讲只要能够运行人工智能算法…

SpringCloud实用篇02

SpringCloud实用篇02 0.学习目标 1.Nacos配置管理 Nacos除了可以做注册中心&#xff0c;同样可以做配置管理来使用。 1.1.统一配置管理 当微服务部署的实例越来越多&#xff0c;达到数十、数百时&#xff0c;逐个修改微服务配置就会让人抓狂&#xff0c;而且很容易出错。我…

8Base集团通过SmokeLoader部署新的Phobos勒索软件变种

最近&#xff0c;8Base集团的威胁行为者通过Phobos勒索软件的变种展开了一系列金融动机的攻击。这一发现来自于思科Talos的研究结果&#xff0c;他们记录了网络犯罪分子活动的增加。 安全研究员Guilherme Venere在周五发表的详尽的两部分分析中表示&#xff1a;“该组织的大多…

html2canvas快速使用

一、概述 html2canvas是一个HTML渲染器&#xff0c;是一个脚本&#xff0c;它允许你直接在用户浏览器截取页面或部分网页的“屏幕截屏”。底层是基于DOM的&#xff0c;根据页面上可用的信息构建屏幕截图&#xff0c;它没有制作实际的屏幕截图&#xff0c;因此生成的图片并不一定…

速锐得解码匹配驾培驾考吉利几何E萤火虫数据应用智能评判系统

随着国内新能源车的不断发展和渗透&#xff0c;在驾培驾考领域通过新能源车进入到驾驶员培训领域的车型越来越多&#xff0c;这里边包括了特斯拉、宝马、通用、沃尔沃、岚图、江淮、蔚来、比亚迪、吉利、奇瑞、大众等多家车企的车型。 之前我们做过像奇瑞艾瑞泽、江淮IEV7、大…

电力工作记录仪、智能安全帽、智能布控球助力智能电网建设

电力行业的建设和发展是国家经济发展的重要支撑&#xff0c;而智能电网作为电力系统的重要组成部分&#xff0c;它的安全高效运行关乎到整个电力系统乃至民生的稳定和安全。为了加快国家经济的发展以及满足人们对电力的需求和用电可靠性的要求&#xff0c;国家早在十二规划中就…

leetcode:914. 卡牌分组(python3解法)

难度&#xff1a;简单 给定一副牌&#xff0c;每张牌上都写着一个整数。 此时&#xff0c;你需要选定一个数字 X&#xff0c;使我们可以将整副牌按下述规则分成 1 组或更多组&#xff1a; 每组都有 X 张牌。组内所有的牌上都写着相同的整数。 仅当你可选的 X > 2 时返回 tru…

环境配置|GitHub——如何在github上搭建自己写的网站

下面简单地总结了从本地的网页文件到在github服务器上展示出来即可以通过网络端打开的过程&#xff1a; &#xff08;以下可能会出现一些难点&#xff0c;照着做就可以了&#xff0c;由于笔者是小白&#xff0c;也不清楚具体原理是什么&#xff0c;希望有一天成为大神的时候能轻…

听GPT 讲Rust源代码--src/librustdoc(2)

题图来自 Chromium项目将支持Rust编程语言[1] File: rust/src/librustdoc/html/render/search_index.rs 在Rust源代码中&#xff0c;rust/src/librustdoc/html/render/search_index.rs文件的作用是生成搜索索引&#xff0c;用于在Rust文档页面上进行关键字搜索。该文件实现了一…

战备器材管理系统-部队物资仓库管理系统

一、项目背景 传统的战备物资管理&#xff0c;一般依赖于一个非自动化的、以纸张文件为基础的系统来记录、追踪进出的货物&#xff0c;完全由人工实施仓库内部的管理&#xff0c;因此仓库管理的效率极其低下。对此&#xff0c;我们运用无线射频技术(RFID)的仓库智能管理系统&am…

DSP介绍及CCS

文章目录 CCS版本编译器CCS使用注意严禁中文 CCS的基本操作新建工程导入现有工程调整字体的大小工程界面恢复标签的使用 仿真盒小虫子进入在线Debug 芯片TMS320F28355基本介绍特性 DSP中特殊指令dsp指令中的EALLOW EDIS CCS TI官网 版本 CCS版本&#xff1a; CCS8.3.1.0004_…

〖大前端 - 基础入门三大核心之JS篇㊵〗- DOM事件监听及onxxx的使用

说明&#xff1a;该文属于 大前端全栈架构白宝书专栏&#xff0c;目前阶段免费&#xff0c;如需要项目实战或者是体系化资源&#xff0c;文末名片加V&#xff01;作者&#xff1a;不渴望力量的哈士奇(哈哥)&#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作&#xf…

多目标应用:基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化调度(MATLAB代码)

一、微网系统运行优化模型 微电网优化模型介绍&#xff1a; 微电网多目标优化调度模型简介_IT猿手的博客-CSDN博客 二、基于非支配排序的鲸鱼优化算法NSWOA 基于非支配排序的鲸鱼优化算法NSWOA简介&#xff1a; 三、基于非支配排序的鲸鱼优化算法NSWOA求解微电网多目标优化…

从android.graphics.Path中取出Point点,Kotlin

从android.graphics.Path中取出Point点&#xff0c;Kotlin /*** 从一条Path中获取多少个Point点*/private fun getPoints(path: Path, pointCount: Int): Array<FloatPoint?> {val points arrayOfNulls<FloatPoint>(pointCount)val pm PathMeasure(path, false)…

MySQL索引,你真的学会了?索引底层原理是什么?索引什么时候失效,你知道吗?

目录 1、什么是索引 2、索引分类 3、索引的基本操作 3.1、主键索引 3.2、单列索引 3.3、唯一索引 3.4、复合索引 4、索引的底层原理 为什么使用BTree而不是B-Tree? 如果数据量特别大的情况下&#xff0c;BTree会不会深度太深影响查询效率&#xff1f; 5、聚簇索引和…

OpenGL_Learn15(投光物)

1. 平行光 cube.vs******************#version 330 core layout (location 0) in vec3 aPos; layout (location 1 ) in vec3 aNormal; layout (location2) in vec2 aTexCoords;out vec3 FragPos; out vec3 Normal; out vec2 TexCoords;uniform mat4 model; uniform mat4 view…