微信小程序实现打卡签到页面


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了微信小程序实现打卡签到页面的具体代码,供大家参考,具体内容如下

效果图如下所示

微信小程序实现打卡签到页面

.wxml

<view class='gs_banner'>
 <view class='gs_continue'>
 <view>每日坚持签到</view>
 <view>总共签到:<text>{{continuity}}</text>天</view>
 </view>
</view> 
<view class='gs_sign'>
 <view class='gs_sign_box'>
 <view class='gs_pillar'>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 
 </view>
 <view class='gs_sign_day'>
 <image bindtap='onshow' src='/pages/images/sign_icon.png'></image>
 <view>持续签到 <text>{{continuity}}</text>天</view>
 </view>
 <view class='gs_sign_content'>
 <view class='gs_week'>
 <block wx:for="{{week}}" wx:key="index">
  <view class='gs_wook'>
  <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{item.wook}}</view>
  </view>
 </block>
 </view>
 <view class='gs_week'>
 <block wx:for="{{day}}" wx:key="index">
  <view class="gs_wook {{ item.wook == getDate ? 'dateOn' : ''}}" style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' bindtap="{{item.src?'wenlin':''}}" data-index="{{index}}">
  <view id="{{item.src?'fuconl':''}}" style="{{item.src && !item.check?'visibility: hidden;':''}}">{{item.wook}}</view>
  <view class='gs_clocksucceed' wx:if="{{item.src && !item.check}}">
  <image src='{{item.src}}'></image>
  </view>
  </view>
 </block>
 </view>
 <view class='gs_circle'>
 <view class='gs_incircle' style="{{ornot?'background-color:#e7ebed;cursor:auto;':''}}">
  <view class='gs_excircle' bindtap="{{ornot?'':'dakainc'}}">
  <view class='gs_innercircle' style="{{ornot?'background-color:#ddd;':''}}">{{ornot?'已打卡':'打卡'}}</view>
  </view>
 </view>
 </view>
 </view>
 </view>
</view>
<!-- 弹出部分 -->
<view class='gs_calendar' style='display:{{display}}'>
 <view class='gs_bg' bindtap='onhide'></view>
 <view class='gs_gs_calendar_box'>
 <view class="canlendarBgView">
 <view class="canlendarView">
 <view class="canlendarTopView">
  <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
  <view class="leftView">
  <text class="cuIcon-back"></text>
  </view>
  </view>
  <view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
  <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
  <view class="leftView">
  <text class="cuIcon-right"></text>
  </view>
  </view>
 </view>
 <view class="weekBgView">
  <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="weekView" wx:for="{{weeks_ch}}" wx:key="index" data-idx="{{index}}">{{item}}</view>
 </view>
 <view class="dateBgView">
  <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="index" data-idx="{{index}}">
  </view>
  <view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="dateView {{item.wook == getDate && judge == 1?'dateOn':''}}" wx:for="{{days}}" wx:key="index" bindtap="{{item.src?'wenldisp':''}}" data-index="{{index}}">
  <!-- data-idx="{{index}}" bindtap="dateSelectAction" -->
  <view style="{{item.src && !item.check?'visibility: hidden;':''}}" id="{{item.src?'fuconl':''}}" class="datesView">{{item.wook}}</view>
  <view class='clocksucceed' wx:if="{{item.src && !item.check}}">
  <image src='{{item.src}}'></image>
  </view>
  </view>
 </view>
 </view>
 </view>
 <view class='del'>
 <text bindtap="onhide" class="cuIcon-close"></text>
 </view>
 </view>
</view>
<!-- 签到弹窗 -->
<view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;'}}">
 <image class="load-imagae" src="/pages/images/register.png"></image>
 <view class="load-centent">
 <view>签到成功</view>
 <view>持续签到<span>{{continuity}}</span>天</view>
 <view bindtap="popup">好的</view>
 </view>
</view>

.js

//logs.js
const util = require('../../../utils/util.js')

