<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery一星期时间段选择插件 - 更多源码WW.96flw.COM</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<div class="wrap">
<div class="topSquareBox clearFix">
<ul class="leftSquareY clearFix">
<li></li>
</ul>
<div class="rightWrap">
<!-- 时间文本 -->
<ul class="topSquareX clearFix"></ul>
<!-- 大表格 -->
<ul class="bottomSquareX clearFix"></ul>
</div>
</div>
<div class="bottomBox clearFix">
<span class="totalText">每天</span>
<ul class="totalSquareX clearFix"></ul>
</div>
</div>
<div class="signBox">
<span class="bgColor"></span>
<span>广告投放时段</span>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script>
// 定义的全局方法
let xinterval = 3 // 横向显示间隔
let xWidth = 16
// ----- 样式布局-start ------------
// 模拟横向坐标数值
let xTextList = []
// 左侧纵向坐标
let yTextList = ['周一','周二','周三','周四','周五','周六','周日']
for (var i = 0; i < 24; i++) {
let num = i<10?'0'+i:i
let text = num+':00'
xTextList.push(text)
}
// 横向坐标文本
let xShowTextList = []
let $rowList = $('<ul class="rowList clearFix"></ul>')
for (var i = 0; i < xTextList.length; i++) {
let colOLi = $('<li></li>').width(xWidth).attr('x',i)
if(i % xinterval == 0){
var text = xTextList[i]
xShowTextList.push(text)
}
if((i+1) % xinterval == 0 && i != xTextList.length-1){
colOLi.addClass('rightLine')
}
$('.totalSquareX').append(colOLi.clone(true))
$rowList.append(colOLi.clone(true))
}
// 设置盒子宽度
$('.rightWrap').width(xWidth*xTextList.length+2)
// 渲染横向坐标数据
$('.topSquareX').append(function () {
return xShowTextList.map(function (v) {
return $('<li></li>')
.width(xWidth*xinterval)
.text(v)
})
})
for (let i = 0; i < yTextList.length; i++) {
// 左侧纵坐标
$('.leftSquareY').append($('<li></li>').text(yTextList[i]))
// 右侧纵向表格
let $rowOLi = $('<li></li>').addClass('row')
let cloneRow = $rowList.clone(true)
cloneRow.find('li').attr('y',i)
$('.bottomSquareX').append(
$rowOLi.append(cloneRow )
)
}
// ----- 样式布局-end -------------
let resultList = []
let totalData = {
// 移动容纳盒
moveList:[],
// 判断是否移动，移动-按下事件，反之点击事件
isMove:false,
// 是否准备开始移动
firstClick:false,
// 初始坐标
start:0,
// 结束坐标
end:0,
}
let tableResultList = []
let tableData = {
// 移动容纳盒
moveList:[],
// 判断是否移动，移动-按下事件，反之点击事件
isMove:false,
// 是否准备开始移动
firstClick:false,
// 初始坐标
start:{},
// 结束坐标
end:{},
}
// 请求获取数据
getData()
// ----- 底部-逻辑处理-start -------------
// 按下事件
$('.totalSquareX li').on('mousedown',function () {
totalData.isExitClass = $(this).hasClass('select')
// $(this).toggleClass('select')
// console.log('---------down----------')
totalData.isMove = false
totalData.moveList = []
if(totalData.firstClick)return false
totalData.start = Number($(this).attr('x'))
totalData.firstClick = true
// 抬起事件
$(document).mouseup(function () {
let storageArr = []
if(!totalData.isMove){
// 点击事件
// console.log('click')
console.log(totalData.start)
totalData.moveList = [Number(totalData.start)]
}
if(totalData.isExitClass){
// 删除
resultList = resultList.filter(v=>!totalData.moveList.includes(v))
}else{
// 添加
resultList = resultList.concat(totalData.moveList)
}
// console.log(totalData.moveList)
totalData.moveList.forEach(v=>{
if(v != 0 && !v)return false
for (let i = 0; i < yTextList.length; i++) {
storageArr.push(JSON.stringify({
x:v,
y:i,
}))
}
})
// console.log(storageArr)
// 处理NaN
resultList = resultList.filter(v=>!isNaN(v))
$('.totalSquareX li').removeClass('select')
if(resultList.length>0){
// resultList = uniq(resultList)
resultList.forEach(v=>{
$('.totalSquareX li').eq(v).addClass('select')
})
}else{
resultList = []
}
$('.bottomSquareX li').removeClass('select')
if(totalData.isExitClass){
// 删除
tableResultList = tableResultList.filter(v=>!storageArr.includes(v))
}else{
// 添加
tableResultList = tableResultList.concat(storageArr)
}
tableResultList = uniq(tableResultList)
for (let i = 0; i < tableResultList.length; i++) {
let item = tableResultList[i]
if(!item)return false
let data = JSON.parse(item)
$('.bottomSquareX .row').eq(data.y).find('li').eq(data.x).addClass('select')
}
totalData = {}
// console.log(resultList)
sendData()
})
return false;
})
// 超出区域直接置空
$('.totalSquareX').on('mouseleave',function () {
totalData = {}
})
// 移动
$('.totalSquareX li').on('mousemove',function moveOLi() {
if(!totalData.firstClick)return false
totalData.isMove = true
totalData.end = Number($(this).attr('x'))
let start = Math.min(totalData.start,totalData.end)
let end = Math.max(totalData.start,totalData.end)
// if(!totalData.isExitClass){
// // 新增后退
// totalData.moveList.forEach(v=>{
// // 排除掉已经存在的数据
// if(resultList.includes(v)) return false
// $('.totalSquareX li').eq(v).removeClass('select')
// })
// }else{
// // 删除后退
// resultList.forEach(v=>{
// if(totalData.moveList.includes(v)) return false
// $('.totalSquareX li').eq(v).addClass('select')
// })
// }
totalData.moveList = []
for (let i = start; i <= end; i++) {
$('.totalSquareX li').eq(i)[
totalData.isExitClass?'removeClass':'addClass'
]('select')
totalData.moveList.push(i)
}
})
// ----- 底部-逻辑处理-end -------------
// ----- 大表格-逻辑处理-start -------------
$('.bottomSquareX .row li').on('mousedown',function () {
tableData.isExitClass =
jQuery一星期时间段选择插件.zip
版权申诉
182 浏览量
2023-10-09
23:51:54
上传
评论
收藏 37KB ZIP 举报
jQuery一星期时间段选择插件.zip （3个子文件） 
jiaoben7875 js 
jquery.min.js 91KB css style.css 2KB
index.html 14KB资源评论
码云笔记
- 粉丝: 2w+
- 资源: 5851
