如何实现自定义时间自己跳动
时间:2019-01-19
本文章向大家介绍如何实现自定义时间自己跳动，主要包括如何实现自定义时间自己跳动使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
如何实现自定义时间自己跳动
作者：陈智鸿
撰写时间：2019-01-19
开发工具与关键技术：VS2015、C#、JS
CSS样式
<style>
.btn{
padding:5px;
font-size:20px;
color:#fff;
background:#A9A9A9;
}
#Input{
border:1px, solid;
font-size:16px;
border-radius:5px;
height:30px;
width:200px;
text-align:center;
}
#modClock{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.5);
display:none;
}
.float-con{
width:400px;
height:200px;
background:#fff;
margin:auto;
margin-top:200px;
}
.float-header{
text-align:center;
border:solid,#eee;
position:relative;
}
h3{
display:inline-block;
}
#close{
cursor:pointer;
font-size:20px;
color:#A9A9A9;
position:absolute;
top:25%;
right:10px;
}
.IC{
display:block;
width:100%;
height:2px;
background:#eee;
}
.float-body{
padding:20px 5px;
text-align:center;
}
.float-body input{
width:50px;
text-align:right;
border:1px,solid;
border-radius:5px;
}
#Buttons{
padding:10px;
}
#Buttons button{
margin:20px;
padding:5px 10px;
font-size:16px;
color:#fff;
background:#A9A9A9;
}
</style>
HTML代码
<div>
<button type="button" class="btn" id="Button1">设置时间</button>
<input id="Input" readonly />
</div>
<div id="modClock">
<div class="float-con">
<div class="float-header">
<h3>时间选择</h3>
<span id="close" onclick="Close()">X</span>
</div>
<i class="IC"></i>
<div class="float-body">
<input type="number" id="Input1" onclick="Input1()" onchange="Input1()" value="2000"/>-
<input type="number" id="Input2" onclick="Input2()" onchange="Input2()" value="01"/>-
<input type="number" id="Input3" onclick="Input3()" onchange="Input3()" value="01"/>
<input type="number" id="Input4" onclick="Input4()" onchange="Input4()" value="00" />:
<input type="number" id="Input5" onclick="Input5()" onchange="Input5()" value="00" />:
<input type="number" id="Input6" onclick="Input6()" onchange="Input6()" value="00" />
<div id="Buttons">
<button type="button" onclick="Button2()">设置当前时间</button>
<button type="button" onclick="Button3()">确定</button>
<button type="button" onclick="Close()">取消</button>
</div>
</div>
</div>
</div>
JS代码
<script>
//设置时间按钮的点击事件
var Button1 = document.getElementById('Button1');
Button1.onclick=function(){
document.getElementById('modClock').style.display = 'block';
}
//设置当前时间按钮的点击事件
function Button2() {
getNowFormatDate();
}
//确定按钮的点击事件
function Button3() {
var Input1 = document.getElementById("Input1").value;
var Input2 = document.getElementById("Input2").value;
var Input3 = document.getElementById("Input3").value;
var Input4 = document.getElementById("Input4").value;
var Input5 = document.getElementById("Input5").value;
var Input6 = document.getElementById("Input6").value;
var enddate = Input1 + "-" + Input2 + "-" + Input3 + "\t" + Input4 + ":" + Input5 + ":" + Input6;
document.getElementById("Input").value = enddate;
Close();
OneselfBounce();
}
//取消按钮的点击事件
function Close() {
document.getElementById('modClock').style.display = 'none';
}
//获取当前时间
function getNowFormatDate() {
var date = new Date(); //声明一个日期内置对象
var seperator1 = "-";//声明符号
var seperator2 = ":";//声明符号
var year = date.getFullYear();//年
var month = date.getMonth() + 1;//月
var strDate = date.getDate();//日
var hours = date.getHours();//小时
var Minute = date.getMinutes();//分
var Second = date.getSeconds();//秒
if (month >= 1 && month <= 9) {//月
month = "0" + month;//01
}
if (strDate >= 1 && strDate <= 9) {//日
strDate = "0" + strDate;
}
if (hours >= 1 && hours <= 9) {//小时
hours = "0" + hours;//01
}
if (Minute >= 0 && Minute <= 9) {//分
Minute = "0" + Minute;//01
}
if (Second >= 0 && Second <= 9) {//秒
Second = "0" + Second;//01
}
document.getElementById("Input1").value = year;//年
document.getElementById("Input2").value = month;//月
document.getElementById("Input3").value = strDate;//日
document.getElementById("Input4").value = hours;//时
document.getElementById("Input5").value = Minute;//分
document.getElementById("Input6").value = Second;//秒
}
//设置年文本框的值
function Input1() {
var Input1 = document.getElementById('Input1').value;
//console.log(Input1);
if (Input1 > 0) {
//console.log(Input1.toString().length);
if (Input1.toString().length == 1) {
document.getElementById('Input1').value = "000" + Input1;
} else if (Input1.toString().length == 2) {
document.getElementById('Input1').value = "00" + Input1;
} else if (Input1.toString().length == 3) {
document.getElementById('Input1').value = "0" + Input1;
} else {
document.getElementById('Input1').value = Input1;
}
} else {
document.getElementById('Input1').value = "0001";
alert("年份不能少于0001");
}
}
//设置月文本框的值
function Input2() {
var Input1 = document.getElementById('Input1').value;
var Input2 = document.getElementById('Input2').value;
var Inputs3 = document.getElementById('Input3').value;
if (Input1 != "") {
if (Input2 > 0) {
if (Input2 < 12) {
if (Inputs3 != "") {
Input3();
}
if (Input2.toString().length == 1) {
document.getElementById('Input2').value = "0" + Input2;
}
} else {
document.getElementById('Input2').value = "12";
alert("月份不能大于12");
}
} else {
document.getElementById('Input2').value = "01";
alert("月份不能少于1");
}
} else {
alert("年份不能为空");
}
}
//设置日文本框的值
function Input3() {
var Input1 = document.getElementById('Input1').value;
var Input2 = document.getElementById('Input2').value;
var Input3 = document.getElementById('Input3').value;
if (Input1 != "") {
if (Input2 != "") {
if (Input3 > 0) {
if ((Input1 % 400 == 0) || (Input1 % 4 == 0 && Input1 % 100 != 0)) {//闰年
if (Input3.toString().length == 1) {
document.getElementById('Input3').value = "0" + Input3;
}
if (Input2 == 2)
{
if (Input3 > 29)//判断日期是否大于29
{
document.getElementById('Input3').value = "29";
alert("闰年2月份只有29天");
}
} else if (Input2 == 1 || Input2 == 3 || Input2 == 5 || Input2 == 7 || Input2 == 8 || Input2 == 10 || Input2 == 12) {
if (Input3 > 31)//判断日期是否大于31
{
document.getElementById('Input3').value = "31";
alert(Input2 + "月份只有31天");
}
} else {
if (Input3 > 30)//判断日期是否大于30
{
document.getElementById('Input3').value = "30";
alert(Input2 + "月份只有30天");
}
}
} else {
if (Input3.toString().length == 1) {
document.getElementById('Input3').value = "0" + Input3;
}
if (Input2 == 2) {
if (Input3 > 28)//判断日期是否大于29
{
document.getElementById('Input3').value = "28";
alert("平年2月份只有28天");
}
} else if (Input2 == 1 || Input2 == 3 || Input2 == 5 || Input2 == 7 || Input2 == 8 || Input2 == 10 || Input2 == 12) {
if (Input3 > 31)//判断日期是否大于31
{
document.getElementById('Input3').value = "31";
alert(Input2 + "月份只有31天");
}
} else {
if (Input3 > 30)//判断日期是否大于30
{
document.getElementById('Input3').value = "30";
alert(Input2 + "月份只有30天");
}
}
}
} else {
document.getElementById('Input3').value = "01";
alert("日期不能少于1");
}
} else {
alert("月份不能为空");
}
} else {
alert("年份不能为空");
}
}
//设置时文本框的值
function Input4() {
var Input4 = document.getElementById('Input4').value;
if (Input4 > -1) {
if (Input4 < 24) {
if (Input4.toString().length == 1) {
document.getElementById('Input4').value = "0" + Input4;
}
} else {
document.getElementById('Input4').value = "23";
alert("小时不能大于23");
}
} else {
document.getElementById('Input4').value = "00";
alert("小时不能为负数");
}
}
//设置分文本框的值
function Input5() {
var Input5 = document.getElementById('Input5').value;
if (Input5 > -1) {
if (Input5 < 60) {
if (Input5.toString().length == 1) {
document.getElementById('Input5').value = "0" + Input5;
}
} else {
document.getElementById('Input5').value = "59";
alert("分钟不能大于59");
}
} else {
document.getElementById('Input5').value = "00";
alert("分钟不能为负数");
}
}
//设置秒文本框的值
function Input6() {
var Input6 = document.getElementById('Input6').value;
if (Input6 > -1) {
if (Input6 < 60) {
if (Input6.toString().length == 1) {
document.getElementById('Input6').value = "0" + Input6;
}
} else {
document.getElementById('Input6').value = "59";
alert("秒钟不能大于59");
}
} else {
document.getElementById('Input6').value = "00";
alert("秒钟不能为负数");
}
}
var time;
function OneselfBounce() {
//执行方法前先移除
clearInterval(time);
var InputS = document.getElementById("Input").value;//获取时间
var List = InputS.toString().split("\t");//分割时间和日期
var year = List[0].split("-")[0];//提取年
var month = List[0].split("-")[1];//提取月
var date = List[0].split("-")[2];//提取日
var hour = List[1].split(":")[0];//提取小时
var minute = List[1].split(":")[1];//提取分钟
var second = List[1].split(":")[2];//提取秒
time = setInterval(function () {
second++;
if (second == 60) {
second = 0;
minute++;
if (minute == 60) {
minute = 0;
hour++;
if (hour == 24) {
hour = 0;
date++;
if (date >= 28) {
if ((year % 400 == 0) || (year % 4 == 0 && year % 100 != 0)) {//闰年
if (month == 2) {
if (date > 29)//判断日期是否大于29
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
} else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (date > 31)//判断日期是否大于31
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
} else {
if (date > 30)//判断日期是否大于30
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
}
} else {
if (month == 2) {
if (date > 28)//判断日期是否大于29
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
} else if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
if (date > 31)//判断日期是否大于31
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
} else {
if (date > 30)//判断日期是否大于30
{
date = 1;
month++;
if (month > 12) {
month = 1;
year++;
}
}
}
}
}
}
}
}
if (second.toString().length == 1) {//秒的长度为1时在前面加0
second = "0" + second;
}
if (minute.toString().length == 1) {//分的长度为1时在前面加0
minute = "0" + minute;
}
if (hour.toString().length == 1) {//时的长度为1时在前面加0
hour = "0" + hour;
}
if (date.toString().length == 1) {//天的长度为1时在前面加0
date = "0" + date;
}
if (month.toString().length == 1) {//月的长度为1时在前面加0
month = "0" + month;
}
if (year.toString().length == 1) {//年的长度为1时在前面加000
year = "000" + year;
}
if (year.toString().length == 2) {//年的长度为2时在前面加00
year = "00" + year;
}
if (year.toString().length == 3) {//年的长度为3时在前面加0
year = "0" + year;
}
var enddate = year + "-" + month + "-" + date + "\t" + hour + ":" + minute + ":" + second;
document.getElementById("Input").value = enddate;
}, 1000);
}
</script>
页面截图显示效果
点击设置时间打开时间选择模态窗体
打开时间选择模态窗体可以自己设置时间，也可以设置当前时间，设置好时间后点击确定，关闭模态窗体，把设置好的时间回填到页面的文本框上
回填之后调用定时器让它一秒钟执行一次
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android属性动画实现图片从左到右逐渐消失
- Android实现清除应用缓存功能
- VBlog的代码结构,使用vue-element,vue-vant组件开发的纯前端博客
- Android仿微信视屏悬浮窗效果
- Android仿QQ可拉伸头部控件
- android使用surfaceview＋MediaPlayer播放视频
- Android性能之冷启动优化详析
- Android自定义View实现地铁显示牌效果
- Android自定义控件实现望远镜效果
- Android自定义View实现点赞控件
- Android自定义View实现投票进度条
- 国外Reservo一款非常棒的商业图床程序
- 详解Android v1、v2、v3签名(小结）
- Android Studio项目适配AndroidX(Android 9.0)的方法步骤
- Android自定义View实现微信语音界面