Page({
 data: {
 sysW: null,
 lastDay: null,
 year: null,
 hasEmptyGrid: false,
 cur_year: '',
 cur_month: '',
 firstDay: null,
 getDate:null,
 month:null,
 display:"none",
 week:[
 {
 wook: "一"
 }, {
 wook: "二"
 }, {
 wook: "三"
 }, {
 wook: "四"
 }, {
 wook: "五"
 }, {
 wook: "六"
 }, {
 wook: "日"
 },
 ],
 day:[],
 days:[],
 ornot:false,//今天是否签到
 continuity:18,//签到天数
 sign:false,//签到弹窗
 },
 getProWeekList:function(){
 let that=this
 let date=new Date()
 let dateTime = date.getTime(); // 获取现在的时间
 let dateDay = date.getDay();// 获取现在的
 let oneDayTime = 24 * 60 * 60 * 1000; //一天的时间
 let proWeekList;
 let weekday;
 for (let i = 0; i < 7; i++) {
 let time = dateTime - (dateDay - 1 - i) * oneDayTime;
 proWeekList = new Date(time).getDate(); //date格式转换为yyyy-mm-dd格式的字符串
 weekday = "day[" + i+"].wook"
 that.setData({
 [weekday]: proWeekList,
 })
 //that.data.day[i].wook = new Date(time).getDate();
 }
 },
 dateSelectAction: function (e) {
 let cur_day = e.currentTarget.dataset.idx;
 this.setData({
 todayIndex: cur_day
 })
 console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
 },

 setNowDate: function () {
 const date = new Date();
 const cur_year = date.getFullYear();
 const cur_month = date.getMonth() + 1;
 const todayIndex = date.getDate();
 const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
 this.calculateEmptyGrids(cur_year, cur_month);
 this.setData({
 cur_year: cur_year,
 cur_month: cur_month,
 weeks_ch,
 todayIndex,
 })
 },

 getThisMonthDays(year, month) {
 return new Date(year, month, 0).getDate();
 },
 getFirstDayOfWeek(year, month) {
 return new Date(Date.UTC(year, month - 1, 1)).getDay();
 },
 calculateEmptyGrids(year, month) {
 const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
 let empytGrids = [];
 if (firstDayOfWeek > 0) {
 for (let i = 0; i < firstDayOfWeek; i++) {
 empytGrids.push(i);
 }
 this.setData({
 hasEmptyGrid: true,
 empytGrids
 });
 } else {
 this.setData({
 hasEmptyGrid: false,
 empytGrids: []
 });
 }
 },
 calculateDays(year, month) {
 let getDate = this.data.getDate//多少号
 let cur_year = this.data.cur_year//年
 let cur_month = this.data.cur_month//月
 let thisMonthDays = this.getThisMonthDays(year, month);
 for (let i = 1; i <= thisMonthDays; i++) {
 if(this.data.opentime[1] < month && month == this.data.shuttime[1]){//小于开始月份
 this.data.days.push({wook:i,src:i <= getDate?'/pages/images/newspaper.png':''});
 }else if(this.data.opentime[1] == month && month == this.data.shuttime[1]){
 if((this.data.opentime[2] <= i) && (i <= this.data.shuttime[2])){
  this.data.days.push({wook:i,src:'/pages/images/newspaper.png'});
 }else{
  this.data.days.push({wook:i,src:''});
 }
 }else if(this.data.opentime[1] == month && month < this.data.shuttime[1]){
 this.data.days.push({wook:i,src:this.data.opentime[2] <= i?'/pages/images/newspaper.png':''});
 }else if(this.data.opentime[1] < month && month < this.data.shuttime[1]){
 this.data.days.push({wook:i,src:'/pages/images/newspaper.png'});
 }else{
 this.data.days.push({wook:i,src:''});
 }
 }
 this.setData({
 days:this.data.days,
 })
 },
 //上下月
 handleCalendar(e) {
 const handle = e.currentTarget.dataset.handle;
 const cur_year = this.data.cur_year;
 const cur_month = this.data.cur_month;
 
 this.setData({
 days:[]
 })

 if (handle === 'prev') {
 let newMonth = cur_month - 1;
 let newYear = cur_year;
 if (newMonth < 1) {
 newYear = cur_year - 1;
 newMonth = 12;
 }

 this.calculateDays(newYear, newMonth);
 this.calculateEmptyGrids(newYear, newMonth);

 let firstDay = new Date(newYear, newMonth - 1, 1);
 this.data.firstDay = firstDay.getDay();
 this.setData({
 cur_year: newYear,
 cur_month: newMonth,
 marLet: this.data.firstDay
 })
 if (this.data.month == newMonth) {
 this.setData({
 judge: 1
 })
 } else {
 this.setData({
 judge: 0
 })
 }
 } else {
 let newMonth = cur_month + 1;
 let newYear = cur_year;
 if (newMonth > 12) {
 newYear = cur_year + 1;
 newMonth = 1;
 }

 this.calculateDays(newYear, newMonth);
 this.calculateEmptyGrids(newYear, newMonth);
 let firstDay = new Date(newYear, newMonth - 1, 1);
 this.data.firstDay = firstDay.getDay();
 this.setData({
 cur_year: newYear,
 cur_month: newMonth,
 marLet: this.data.firstDay
 })
 if (this.data.month == newMonth){
 this.setData({
 judge:1
 })
 }else{
 this.setData({
 judge: 0
 })
 }
 }
 },
 dataTime: function () {
 var date = new Date();
 var year = date.getFullYear();
 var month = date.getMonth();
 var months = date.getMonth() + 1;

 //获取现今年份
 this.data.year = year;

 //获取现今月份
 this.data.month = months;

 //获取今日日期
 this.data.getDate = date.getDate();

 //最后一天是几号
 var d = new Date(year, months, 0);
 this.data.lastDay = d.getDate();

 //第一天星期几
 let firstDay = new Date(year, month, 1);
 this.data.firstDay = firstDay.getDay();
 this.setData({
 marLet:this.data.firstDay
 })
 },
 onshow:function(){
 this.setData({
 display:"block",
 })
 },
 onhide:function(){
 this.setData({
 display: "none",
 })
 },
 onLoad: function (options) {
 var that = this;
 this.setNowDate();
 this.getProWeekList()
 this.dataTime();
 var res = wx.getSystemInfoSync();
 this.setData({
 sysW: res.windowHeight / 12-5,//更具屏幕宽度变化自动设置宽度
 getDate: this.data.getDate,
 judge:1,
 month: this.data.month,
 });
 this.sigarr();
 },
 //获取数组参数
 sigarr:function(e){
 let that = this
 let ornot = that.data.ornot?0:1//当天是否签到
 let continuity = that.data.continuity//连续签到天数
 let obinl = parseInt(util.getWeekByDate(new Date()));//今天周几
 let cur_year = that.data.cur_year;//年份
 let cur_month = that.data.cur_month - 1;//月份
 if (cur_month < 1) {//月份小于1年份减1
 cur_year = cur_year - 1;
 cur_month = 12;
 }
 let num = obinl<continuity?(obinl + 1):continuity
 //七日签到数组
 for(let i = 0;i < num;i++){
 if(i <= (obinl + 1)){ 
 if(ornot == 0){
  if(0 <= (obinl - i)){
  that.data.day[obinl - i].src = "/pages/images/newspaper.png"
  }
 }else{
  if(0 <= (obinl - i - 1)){
  that.data.day[obinl - i - 1].src = "/pages/images/newspaper.png"
  }
 }
 }else{
 return false
 }
 } 
 //签到数组
 that.setData({
 day:that.data.day,//七天签到
 shuttime:[that.data.cur_year,that.data.cur_month,(that.data.getDate - ornot)],//结束签到时间
 })
 if(that.data.getDate < continuity){//当前天数不够减去连续签到天数
 let qindao = continuity - that.data.getDate//签到天数
 let rili = parseInt(that.getThisMonthDays(cur_year, cur_month))//上月天数
 if((rili + that.data.getDate) < continuity){//连续签到天数大于上个月加当前日期的和
 cur_month = cur_month - 1
 if (cur_month < 1) {
  cur_year = cur_year - 1;
  cur_month = 12;
 }
 let guil = parseInt(that.getThisMonthDays(cur_year, cur_month))//上月天数
 that.setData({
  opentime:[cur_year,cur_month,(guil - (qindao - rili) + 1 - ornot)],//开始签到时间
 })
 }else{
 that.setData({
  opentime:[cur_year,cur_month,(rili - qindao + 1 - ornot)],//开始签到时间
 })
 }
 }else{
 that.setData({
 opentime:[that.data.cur_year,that.data.cur_month,(that.data.getDate - continuity + 1 - ornot)],//开始签到时间
 })
 }
 this.calculateDays(that.data.cur_year, that.data.cur_month);//数组获取
 },
 //打卡签到
 dakainc:function(e){
 let that = this 
 let date = new Date();
 that.setData({
 ornot:true,
 continuity:that.data.continuity + 1,
 days:[],
 cur_year:date.getFullYear(),
 cur_month:date.getMonth() + 1,
 todayIndex:date.getDate(),
 judge:1,
 })
 that.dataTime()//年月份排版
 that.calculateEmptyGrids(that.data.cur_year,that.data.cur_month)//年月份排版
 that.sigarr();//获取数组参数
 that.popup();//显示签到弹窗
 },
 //显示签到弹窗
 popup:function(e){
 this.setData({
 sign:!this.data.sign
 })
 },
 //七日数组显示文字
 wenlin:function(e){
 let index = e.currentTarget.dataset.index
 this.data.day[index].check = this.data.day[index].check?false:true
 this.setData({
 day:this.data.day
 })
 },
 //数组显示文字
 wenldisp:function(e){
 let index = e.currentTarget.dataset.index
 this.data.days[index].check = this.data.days[index].check?false:true
 this.setData({
 days:this.data.days
 })
 },
 //滑动切换
 swiperTab: function (e) {
 var that = this;
 that.setData({
 currentTab: e.detail.current
 });
 },
 //点击切换
 clickTab: function (e) {
 var that = this;
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 that.setData({
 currentTab: e.target.dataset.current,
 })
 }
 },
 upper: function (e) {
 console.log(e)
 },
 lower: function (e) {
 console.log(e)
 },
 scroll: function (e) {
 console.log(e)
 },
})

