小程序写一个当前时间减去开始时间方法并且用在页面中

您可以使用 JavaScript 的 Date 对象来实现这个功能。以下是示例代码：

在页面的 JavaScript 部分：

// 获取当前时间
var currentTime = new Date();

// 获取开始时间
var startTime = new Date('2022/01/01 00:00:00');

// 计算时间差（单位是毫秒）
var timeDiff = currentTime.getTime() - startTime.getTime();

// 将时间差转化为小时数
var hours = Math.floor(timeDiff / (1000 * 60 * 60));

在页面中的 HTML 部分：

<!-- 显示小时数 -->
<p>当前距离开始时间已经过去: <span id="hours"></span> 小时。</p>

在页面的 JavaScript 部分：

// 显示小时数
document.getElementById('hours').innerHTML = hours;

这样就在页面中实现了当前时间减去开始时间并显示小时数的功能。

相关问题

微信小程序 canvas 绘图一个矩形 取canvas实例后 跟随鼠标移动

在微信小程序中，你可以利用`wx.createContext()`创建一个Canvas实例，并结合`onTouchmove`事件监听用户的触摸移动，动态地绘制跟随鼠标的矩形。以下是实现这个功能的基本步骤：

1. **初始化 Canvas**:
首先，在页面的`view`或者其他合适的组件上，获取到`ref`引用的元素，然后通过`createContext()`创建一个Canvas上下文。

Page({
  ...
  canvasRef: {
    // 创建一个ref
    ref: function (instance) {
      if (instance) {
        this.canvasInstance = instance.getContext('2d');
      }
    },
  },
  ...
})

2. **响应 touchmove 事件**:
在`onLoad`或其他生命周期函数里，添加一个`touchmove`事件处理函数，获取移动的位置，并绘制矩形。

onTouchMove(e) {
  const { touches } = e;
  if (touches.length > 0) {
    const touch = touches[0];
    const x = touch.pageX - this.viewRect.left; // 获取屏幕坐标减去视口偏移
    const y = touch.pageY - this.viewRect.top;

    // 重绘矩形
    this.canvasInstance.clearRect(0, 0, this.canvasInstance.width, this.canvasInstance.height);
    this.canvasInstance.beginPath();
    this.canvasInstance.rect(x, y, 50, 50); // 矩形宽度和高度可以根据需要调整
    this.canvasInstance.fillStyle = 'red'; // 设置填充颜色
    this.canvasInstance.fill();
  }
}

这里假设`viewRect`是一个包含当前视口宽度和高度的对象，你可以根据实际情况计算屏幕坐标。

uniapp小程序，订单列表中增加30分钟倒计时

要实现在订单列表中增加30分钟倒计时，可以参考以下步骤：

1. 在订单列表页面中，添加一个倒计时组件。

2. 创建一个计时器对象，通过 JavaScript 的 `setInterval()` 方法来实现倒计时功能。

3. 在页面加载完成时，启动倒计时计时器，并传入结束时间戳参数。

4. 在计时器回调函数中，每次更新当前时间与结束时间相差的秒数，并将倒计时时间更新到页面中。

5. 当倒计时结束时，清除计时器并执行相应的操作（例如取消订单或删除订单）。

下面是一个简单的示例代码，供参考：

<template>
  <view>
    <view>订单列表</view>
    <view v-for="(order, index) in orderList" :key="index">
      <view>{{ order.orderId }}</view>
      <view>{{ order.status }}</view>
      <view>{{ formatTime(order.expireTime) }}</view>
      <view>{{ order.price }}</view>
      <view v-if="order.status === '待付款'">
        <count-down :time="getCountDownTime(order.expireTime)" @finish="onCountDownFinish(index)" />
      </view>
    </view>
  </view>
</template>

<script>
import CountDown from '@/components/count-down'

export default {
  components: {
    CountDown
  },
  data() {
    return {
      orderList: [
        {
          orderId: '123456',
          status: '已完成',
          expireTime: 1633872000000,
          price: '100'
        },
        {
          orderId: '234567',
          status: '待付款',
          expireTime: 1633875600000,
          price: '200'
        }
      ]
    }
  },
  methods: {
    formatTime(time) {
      const date = new Date(time)
      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} ${hour}:${minute}:${second}`
    },
    getCountDownTime(expireTime) {
      const now = new Date().getTime()
      const diffSeconds = Math.floor((expireTime - now) / 1000)
      return diffSeconds > 0 ? diffSeconds : 0
    },
    onCountDownFinish(index) {
      console.log(`订单${this.orderList[index].orderId}已超时`)
      // 执行相应的操作，例如取消订单或删除订单
    }
  }
}
</script>

在上述示例代码中，`CountDown` 组件是一个简单的倒计时组件，可以自己实现或使用已有的组件库中的组件。在 `getCountDownTime` 方法中，使用当前时间减去结束时间来计算出相差的秒数，并返回给计时器组件。在计时器回调函数中，每秒更新倒计时时间，并在时间到达零时执行相应的操作。