微信小程序第四章作业

最新推荐文章于 2024-10-02 09:04:57 发布

yiyiyayo

最新推荐文章于 2024-10-02 09:04:57 发布

阅读量217

点赞数 1

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/2401_83190345/article/details/137207014

版权

作业一：圈

代码：

//index.wxml
<view class="contain">
  <canvas canvas-id="xl" style="width: 296px;height: 200px;"></canvas>
</view>
 
//index.js
Page({
  onReady:function(){
    const ctx=wx.createCanvasContext('xl');
    ctx.beginPath();
    ctx.arc(80,80,40,0,2*Math.PI);
    ctx.moveTo(80,80)
    ctx.lineWidth=3;
    ctx.strokeStyle='#0099FF'
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(140,80,40,0,2*Math.PI);
    ctx.moveTo(140,80)
    ctx.lineWidth=4;
    ctx.strokeStyle='#000000'
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(200,80,40,0,2*Math.PI);
    ctx.moveTo(200,80)
    ctx.lineWidth=4;
    ctx.strokeStyle='#FF0000'
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(110,120,40,0,2*Math.PI);
    ctx.moveTo(110,120)
    ctx.lineWidth=4;
    ctx.strokeStyle='#FFCC00'
    ctx.stroke();
 
    ctx.beginPath();
    ctx.arc(170,120,40,0,2*Math.PI);
    ctx.moveTo(170,120)
    ctx.lineWidth=4;
    ctx.strokeStyle='#00CC00'
    ctx.stroke();
    ctx.draw();
  }
})

效果图：

作业二：书单

代码：

//index.wxml
<view style="font-size: 30px;position: absolute;top: 100px;top: 24px;"> ⬅书单</view>
 
 <view>
 <view class="tp1">
 <image src="/pages/image/IMG1.jpg" mode="l1" class="er"style="position:absolute;top:60px"/>
 </view></view>
 <view>
   <view style="position: absolute;top:90px;color:black;left: 40px;font-size: 28px;">培养商业意识，走出生活，职场和事业的困境。</view>
   <view style="position: absolute;top: 85px;color:black;left: 15px;top: 170px;font-size: 18px;">创新者是如何思考问题的？本书单包括了互联网，思维方式，商业，文案，市场，营销等方方面面，是在思维方式上的创新，略去传统商学院的教条</view>
 </view>
 <view class="one">
 <view class="do1">从你的全世界路过</view>
 <view class="do2">张嘉佳</view>
 <view class="do3">《从你的全世界路过》所发表的场域与适应的时刻决定了故事的内容与品质：其作品呈现出几个方面的特点。一、大都较短。“睡前”乃阴阳转变、动而生静之机</view>
 </view>
 <view class="tp2">
 <view class="tp2"><image src="/pages/image/4afbfbedab64034f2b9a6f8fa5c379310b551de7.webp" mode=""class="l1"/></view></view>
 <view class="fo" style="border-bottom: 1px solid darkgrey;padding: 10px;"></view>
 <view class="tp3">
 <view><image src="/pages/image/3b292df5e0fe9925bc315c19b4fb49df8db1cb13db65.webp" mode=""class="l2"/></view></view>
 <view class="san">
 <view class="hh">云边有个小卖部</view>
 <view class="mi">张嘉佳</view>
 <view class="ji">云边镇是作者虚拟的一个场所，构成一切人物活动的背景。云边镇虽为虚构，但并非全是虚空，这里既有打动人心的自然风景，也有真实生活底蕴的社会场景，做到了艺术创作的虚构性与真实性的融合。</view>
 </view>
//index.wxss
.er{
  float: left;
  margin-top: 8px;
  width: 450px; 
  height: 220px;
}
.l1{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
}

.tp1{
  margin-top: 5px;
}
.tp2 {
  position: absolute; 
 
}
.tp2 image{
  position: relative;
  top: 303px;
  left: 2px;
}
 
.tp3{
  margin-top: 30px;
  position: absolute;
}
.tp3 image{
  position: relative;
  top: 400px;
}
.one{
  margin-top: 5px;
  float: right;
}
.san{
  margin-top: 5px;
  float: right;
}
.l2{
  margin: 0 auto;
  float: left;
  display: block;
  width: 180px; 
  height: 160px;
  margin-top: 60px;
}
.do1{
  margin: 0 auto;
  display: block;
  font-size: 30px;
  float: none;
  display: block;
  margin-left: 200px;
  margin-top: 310px; 
}
.hh{
  position: absolute;
  left: 195px;
  top: 500px;
  font-size: 30px;
}
.mi{
  color: black;
  position: absolute;
  left: 200px;
  top:540px;
  font-size: 15px;
 
}
.ji{
  position: absolute;
  left: 200px;
  top:570px;
  font-size: 12px;
color: gray;
}
.do2{
  display: block;
  font-size: 15px;
 float: none;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
}
.do3{
  display: block;
  font-size: 10px;
  float: right;
  display: block;
  margin-left: 200px;
  margin-top: 10px;
  color: grey;
}

