侧边工具条实现 scss+requirejs(4)注册jq插件

注册成为jquery插件

  • BackTop.js
// 在BackTop.js 中注册插件
    $.fn.extend({
        backtop: function(opts){
            //使用each遍历是因为如果不是id选择器,则会选择多个对象,即要给每个对象都要闯将一个BackTop的实例
            //this指的是选中的那个对象,比如在这里就是指的$('#backTop')
            return this.each(function(){
                new BackTop(this,opts);
            });
        }
    });

    return {
        BackTop:BackTop
    }
  • main.js
requirejs(['jquery','BackTop'],function($,BackTop){
    // 注册成插件使用
    $('#backTop').backtop({
        pos : 500,
        destination:0,
        speed: 2000
    });
});

总结:

好的,下面是一个用scss+vue3实现精美的圆形倒计时的示例代码: ```vue <template> <div class="countdown"> <canvas ref="canvas"></canvas> <div class="countdown-text">{{ time }}</div> </div> </template> <script> import { ref, watchEffect } from 'vue' export default { setup() { const canvas = ref(null) const time = ref('00:00') const totalTime = 60 // 总时间 const interval = 1000 // 刷新间隔 const radius = 70 // 半径 const lineWidth = 8 // 圆环宽度 const bgColor = '#f0f0f0' // 背景色 const fgColor = '#ff5722' // 前景色 const start = Date.now() // 开始时间 let timer = null // 定时器 // 格式化时间 function formatTime(time) { let minute = Math.floor(time / 60) let second = time % 60 minute = minute < 10 ? '0' + minute : minute second = second < 10 ? '0' + second : second return minute + ':' + second } // 绘制圆环 function drawCircle(percent) { const ctx = canvas.value.getContext('2d') const centerX = canvas.value.width / 2 const centerY = canvas.value.height / 2 const angle = percent * 2 * Math.PI - Math.PI / 2 // 绘制背景圆环 ctx.beginPath() ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI) ctx.lineWidth = lineWidth ctx.strokeStyle = bgColor ctx.stroke() // 绘制前景圆环 ctx.beginPath() ctx.arc(centerX, centerY, radius, -Math.PI / 2, angle) ctx.lineWidth = lineWidth ctx.strokeStyle = fgColor ctx.stroke() } // 更新时间和圆环 function updateTime() { const now = Date.now() const elapsed = Math.floor((now - start) / interval) const remaining = totalTime - elapsed const percent = elapsed / totalTime if (remaining > 0) { time.value = formatTime(remaining) drawCircle(percent) } else { clearInterval(timer) } } watchEffect(() => { if (canvas.value) { canvas.value.width = radius * 2 canvas.value.height = radius * 2 updateTime() timer = setInterval(updateTime, interval) } }) return { canvas, time, } }, } </script> <style lang="scss" scoped> .countdown { position: relative; width: 150px; height: 150px; margin: 0 auto; .countdown-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: bold; color: #333; } } </style> ``` 这个示例代码中,通过canvas绘制圆环,使用watchEffect监听canvas的变化,在更新时间和圆环的时候重新绘制canvas。同时,使用setup函数来定义组件的逻辑。最终实现了一个精美的圆形倒计时效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值