微信小程序：
请参考微信官方文档：audio | 微信开放文档 (qq.com)
实践操作：
一、身份验证
包括姓名、手机号、身份证的验证以及简单同步os的小代码块
<view class="page-body"> <form catchtap="formSubmit"> <view style="font: bold 20px Arial;">身份信息验证：</view> <view class="page-section"> <view class="weui-cells__title">姓名：</view> <input class="weui-input" maxlength="20" bindinput="nameInput" placeholder="例如：张三"/> <view class="page-section"> <view class="weui-cells__title">身份证：</view> <input class="weui-input" maxlength="18" bindinput="idInput" placeholder="例如：341182194006236212"/> </view> <view class="page-section"> <view class="weui-cells__title">手机号：</view> <input class="weui-input" type="number" maxlength="11" bindinput="telInput" placeholder="例如：15012345678"/> </view> <button form-type="submit" class="mini-btn1" type="primary" bindtap="chickMe1">提交</button> <button form-type="reset" class="mini-btn2" type="primary" bindtap="chickMe2">清除</button> </view> </form> </view>
Page({
data: {
inputValue: '',
idValue:"",
nameValue:''
},
telInput: function (e) {
this.setData({inputValue:e.detail.value})
},
idInput: function (e) {
this.setData({idValue:e.detail.value})
},
nameInput: function (e) {
this.setData({nameValue:e.detail.value})
},
formSubmit:function () {
if(!(/^(13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9])\d{8}$/.
test(this.data.inputValue))){
wx.showToast({
title: '手机号输入有误',
icon:"none",
duration: 800 //持续的时间
})
}else if(!(/^(\d{17}(\d|x|X))$/.test(this.data.idValue))){
wx.showToast({
title: '身份证输入有误',
icon:"none",
duration: 800 //持续的时间
})
} else {
wx.showToast({
title: '输入正确',
icon:"success",
duration: 1500 //持续的时间
})
}
},
formReset:function () {
wx.showToast({
title: '已清除',
icon:"none",
duration: 2000 //持续的时间
})
}
})
/**index.wxss**/
button{
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.button-sp-area{
margin: 0 auto;
width: 60%;
}
.mini-btn1{
margin: 100px 50px 10px 130px;
}
.mini-btn2{
margin: 0px 50px 100px 130px;
}
.page-section{
margin: 10px 0 0 0;
font:bold 20px Arial;
}
.weui-input{
background:cornsilk;
}
二、计算器
基础功能都已经实现：
-
优点：可以做次方运算、取百分数以及连续运算
-
缺点：结果不可以直接使用，例如：8+8=16 此时16不可作为第一个数参加运算
-
<!-- 背景图 -->
<!-- <image class="img" src="../../images/gr-031.jpg"></image> -->
<!-- 屏幕部分 -->
<view class="calculateScreen">
<!-- 功能栏 -->
<view class="funBar" style="text-align: center; font:bold 30px Arial">计算器</view>
<!-- 结果和输入 -->
<view class="beaiutful">
<!-- <text style="background: blanchedalmond;">{{text}}</text> -->
{{text}}
</view>
<view class="funBar"></view>
<button
wx:for="{{num}}" class="test" style="width:25vw" size="mini" bindtap="test" data-numb="{{item}}">{{item}}
</button>
</view>
.calculateScreen {
/* position: relative;
width: 100%;
height: 30vh; */
background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
/* z-index: 100;
box-shadow: 6rpx 6rpx 12px 6rpx rgba(0, 0, 0, .3);
overflow: hidden;
backdrop-filter: blur(20rpx); */
}
.img{
width: 100%;
height: 0;
}
.funBar {
width: 100%;
height: 55px;
}
.beaiutful{
background-color: rgba(255, 255, 255, .3); /* 背景色 */
box-shadow: 6rpx 6rpx 12px 6rpx rgba(0, 0, 0, .3); /* 阴影 */
backdrop-filter: blur(20rpx); /* 高斯滤镜 */
}
.test{
display: flex;
/* flex-direction: column; */
/* width: 320rpx; */
height: 100rpx;
border-radius: 70rpx;
background-color: rgb(233, 29, 124);
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
color: rgb(10, 247, 247);
}
.test:hover{
color: rgb(4, 248, 228);
background: rgb(178, 178, 219);
}
.beaiutful {
width: calc(100vw - 40rpx);
height: calc(100% - 200rpx);
line-height: 115rpx;
font-size: 80rpx;
text-align: right;
padding: 0rpx 20rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 5px 5px 5px #464443;
}
// index.js
Page({
//背景渲染
onLoad() {
wx.setNavigationBarTitle({
title: 'Ifeng',
})
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#C37D58',
})
},
//数据初始化
data:{
num:"C%/*789-456+1230.²½=",//生成按钮
text:"0",//显示器内容
num1:"",//第一个输入的数字
num2:"",//第二个输入的数字
op:"",//符号
result:""//结果
},
//主函数
test:function(e){
//判断输入是否是数字、"."、²、½
if((/^\d$/.test(e.currentTarget.dataset.numb))||e.currentTarget.dataset.numb=="."||e.currentTarget.dataset.numb=="²"||e.currentTarget.dataset.numb=="½")
{
//判断符号是否为空，如果为空存储num1的值 或者 进行次方运算将结果赋值给num1
if(this.data.op==""){
this.setData({num1:this.data.num1+e.currentTarget.dataset.numb})
this.setData({text:this.data.num1})
switch(e.currentTarget.dataset.numb){
case "²":
this.setData({text:this.data.num1})
this.setData({num1:(parseFloat(this.data.num1)*parseFloat(this.data.num1))});
break
case "½":
this.setData({text:this.data.num1})
this.setData({num1:(Math.sqrt(parseFloat(this.data.num1)))});
break
}
}else{//如果不为空存储num2的值 或者 进行次方运算将结果赋值给num2
this.setData({num2:this.data.num2+e.currentTarget.dataset.numb})
this.setData({text:this.data.num1+this.data.op+this.data.num2})
switch(e.currentTarget.dataset.numb){
case "²":
this.setData({text:this.data.num1+this.data.op+this.data.num2})
this.setData({num2:(parseFloat(this.data.num2)*parseFloat(this.data.num2))});
break
case "½":
this.setData({text:this.data.num1+this.data.op+this.data.num2})
this.setData({num2:(Math.sqrt(parseFloat(this.data.num2)))});
break
}
}
}
//输入的不是数字或者次方
else{
//判断符号是否为空，如果为空就属于第一次计算，存储符号
if(this.data.op==""){
switch(e.currentTarget.dataset.numb){
case "+":
this.setData({op:"+"});
this.setData({text:this.data.num1+"+"})
break
case "-":
//这里进行负数判断
if(this.data.num1==""){
this.setData({num1:"-"})
this.setData({text:this.data.num1})
}else{
this.setData({op:"-"});
this.setData({text:this.data.num1+"-"})}
break
case "*":
this.setData({op:"*"});
this.setData({text:this.data.num1+"*"})
break
case "/":
this.setData({op:"/"});
this.setData({text:this.data.num1+"/"})
break
case "%":
this.setData({op:"%"});
this.setData({text:this.data.num1+"%"})
break
//清除
case "C":
this.setData({op:""});
this.setData({num1:""});
this.setData({num2:""});
this.setData({result:""});
this.setData({text:"0"})
break
//此时最多只有一个数值num1
case "=":
if(this.data.num1==""){
this.setData({result:"0"});
this.setData({text:this.data.result})
console.log(this.data.result)
}else {
this.setData({result:this.data.num1});
this.setData({text:this.data.num1})
console.log(this.data.result)
}
this.setData({text:this.data.result})
this.setData({num1:""})
break
}
}
//已存在符号并又输入了符号，这里先计算出result，赋值给num1，再进行操作
else{
switch(this.data.op){
case "+":
this.setData({result:(parseFloat(this.data.num1)+parseFloat(this.data.num2))});
break;
case "-":
this.setData({result:(parseFloat(this.data.num1)-parseFloat(this.data.num2))});
break;
case "*":
this.setData({result:(parseFloat(this.data.num1)*parseFloat(this.data.num2))});
break;
case "/":
this.setData({result:(parseFloat(this.data.num1)/parseFloat(this.data.num2))});
break;
case "%":
if(!this.data.num2==""){
this.setData({result:(parseFloat(this.data.num1)%parseFloat(this.data.num2))});
}else{
this.setData({result:(parseFloat(this.data.num1)/100)});
}
break;
}
console.log(this.data.result)
this.setData({num1:this.data.result})
this.setData({op:""})
this.setData({num2:""})
this.setData({text:this.data.result})
//前面计算结果已出，此时存储新的运算符，做新的计算
switch(e.currentTarget.dataset.numb){
case "+":
this.setData({op:"+"});
this.setData({text:this.data.num1+"+"})
break
case "-":
if(this.data.num1==""){
this.setData({num1:"-"})
this.setData({text:this.data.num1})
}else{
this.setData({op:"-"});
this.setData({text:this.data.num1+"-"})}
break
case "*":
this.setData({op:"*"});
this.setData({text:this.data.num1+"*"})
break
case "/":
this.setData({op:"/"});
this.setData({text:this.data.num1+"/"})
break
case "%":
this.setData({op:"%"});
this.setData({text:this.data.num1+"%"})
break
case "C":
this.setData({op:""});
this.setData({num1:""});
this.setData({num2:""});
this.setData({result:""});
this.setData({text:"0"})
break
case "=":
//这个情况例如直接输入 8%=
if(this.data.num2==""){
this.setData({result:this.data.num1});
this.setData({text:this.data.result})
console.log(this.data.result)
this.setData({num1:""})
}else {
this.setData({text:this.data.result})
}
break
}
}
}
}
})
14万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
