h5+原生js实现九宫格跑马灯抽奖
2023-05-25
在教别人html和js入门的时候顺手写了两个demo，她说有点无趣，我想了想写了个女孩子喜欢的九宫格跑马灯效果。虽然略显简陋但是可以玩，涉及知识点：函数和匿名函数的使用、数组和对象、js创建和删除节点、setInterval和setTimeout定时器、onclick点击事件、for和forEach循环、Math.random随机数。
上代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>幸运大转盘</title></head><body> <div id="big-cube"></div> <button id="go-go">抽奖</button></body><style> #big-cube{ width: 350px; height: 350px; } .prize{ width: 100px; height: 100px; border: 1px solid #999; margin: 5px; text-align: center; line-height: 100px; float: left; border-radius: 8px; } .noting{ border: 1px solid #bbb; color: red; } #prize-title{ color: #666; font-weight: 500; font-size: 1.1rem; background: #fbd4aa; font-style: oblique; border: none; }</style><script> //预设奖品 // var default_my_prize = 2; var setTime; var cycle = [0,1,2,5,8,7,6,3]; var prizeList = [ {name:"自行车", isPrize:true}, {name:"谢谢参与", isPrize:false}, {name:"跳跳糖", isPrize:true}, {name:"谢谢参与", isPrize:false}, {name:"幸运大转盘", isPrize:false, id:"prize-title"}, {name:"谢谢参与", isPrize:false}, {name:"佩奇公仔", isPrize:true}, {name:"感谢参与", isPrize:false}, {name:"迪奥口红", isPrize:true}, ]; document.getElementById('go-go').onclick = function(){ if(setTime){ return false; } var index = 0; var count = 0; var my_prize = document.getElementsByClassName('prize'); //获得所有的跑马灯奖品 for(let i=0; i<my_prize.length; i++){ my_prize[i].style.background = ''; my_prize[i].style.color = ''; } //定时器开始 setTime = setInterval(function(){ //从第二个跑马灯开始，每走一个跑马灯就把上一个跑马灯的颜色恢复白色 if(index>0){ my_prize[cycle[index-1]].style.background = ''; my_prize[cycle[index-1]].style.color = ''; } //跑完最后一个跑马灯又从第一个重新开始跑 // if(index > (my_prize.length-1)){ if(index > 7){ index = 0; } //跑到哪个跑马灯就把哪个变为红色背景 my_prize[cycle[index]].style.background = '#e6722aab'; my_prize[cycle[index]].style.color = 'white'; //当前跑的跑马灯的下标+1 index++; //总计数器+1 count++; //有预设奖品 if(typeof default_my_prize!='undefined'){ //至少跑35下，跑到预设的奖品就停下 if(count>40 && (index-1)==default_my_prize){ clearInterval(setTime); //清除定时器 //弹出中奖提示 if(my_prize[cycle[index-1]].className=='prize'){ setTimeout(()=>{alert('恭喜你抽中了['+my_prize[cycle[index-1]].innerHTML+']')},100); } setTime = undefined; } //中断程序运行，防止走预设奖品后的代码 return false; } //没有预设奖品的算法，跑15次后随机获得奖品 if(count>40 && parseInt(Math.random()*10)>8 ){ clearInterval(setTime); //弹出奖品的时候排除掉谢谢惠顾 if(my_prize[cycle[index-1]].className=='prize'){ setTimeout(()=>{alert('恭喜你抽中了['+my_prize[cycle[index-1]].innerHTML+']')},100); } setTime = undefined; } }, 90); } function createPrizeItem(prizeList){ //删除所有奖品节点 document.querySelectorAll('.prize').forEach(function(e){ e.remove(); }) var prizeBox = document.getElementById('big-cube'); //循环创建奖品节点 for(let list of prizeList){ var ele = document.createElement('div'); ele.innerHTML = list.name ?? '谢谢参与'; ele.className = list.isPrize? 'prize' : 'prize noting'; if(list.id){ ele.id = list.id; } prizeBox.append(ele); } } createPrizeItem(prizeList);</script></html>
php读取zip包里面的文件踩坑记录
2023-05-08
前两天要写个接口采集fb的数据，翻了翻fb文档发现他们给返回的是压缩成zip包的csv文件需要自己处理。往常都是处理json和文本的时候比较多zip还没处理过，于是查下了php手册确实php自带zip操作相关的系统函数。
我主要用到的功能也就是打开zip文件包再读取里面的csv文件来处理数据那部分，主要用了zip_open、zip_read和zip_entry_read几个函数。写完了测试下没问题就着急上线了，结果今天来看有几天的数据异常，排查了一阵发现csv处理逻辑部分一直报头部数和列数不一致的问题。开始以为fb给的csv不完整或者有特殊符号，反复验证了几次发现我处理zip后csv后面部分内容确实都丢失了，只读到了文本前面一部分。不得已又翻了翻文档发现是自己看文档不仔细，zip_entry_read有两个参数，第二个参数如果不传的话默认只读取文件的前1024个字节，真想一头撞死在豆腐上~
在deepin系统下基于ffplay用命令行播放音乐
2023-05-06
起初只是因为公司每天中午有蓝牙播放音乐叫醒服务，但是经常前台小姐姐会弄错过点，我想了下其实可以自己写了个脚本到点以后自动播放音乐。脚本内容如下：
#环境 deepin桌面（UOS和Ubuntu理论上是一样的）+ ffplay(装FFmpeg时顺带装好的)#!/bin/bash##获取当前系统日期TIME=`date +%H:%M:%S`##我的音乐文件目录MUSIC_DIR=/home/chobees/Music/##随机获取一首歌SONG=`ls $MUSIC_DIR| sort --random-sort |head -n 1`##在指定时间段内运行if [[ "$TIME" > "13:20:00" ]] && [[ "$TIME" < "13:30:00" ]]; then ##kill掉正在运行的ffplay killall ffplay ##系统弹窗提示正在随机取到的音乐 notify-send 正在播放: $SONG --expire-time=5000 --icon=/home/chobees/Pictures/log图片.jpeg ##调用ffplay播放音乐，-nodisp是不显示播放窗口后台播放音乐，-autoexit是播放完后自动退出 /bin/bash -c "DISPLAY=:0 ffplay -nodisp -autoexit $MUSIC_DIR$SONG"fi把上面的内容写入到play_music.sh文件里面再chomod +x play_music.sh就能运行了，配合上crontab计划任务运行即可，当然也可以用node写个服务再用pm2来管理运行。
写完后还是觉得不交给小姐姐，自己玩玩算了，哈哈~