我想让它根据日期横向滚动

Question

我有这个脚本的问题，我想它滚动横向基于天，我该怎么办?

var d = new Date();
var weekday=new Array(7);
weekday[0]="lunedì";
weekday[1]="martedì";
weekday[2]="mercoledì";
weekday[3]="giovedì";
weekday[4]="venerdì";
weekday[5]="sabato";
weekday[6]="domenica";
if(d == weekday[1]) { $( ".table-responsive" ).scrollLeft( 300 );}
else if (d == weekday[1]) { $( ".table-responsive" ).scrollLeft( 300 );}
else if (d == weekday[2]) { $( ".table-responsive" ).scrollLeft( 450 );}
else if (d == weekday[3]) { $( ".table-responsive" ).scrollLeft( 600 );}
else if (d == weekday[4]) { $(".table-responsive" ).scrollLeft( 750 );}
else if (d == weekday[5]) { $(".table-responsive" ).scrollLeft( 900 );}
else if (d == weekday[6]) { $(".table-responsive" ).scrollLeft( 150 );}

Answer 1

欢迎使用Stack Overflow。您可能想查看getDay():

getDay()方法根据当地时间返回指定日期的星期几，其中0表示星期日。具体日期参见Date.prototype.getDate()

考虑下面的例子:

$(function() {
var d = new Date();
console.log(d.toString(), "Day: " + d.getDay());
var weekdays = [
"lunedì",
"martedì",
"mercoledì",
"giovedì",
"venerdì",
"sabato",
"domenica"
];
function toUpperFirst(str) {
return str.substring(0, 1).toUpperCase() + str.substring(1);
}
$.each(weekdays, function(i, day) {
$("<th>").html(toUpperFirst(day)).appendTo($(".table-responsive thead tr").eq(0));
});
var view = $(".viewport");
switch (d.getDay()) {
case 0:
// Sunday / Domeniza
console.log("Scroll to Domeniza");
view.scrollLeft(900);
break;
case 1:
// Monday / Lunedi
console.log("Scroll to Lunedi");
view.scrollLeft(0);
break;
case 2:
// Tuesday / Martedi
console.log("Scroll to Martedi");
view.scrollLeft(150);
break;
case 3:
// Wednesday / Mercoledi
console.log("Scroll to Mercoledi");
view.scrollLeft(300);
break;
case 4:
// Thursday / Giovedi
console.log("Scroll to Giovedi");
view.scrollLeft(450);
break;
case 5:
// Friday / Venerdì
console.log("Scroll to Venerdi");
view.scrollLeft(600);
break;
case 6:
// Saturday / Sabato
console.log("Scroll to Sabato");
view.scrollLeft(750);
break;
}
view.scroll(function(event) {
console.log($(this).scrollLeft());
});
});

.viewport {
width: 150px;
overflow: auto;
}
.table-responsive {
table-layout: fixed;
width: 1050px
}
.table-responsive th {
width: 150px;
}
.table-responsive td {
height: 240px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewport">
<table class="table-responsive">
<thead>
<tr></tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>150</td>
<td>300</td>
<td>450</td>
<td>600</td>
<td>750</td>
<td>900</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
</div>

Answer 2

如果您真的希望d是一个日期名称，您可以使用一个对象来查找滚动位置。

由名称:

const dayName = 'giovedì';
const positions = {
domenica: 150,
lunedì: 300,
martedì: 300,
mercoledì: 450,
giovedì: 600,
venerdì: 750,
sabato: 900
};
$( ".table-responsive" ).scrollLeft(positions[dayName]);

按号

const dayNumber = 0;
const positions = [300, 300, 450, 600, 750, 900, 150];
$( ".table-responsive" ).scrollLeft(positions[dayNumber]);

创建一个函数并使用默认值:

按姓名或号码

const positions = {
domenica: 150,
lunedì: 300,
martedì: 300,
mercoledì: 450,
giovedì: 600,
venerdì: 750,
sabato: 900
};
const positionsByNumber = Object.keys(positions).map(k => positions[k]);
const defaultPosition = positionsByNumber[0];
/**
* n name of weekday or number
*/ 
const setTablePosition = n => {
const position = (
positions[n] || 
positionsByNumber[n] ||
defaultPosition
);
$( ".table-responsive" ).scrollLeft(position);
return position;
}

结果:

setTablePosition('mercoledì'); // 450
setTablePosition('fubar'); // 300
setTablePosition(0); // 150
setTablePosition(12); // 300
// And by users clock
setTablePosition((new Date()).getDay());