uniapp 之小球根据当前时间显示位置

最新推荐文章于 2023-12-23 15:38:50 发布

HQ8806

最新推荐文章于 2023-12-23 15:38:50 发布

阅读量516

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/ljm51200/article/details/130061121

版权

效果图

前言

最里面的是一张图片，并不是手写的样式，

总代码

1. template 代码

 <uni-popup ref="appointmentPopup" :is-mask-click="false" type="bottom" safe-area background-color="#1e2538"
      style="color: #fff;">
      <view class="" style="height: 100vh; text-align: center;">
        <view class="" style="">定时充电</view>
        <view style="margin: 40rpx 0 20rpx 0;">开始时间</view>
        <picker mode="time" :value="time" :start="timeChange" @change="bindTimeChange">
          <text>{{dateTime}}</text>
        </picker>
        <view class="circleClock">
          <view class="left_box" :style="{transform: 'rotate('+lxl+'deg)'}">
            <view class="left_item"></view>
          </view>
          <image src="/static/images/clock.png" class="clock-img"></image>
        </view>
        <view @click="close">开始定时充电</view>
      </view>
    </uni-popup>

2. script 代码

<script>
 
  import getDateTime from '@/common/time.js'

  export default {
   
    data() {
      return {
        timeChange: null,
        lxl: null, // 角度
      
        date: '', //起始日期
        endDate: '', //终止日期
        dateTime: '',
        time: '',
       
      }
    },
    
    methods: {
      bindTimeChange(e) {
        this.changeTime = e.detail.value
        let arr = this.dateTime.split(' ')
        this.dateTime = arr[0] + ' ' + this.changeTime
        console.log('开始时间', this.dateTime);
      },
      close() {
        console.log(this.changeTime, this.timeChange, '比较');
        if (this.changeTime !== undefined && this.timeChange > this.changeTime) return uni.$showMsg('开始时间输入不对')
  
        console.log('执行关闭事件');
        // this.$refs.appointmentPopup.close()
      },
     
    },
    onLoad() {
      this.dateTime = getDateTime.hour(0)   // 现在时间
      this.date = getDateTime.getDateStr(null, -1); //昨天
      this.endDate = getDateTime.dateTimeStr('y-m-d'); //今天
      let str = this.dateTime.split('  ')
      this.timeChange = str[1]
      let arr = str[1].split(':')
      // console.log(arr, str, 'arr');
      let hDeg = arr[0] / 24 * 360
      let mDeg = arr[1] / 24 / 60 * 360
      let sDeg = arr[2] / 24 / 60 / 60 * 360
      this.lxl = hDeg + mDeg + sDeg
    },
  }
</script>

3. js文件

function dateTimeStr(str) {
  var date = new Date(),
    year = date.getFullYear(), //年
    month = date.getMonth() + 1, //月
    day = date.getDate(), //日
    hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
    minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
    second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
  month >= 1 && month <= 9 ? (month = "0" + month) : "";
  day >= 0 && day <= 9 ? (day = "0" + day) : "";
  hour >= 0 && hour <= 9 ? hour : "";
  minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
  second >= 0 && second <= 9 ? (second = "0" + second) : "";
  if (str.indexOf('y') != -1) {
    str = str.replace('y', year)
  }
  if (str.indexOf('m') != -1) {
    str = str.replace('m', month)
  }
  if (str.indexOf('d') != -1) {
    str = str.replace('d', day)
  }
  if (str.indexOf('h') != -1) {
    str = str.replace('h', hour)
  }
  if (str.indexOf('i') != -1) {
    str = str.replace('i', minute)
  }
  if (str.indexOf('s') != -1) {
    str = str.replace('s', second)
  }
  return str;
}

//获取日期的今天，明天，后天 -1是昨天，0是今天，1是后一天
function getDateStr(today, addDayCount) {
  let date;
  if (today) {
    date = new Date(today);
  } else {
    date = new Date();
  }
  date.setDate(date.getDate() + addDayCount); //获取AddDayCount天后的日期 
  let y = date.getFullYear();
  let m = date.getMonth() + 1; //获取当前月份的日期 
  let d = date.getDate();
  if (m < 10) {
    m = '0' + m;
  };
  if (d < 10) {
    d = '0' + d;
  }
  console.log(y + "-" + m + "-" + d)
  return y + "-" + m + "-" + d;
}

function hour(e) {
  // 判断是少一个小时还是多一个小时

  if (e < 0) {
    e = e * (-1)
    hourDown(e)
    return
  }
  return hourUp(e)
}

function hourUp(e) {
  // 比现在多几个小时
  var end = Date.now()
  var start = 1000 * 60 * 60 * e
  var interval = end + start; //结束 - 开始 = 毫秒值
  var a = new Date(interval);
  var y = a.getFullYear();
  var m = a.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = a.getDate();
  d = d < 10 ? "0" + d : d;

  var h = a.getHours();
  h = h < 10 ? "0" + h : h;
  var mm = a.getMinutes();
  mm = mm < 10 ? "0" + mm : mm;
  var s = a.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + '-' + m + '-' + d + ' ' + ' ' + h + ':' + mm + ':' + s

}

function hourDown(e) {
  // 少多少个小时
  var end = Date.now()
  var start = 1000 * 60 * 60 * e
  var interval = end - start; //结束 - 开始 = 毫秒值
  var a = new Date(interval);
  var y = a.getFullYear();
  var m = a.getMonth() + 1;
  m = m < 10 ? "0" + m : m;
  var d = a.getDate();
  d = d < 10 ? "0" + d : d;

  var h = a.getHours();
  h = h < 10 ? "0" + h : h;
  var mm = a.getMinutes();
  mm = mm < 10 ? "0" + mm : mm;
  var s = a.getSeconds();
  s = s < 10 ? "0" + s : s;
  return y + '/' + m + '/' + d + '  ' + h + ':' + mm + ':' + s;
}
module.exports = {
  dateTimeStr: dateTimeStr,
  getDateStr: getDateStr,
  hour: hour
}

4.样式

<style lang="scss">
  page {
    width: 100%;
    height: 100%;
    color: #fff;

    button::after {
      border: none
    }

    background: #1e2538 !important;
  }
</style>
<style lang="scss" scoped>
  $color : #4763b5;

  .circleClock {
    width: 287px;
    height: 287px;
    border-radius: 50%;
    border: 1px solid $color;
    margin: 44rpx auto;
    position: relative;
    box-shadow: 0 0 50rpx $color;

    .clock-img {
      width: 300rpx;
      height: 300rpx;
      position: absolute;
      left: 138rpx;
      top: 110rpx;
    }
  }


  .left_box {
    margin: 74rpx auto;
    width: 365rpx;
    height: 365rpx;
    border: 1px solid $color;
    overflow: hidden;
    z-index: 1;
    border-radius: 50%;
    animation: loading_left 86400s linear;
  }

  // 小球
  .left_item {
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background-color: #5e7ef2;
    margin: 0 auto;
  }

  /* 动画 */
  @keyframes loading_left {
    to {
      transform: rotate(1turn);
    }
  }

</style>

注解

1.小球运动代码

 <view class="left_box" :style="{transform: 'rotate('+lxl+'deg)'}">
            <view class="left_item"></view>
          </view>

最开始没认真看代码直到后面我才发现其实小球没有动画效果，不运动，而运动的是父盒子，

所以动画角度： transform ： rotate（xxdeg）加在父盒子身上

2. picker 时间选择器

时间选择器有个 start 属性，这个属性就是当滑动时间进行选择时它能一下跳到当前时间，而它之前的时间不能进行选择

但这个属性有个弊端若我不进行滑动直接点击确定它的时间会变成00点，然后你在进行选择的话，任何时间都能进行选择，所以在点击开始定时充电的按钮的close事件里进行时间的一个比较

补充

如果比较简单的方法，或更好的方法，或觉得我这需要改进的，请在下面留言，让我们一起共同进步

HQ8806

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
uniapp 之小球根据当前时间显示位置

最里面的是一张图片，并不是手写的样式，
复制链接

扫一扫

uniapp 之 小球根据当前时间 显示位置

效果图

前言

总代码

1. template 代码

2. script 代码

3. js文件

4.样式

注解

1.小球运动代码

2. picker 时间选择器

补充

uniapp 之小球根据当前时间显示位置