效果图：

作业三：拼车

代码：

//index.wxml
<view class="banner">联系方式（手机和微信至少填一项）</view>
<view class="banner1">
  <view class="ling2"><text>称呼*</text><input placeholder="请输入称呼" class="ling02"/></view>
  <view class="ling1"><text>手机号</text><input placeholder="请输入手机号" class="ling01"/></view>
  <view class="ling3"><text>微信号</text><input placeholder="请输入微信号" class="ling01"/></view>
</view>
<view class="banner">拼车信息</view>
<view class="banner2">
  <view class="ling2"><text>出发地点*</text><input placeholder="限7个字" class="ling04"/></view>
  <view class="ling1"><text>目的地*</text><input placeholder="限7个字" class="ling01"/></view>
  <view class="ling3"><text>空座数*</text><input placeholder="请输入空座数" class="ling01"/></view>
</view>
 
//index.wxss
.banner{
  padding: 10px;
  background-color: darkgrey;
}
.banner1{
  margin-top: 20px;
}
.ling1,.ling2,.ling3{
  display: flex;
  flex-direction: row;
  margin-top: 30px;
  margin-left: 20px;
}
.ling1,.ling3{
  padding-left: 20px;
}
.ling2{
  padding-left: 20px;
}
.ling02{
  padding-left: 55px;
}
.ling01{
  padding-left: 45px;
}
.ling1,.ling2{
  border-bottom: 1px solid #ccc;
}
.ling04{
  padding-left: 30px;
}

效果图：

作业四：时间

代码：

//index.wxml
<view class="word">中国现阶段人均寿命900个月</view>
<form bindsubmit="bind">
<view style="display: flex;font-size: 20px;" >
  <input type="text" name="time" placeholder="请输入日期" class="word1" />至今{{people}}个月
</view>
<view class="word2">
<button formType="submit">换一个日期</button>
<button formType="reset">清除记录</button>
</view>
</form>
<view class="complex">
  <view data-charge="0" class="battery1"></view>
</view>
<view class="po">82.78%</view>
<view class="word3">能把在面前行走的机会抓住的人，十有八九都会成功。</view>
 
//index.js
Page({
    data:{
      people:new Date().toLocaleDateString()
    },
    bind:function(e){
      var time = new Date().toLocaleDateString()
      var year = time.substring(0,time.indexOf("/"))
      var mo = time.substring(time.indexOf("/")+1,time.lastIndexOf("/")) 
      
      var value = e.detail.value.time
      var year2 = value.substring(0,time.indexOf("/"))
      var mo2 = value.substring(time.indexOf("/")+1,time.lastIndexOf("/"))
  
      var m1 = (year - year2 -1)*12+12-(mo2-mo)
      this.setData({
        people : m1
      })
    }
  })
 
//index.wxss
.word{
  font-weight:500;
  text-align: center;
  line-height: 40px;
}
.word1{
  width: 110px;
  padding: 2px 0 0 30px;
}
.word2{
  display: flex;
  flex-direction: row;
  margin-top: 20px;
}
.battery1{
  color: #34495e;
  border: 1px solid currentColor;
  display: inline-block;
  width:200px;
  height: 100px;
  position: relative;
  top: 50px;
  left: 40px;
  border-radius: 2px;
  display: border-box;
  margin: 30px;
  transform: rotate(-90deg);
}
.battery1::before,.battery1::after{
  content: "";
  position: absolute;
  top: 200px;
}
.battery1::before{
  top: 2px;
  bottom: 2px;
  right: -3px;
  width: 1px;
  display: border-box;
  border: 1px solid currentColor;
  border-left: 0;
}
.battery1::after{
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 1px;
  border-radius: 1px;
  background-color: currentColor;
  transition: right 500ms;
}
 
.battery1.low::after{
  right: 80%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.battery.med{
  color: #f39c12;
}
.battery1.med::after{
  right: 40%;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.battery1.full{
  color: #27ae60;
}
.battery1[data-charge='0']{
  color: #27ae60;
}
.battery1[data-charge='0']::after{
  right: 17.22%;
}
.word3{
 margin: 80px 20px;
}
.po{
  position: absolute;
  top: 250px;
  left: 148px;
  color: #fff;
}

效果图：