.wxss

@import '../../../components/buteic/buteic.wxss';
page{
 background-color: #f4f4f4;
}
.gs_banner image{
 width:750rpx;
 height:256rpx;
 vertical-align: top;
}
.gs_continue{
 background-color: #fff;
 padding:30rpx 20rpx;
}
.gs_continue view:first-child{
 font-size:34rpx;
 color:#454545;
 padding-bottom:20rpx;
}
.gs_continue view:last-child{
 font-size:32rpx;
 color:#707070;

}
.gs_continue view text{
 color:#dd2522;
}
.gs_sign{
 margin-top:30rpx;
}
.gs_sign_box{
 background-color:#fff;
 width:677rpx;
 margin:0 auto;
 position:relative;
 border-radius:15rpx;
}
.gs_pillar{
 overflow:hidden;
 position:absolute;
 top:-16rpx;
 width:100%;
}
.gs_pillar .gs_post{
 float:left;
 width:20%;
 text-align: center;
}
.gs_pillar .gs_post view{
 display:inline-block;
 width:18rpx;
 height:42rpx;
 background-color:#53acfc;
 border-radius:20rpx;
}
.gs_sign_day{
 padding:60rpx 20rpx 0;
}
.gs_sign_day image{
 width:45rpx;
 height:45rpx;
 vertical-align: middle;
 position: relative;
 bottom: 6rpx;
}
.gs_sign_day view{
 display:inline-block;
 font-size: 30rpx;
 margin-left: 14rpx;
 color:#707070;
}
.gs_sign_day view text{
 color:#dd2522;
}
.gs_sign_content{
 padding:20rpx;
}
.gs_week{
 overflow:hidden;
}
.gs_wook{
 display:inline-block;
 text-align: center;
 position: relative;
 box-sizing: border-box;
}
.gs_wook view{
 display: inline-block;
 font-size:30rpx;
 color:#707070;
 width:60rpx;
 height:60rpx;
 line-height:60rpx;
}
.gs_clocksucceed{
 position:absolute;
 top:10rpx;
 left:16rpx;
}
.gs_clocksucceed image{
 width:50rpx;
 height:50rpx;
 vertical-align: bottom;
 position: relative;
 bottom: 2rpx;
}
.gs_sign_content .gs_week:nth-child(2) .gs_wook view{
 color:#454545;
}
.gs_circle{
 padding:50rpx 0;
}
.gs_incircle{
 width:225rpx;
 height:225rpx;
 background-color: #cce6ff;
 border-radius:50%;
 padding: 10rpx;
 margin:20rpx auto;
 cursor: pointer;
}
.gs_excircle{
 width:100%;
 height: 100%;
 background-color:#fff;
 border-radius:50%;
 position: relative;
}
.gs_innercircle{
 width:190rpx;
 height:190rpx;
 background-color: #8bc4f6;
 border-radius:50%;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 color:#fff;
 font-size:36rpx;
}
.gs_calendar{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 display:none;
}
.gs_bg{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:rgba(0,0,0,.3);
}
.gs_gs_calendar_box{
 position: absolute;
 top:180rpx;
 left:40rpx;
 width:677rpx;
 background-color:#fff;
 padding:20rpx;
 box-sizing: border-box;
}
.canlendarTopView{
 overflow:hidden;
 padding:40rpx 20rpx;
 margin-left:20rpx;
 display: flex;
 align-items: center;
}
.leftBgView{
 float:left;
 width:153rpx;
 text-align: center;
}
.leftView image{
 width:60rpx;
 height:60rpx;
}
.centerView{
 float:left;
 font-size:32rpx;
 height:60rpx;
 line-height:60rpx;
 width:260rpx;
 text-align: center;
}
.rightBgView{
 float:left;
 width:156rpx;
 text-align: center;
}
.rightView image{
 width:60rpx;
 height:60rpx;
}
.weekBgView{
 overflow:hidden;
}
.weekView{
 float:left;
 width:14.28571428571429%;
 text-align: center;
 font-size:30rpx;
 color:#707070;
}
.dateBgView{
 overflow:hidden;
 margin-bottom:20rpx;
}
.dateView{
 display:inline-block;
 text-align: center;
 position:relative;
}
.datesView{
 font-size:30rpx;
 color:#2b2b2b;
}
.dateOn{
border-radius: 50%;
background-color: #53acfc;
color: #fff !important;
}
.del{
 position:absolute;
 top:-20rpx;
 right:-20rpx;
 width:50rpx;
 height:50rpx;
 background-color:#909090;
 border-radius:50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.del>text{
 color: #fff;
 font-size: 36rpx;
}
.leftView>text{
 font-size: 40rpx;
}
.clocksucceed{
 position:absolute;
 top:-3rpx;
 left:20rpx;
}
.clocksucceed image{
 width:50rpx;
 height:50rpx;
 vertical-align: middle;
 position: relative;
 bottom: 4rpx;
}
#fuconl{
 color: #FF6666;
}
/* 签到弹窗 */
.load{
 width: 80%;
 height: 600rpx;
 position: fixed;
 top:calc((100vh - 800rpx)/2);
 left: 10%;
 transition: all 0.3s ease-in-out 0s;
 -webkit-transition: all 0.3s ease-in-out 0s;
 opacity: 1;
 z-index: 10;
}
.loadingpic {
 width: 100%;
 height: 93%;
 position: absolute;
 animation: load 3s linear 1s infinite;
 z-index: 10;
 margin-top: 7%;
}
@keyframes load{
 0%{
 webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100%{
 webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.load-imagae{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: absolute;
 z-index: 11;
}
.load-centent{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: relative;
 z-index: 12;
 text-align: center;
 padding: 25% 10% 5% 10%;
}
.load-centent>view:nth-child(1){
 font-size: 34rpx;
 color: #fff;
}
.load-centent>view:nth-child(2){
 color: #fff;
 opacity: 0.7;
 margin: 20rpx 0;
 font-size: 24rpx;
}
.load-centent>view:nth-child(3){
 width: 85%;
 margin: 30rpx 7.5% 0 7.5%;
 height: 70rpx;
 line-height: 70rpx;
 border-radius: 40rpx;
 background-color: #F8D168;
 color: #EB4331;
 font-size: 30rpx;
}

js引入文件:微信小程序获取当前时间及星期几

点击获取:签到弹窗-图片素材

这个是我在网上拔下来的模板:微信小程序实现日历签到

这个签到模板是从网上拔下来,然后自己整理了一下把修改的地方都备注了一下,整个签到流程算是走通了,复制下来就能用。

签到流程是根据后台接口返回一个连续签到时间,还有今天是否签到,连续签到三十天就会重置签到进行修改的。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
js中实现多态采用和继承类似的方法
Aug 22 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
实现React单页应用的方法详解
Aug 02 Javascript
浅析Node.js实现HTTP文件下载
Aug 05 Javascript
Javascript6中字符串的四个新用法分享
Sep 11 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
Angularjs自定义指令实现分页插件(DEMO)
Sep 16 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
Vue父组件监听子组件生命周期
Sep 03 Javascript
微信小程序实现签到弹窗动画
Sep 21 #Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 #Javascript
微信小程序实现日历签到
Sep 21 #Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
You might like
phpmyadmin 常用选项设置详解版
2010/03/07 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
为Python的web框架编写前端模版的教程
2015/04/30 Python
python实现的简单抽奖系统实例
2015/05/22 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python检测生僻字的实现方法
2016/10/23 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
python实现对求解最长回文子串的动态规划算法
2018/06/02 Python
python将回车作为输入内容的实例
2018/06/23 Python
Django中的静态文件管理过程解析
2019/08/01 Python
Python切图九宫格的实现方法
2019/10/10 Python
浅谈pandas.cut与pandas.qcut的使用方法及区别
2020/03/03 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍
2013/01/31 HTML / CSS
盛大笔试题
2016/11/05 面试题
EJB的角色和三个对象
2015/12/31 面试题
英语专业个人求职自荐信
2013/09/21 职场文书
财务会计毕业生自荐信
2013/11/02 职场文书
表扬信格式
2014/01/12 职场文书
文明风采获奖感言
2014/02/18 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP