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

目录

效果图

 前言

总代码

1. template 代码

 2. script 代码

3. js文件

4.样式

注解

1.小球运动代码

2. picker 时间选择器

 补充

---

效果图

 前言

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

总代码

1. template 代码

 
      
        定时充电
        开始时间
        
          {{dateTime}}
        
        
          
            
          
          
        
        开始定时充电
      
    

 2. 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.样式

注解

1.小球运动代码

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

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

2. picker 时间选择器

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

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

 补充

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