微信小程序实现发布作业

电玩女神 2021-07-24 12:55 599阅读 0赞

![format_png][]

> 微信小程序实现发布作业

效果图:

![format_png 1][]

图片说明

> 小程序完整代码

.wxml

<image src='{
        {image}}' class='img'></image>
    <view class='bj'>{
        {bj}}</view>
    <view class='date'>
      <picker mode="date" value="{
        {date1}}" start="2018-01-01" end="2222-10-08" bindchange="changeDate1">
        <view>
          ＜{
        {util.sub1(date1)}}＞ 日期
        </view>
      </picker>
    </view>
    
    <view class='text'>语文</view>
    
    <block wx:for="{
        {lists}}" wx:key="{
        {index}}">
      <input class='bk' data-id="{
        {index}}" placeholder="请输入" bindinput='bindKeyInput'></input>
    </block>
    <image src='{
        {addimage}}' class='addimg' bindtap='addList'></image>
    <image src='{
        {delimage}}' class='addimg' bindtap='delList'></image>
    
    <view class='text'>数学</view>
    
    <block wx:for="{
        {lists1}}" wx:key="{
        {index}}">
      <input class='bk' data-id="{
        {index}}" placeholder="请输入" bindinput='bindKeyInput1'></input>
    </block>
    <image src='{
        {addimage}}' class='addimg' bindtap='addList1'></image>
    <image src='{
        {delimage}}' class='addimg' bindtap='delList1'></image>
    
    <view class='text'>英语</view>
    
    <block wx:for="{
        {lists2}}" wx:key="{
        {index}}">
      <input class='bk' data-id="{
        {index}}" placeholder="请输入" bindinput='bindKeyInput2'></input>
    </block>
    <image src='{
        {addimage}}' class='addimg' bindtap='addList2'></image>
    <image src='{
        {delimage}}' class='addimg' bindtap='delList2'></image>
    
    <button class='btn'>发布作业</button>
    
    <wxs module="util">
      var sub1 = function(val) {
        return val.substring(0, 10)
      }
      module.exports.sub1 = sub1;
    </wxs>

.wxss

.img {
      width: 100%;
      height: 125rpx;
      margin-top: 20rpx;
      z-index: 1;
    }
    
    .bj {
      color: #907037;
      position: absolute;
      z-index: 2;
      top: 75rpx;
      left: 300rpx;
    }
    
    .text {
      color: #00b8ee;
      margin: 30rpx;
      font-size: 30rpx;
    }
    
    .btn {
      background-color: #00b8ee;
      color: #fff;
      width: 540rpx;
      font-size: 30rpx;
      margin-top: 30rpx;
    }
    
    .bk {
      color: #00b8ee;
      border: 2rpx solid #ccc;
      padding: 10rpx;
      margin: 30rpx;
      border-color: #00b8ee;
      font-size:30rpx;
    }
    
    .addimg {
      width: 50rpx;
      height: 50rpx;
      margin-left: 30rpx;
    }
    
    .date {
      padding-top: 20rpx;
      padding-bottom: 20rpx;
      text-align: center;
      color: #fff;
      background-color: #00b8ee;
    }

.js

.util

const formatTime = date => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
      return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    const formatNumber = n => {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    module.exports = {
      formatTime: formatTime
    }

> 达叔小生：往后余生，唯独有你  
> You and me, we are family !  
> 90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通  
> 简书博客： 达叔小生  
> https://www.jianshu.com/u/c785ece603d1

## 结语 ##

*  下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
 *  小礼物走一走 or 点赞

**这是一个有质量，有态度的公众号**

喜欢本文的朋友们

欢迎长按下图关注订阅号

收看更多精彩内容

![format_png 2][]

[format_png]: /images/20210724/76c9db15780f4538a63f8c07897858ea.png
[format_png 1]: /images/20210724/b0b54a85eecb4d4383fe2c7b2d913aff.png
[format_png 2]: /images/20210724/63feb8bf23eb469ea4456d0bdd6d1246.png