js 时间时分秒选择

最新推荐文章于 2024-08-16 18:12:14 发布

xiaoyueyue_2017

最新推荐文章于 2024-08-16 18:12:14 发布

阅读量2.5k

点赞数

分类专栏：原生js

本文链接：https://blog.csdn.net/xiaoyueyue_2017/article/details/77373802

版权

原生js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>

<body ng-app="app" ng-controller="myCtrl">
<div class="form-controls col-sm-9">
<select name="city" id="city" class="input-text"
ng-model="city"
ng-options="o.id as o.title for o in optionsData"
ng-change="sct(city)"
>
<option value="">--请选择--</option>
</select>
</div>

每天上课节数：<input type="text" id="ipt" ng-model="syllabusNum" ng-change="pitchNum()" />

<p>每节课上课时间
<div class="form-controls col-sm-9" id="times" style="position: relative;height: 60px;">

</div>
</p>

<button ng-click="btn()">提交</button>

<script src="angular.js"></script>
<script src="jquery.min.js"></script>
<script>
var app = angular.module("app", [])
app.controller("myCtrl", ["$scope", function($scope) {
//根据课程添加每天上几节课每节课几点开始上几点结束

//例后台返回的课程课时
$scope.optionsData = [{
created: "1494300476",
description: "少儿英语少儿英语少儿英语少儿英语少儿英语",
duration_every_hour: "120", //一节课时间
id: "1",
teacher_name: null,
title: "少儿英语",
total_hour: "60" //总共多少节课
}, {
created: "1502156720",
description: "这是对于古代文言文的学习",
duration_every_hour: "60",
id: "12",
teacher_name: null,
title: "古文学",
total_hour: "5"
}, {
created: "1502843940",
description: null,
duration_every_hour: "40",
id: "14",
teacher_name: null,
title: "大语文",
total_hour: "50"
}]
//监听课程的变化
$scope.sct=function(id){
console.log(id)
$("#times").empty(); //移除元素的内容
$scope.syllabusNum =""
addContents();
}
//时分秒换算成方法当清空times中的innerHTML后重新调用
addContents = function() {
var str = "";
$("<div id=\"_contents\" style=\"padding:5px;background-color:#ECF7FE;font-size:12px;border:1px solid #CFD1D5;position:absolute;left:?px; top:26px; width:?px; height:?px;z-index:999;visibility:hidden\">").appendTo('#times');

str += "<select id=\"_hour\">";
for(var h = 0; h <= 23; h++) {
if(h >= 0 && h <= 9)
str += "<option value=\"0" + h + "\">0" + h + "</option>";
else
str += "<option value=\"" + h + "\">" + h + "</option>";
}

str += "</select>时 <select id=\"_minute\">";
for(var m = 0; m <= 59; m++) {
if(m >= 0 && m <= 9)
str += "<option value=\"0" + m + "\">0" + m + "</option>";
else
str += "<option value=\"" + m + "\">" + m + "</option>";

}
str += "</select>分 <input type=\"button\" οnclick=\"_select()\" value=\"\确定\" /> <input type=\"button\" οnclick=\"_clear()\" value=\"\清除\" /></div>";
$('#_contents').append(str);
}

//监听每天的上课节数添加对应的时间显示框（时分秒）添加到id为times中
var _fieldname, timeend;
$scope.pitchNum = function() {
console.log($scope.syllabusNum);
if($scope.city==""||$scope.city==null||$scope.city==undefined){
alert("请先选择课程");
$scope.syllabusNum="";
return false;
}

$("#times").empty(); //在添加时间选择之前先移除元素的内容
addContents();
var timesNum = parseInt($scope.syllabusNum); //将string 转成 number类型
var timeIpt = '';

for(var i = 0; i < timesNum; i++) {
console.log(i);
//将time赋予不同的id 但id相似仅后面三位不同第一个为one 第二个为two以方便后面操作时获取id 当id为two时不获取one
timeIpt += "<div style='display: inline-block;float: left; margin-right: 5px;'>" +
'<input class="time" type="text" size="8" readonly οnclick="_SetTime(this)" id="timestar' + i + 'one" placeholder="上课时间"/>' +
'<input class="time" type="text" size="8" readonly οnclick="_SetTime(this)" id="timestar' + i + 'two" placeholder="下课时间"/>' +
"</div>"
}
$("#times").append(timeIpt)
}
//点击input 显示时间选择框
_SetTime = function(tt) {
console.log(tt);

_fieldname = tt; //点击的input
var ttop = tt.offsetTop; //TT控件的定位点高
var thei = tt.clientHeight; //TT控件本身的高
var tleft = tt.offsetLeft; //TT控件的定位点宽

while(tt == tt.offsetParent) {
ttop += tt.offsetTop;
tleft += tt.offsetLeft;
}
document.all._contents.style.top = ttop + thei + 4;
document.all._contents.style.left = tleft;
document.all._contents.style.visibility = "visible";
}
//时间格式化 yyyy-MM-dd hh:mm:ss:SSS
Date.prototype.Format = function(fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for(var k in o)
if(new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

_select = function() { //点击确定给input赋值
console.log(11);

_fieldname.value = document.all._hour.value + ":" + document.all._minute.value;

console.log(_fieldname.value);
document.all._contents.style.visibility = "hidden";
//当获取对象id包含one时给第二个对象赋值反之给第一个赋值
if(_fieldname.id.indexOf("one") > 0) {
//获取第二个对象
_fieldname = document.getElementById(_fieldname.id.substr(0, _fieldname.id.length - 3) + "two");

//创建日期
var date = new Date();
//将时跟分赋值给日期
date.setHours(Number(document.all._hour.value), Number(document.all._minute.value), 0, 0);
//分钟相加

for(var i = 0; i < $scope.optionsData.length; i++){
console.log($scope.optionsData[i])
if($scope.optionsData[i].id == $scope.city){

var star = $scope.optionsData[i].duration_every_hour
console.log(star)
}
}

date.setMinutes(date.getMinutes() + star);
console.log(date)
_fieldname.value = date.Format("hh:mm");
console.log(_fieldname.value);
document.all._contents.style.visibility = "hidden";
}

// else if(_fieldname.id.indexOf("two")>0){
// _fieldname = document.getElementById(_fieldname.id.substr(0,_fieldname.id.length-3)+"one");
//
// //创建日期
// var date = new Date();
// //将时跟分赋值给日期
// date.setHours(Number(document.all._hour.value),Number(document.all._minute.value),0,0);
// //分钟相加
// date.setMinutes(date.getMinutes()-45);
// console.log(date)
// console.log(date)
// _fieldname.value = date.Format("hh:mm");
// console.log(_fieldname.value);
// document.all._contents.style.visibility = "hidden";
//
// }

}

_clear = function() {
document.all._hour.value = document.all._minute.value = "00";
_fieldname.value = "";
document.all._contents.style.visibility = "hidden";
}

//document.onclick = function(e){
// e = window.event||e;
// obj = e.srcElement ? e.srcElement : e.target;
// if(obj.className != "time" && obj.id != "_contents" && obj.id != "_hour" && obj.id != "_minute" && obj.id != "_second"){
// document.all._contents.style.display = 'hidden';
// }
//
//};

//点击提交
$scope.btn = function() {

var arrTime;
var start = [];
var end = [];
//根据输入的节课数取出所的选时间放入两个数组中
for(var i = 0; i < $scope.syllabusNum; i++) {
var starhh = document.getElementById("timestar" + i + "one").value;
var endhh = document.getElementById("timestar" + i + "two").value;

console.log(starhh)
console.log(endhh)

start[i] = starhh;
end[i] = endhh;
start[i] += "";
end[i] += "";
console.log(start[i]);
console.log(end[i]);
if(start[i] == "" || start[i] == null) {
alert("上课时间选中不完整");
$scope.syllabusNum = "";
return false;
}
if(end[i] == "" || end[i] == null) {
alert("上课时间选中不完整");
$scope.syllabusNum = "";
return false;
}
}

arrTime = { start: start, end: end };
console.log(arrTime);

var timeN = [];
for(var i in arrTime.start) {
console.log(arrTime.start[i])
timeN.push({ start: arrTime.start[i], end: arrTime.end[i] })
}
if(timeN == "" || timeN == null || timeN == undefined) {
alert("请选择上课时间");
return false;
}
console.log(timeN); //每节课的时间段

}

}])
</script>
</body>

</html>