js显示剩下的时间

2023-03-03 17:30:01JavaScript09

js显示剩下的时间,第1张

<html>

<head>

function getTime() {//js函数，定期执行的函数主体

var dateTime = new Date()//新建系统时间的对象

var hour = formatTime(dateTime.getHours())//获取小时并格式化，格式化函数formatTime()，下同

var minute = formatTime(dateTime.getMinutes())//获取分

var second = formatTime(dateTime.getSeconds())//获取秒

// var millisecond = dateTime.getMilliseconds()//获取毫秒

var code = "当前时间是：" + hour + ":" + minute + ":" + second//+ " " + millisecond//第一个div的内容(数字时钟)

var codeChinese = "当前时间是：" + formatChinese(hour) + "时" + formatChinese(minute) + "分" + formatChinese(second) + "秒"//第二个div的内容(中文时钟)

document.getElementById("divTime").innerHTML = code//第一个div内容填充

document.getElementById("divTimeChinese").innerHTML = codeChinese//第二个div内容填充

document.getElementById("monDigitalClock").innerHTML = makeMonCode(hour.toString() + ":" + minute.toString() + ":" + second.toString()) + blockEmpty()//+ makeMonCode(millisecond.toString())

updateLatestTime()//更新剩余时间

}

function formatTime(num) {//格式化数字，小于10时在数字前添加0

if (num < 10) {

return "0" + num

}

else {

return num

}

function formatChinese(num) {//中文格式处理

var str = String(num)

if (str.length == 1) {//一位数的情况，直接返回中文

return formatSingleNumber(str)

}

else {//两位数的情况

var mid = "十"

var top = str.substr(0, 1)//第一位

var btn = str.substr(1, 2)//第二位

return (formatSingleNumber(top) + mid + formatSingleNumber(btn)).replace("零十", "零").replace("十零", "十").replace("零零", "零").replace("一十", "十")//使用formatSingleNumber函数转换成中文并将不符合中文数字表示方法的替换一下

}

function formatSingleNumber(num) {//单个数字转化成中文

return num.replace("1", "一").replace("2", "二").replace("3", "三").replace("4", "四").replace("5", "五").replace("6", "六").replace("7", "七").replace("8", "八").replace("9", "九").replace("0", "零")

}

setInterval("getTime()", 1000)//定时刷新，每毫秒刷新一次

//模拟时钟代码

function buidlPointArea(num) {//将数字对应的点阵拼接成图案

var code = "<div class='singleNumber'>"

for (var i = 1 i < 6 i++) {

for (var j = 1 j < 5 j++) {

code += createSinglePoint(i + "_" + j, num)

}

code += "</div>"

return code

}

function createSinglePoint(id, num) {//数字对应的黑点

var array0 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3")//数字0的点阵，下同

var array1 = new Array("1_3", "2_3", "3_3", "4_3", "5_3")

var array2 = new Array("1_1", "1_2", "1_3", "2_3", "3_1", "3_2", "3_3", "4_1", "5_1", "5_2", "5_3")

var array3 = new Array("1_1", "1_2", "1_3", "2_3", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3")

var array4 = new Array("1_1", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_3", "5_3")

var array5 = new Array("1_1", "1_2", "1_3", "2_1", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3")

var array6 = new Array("1_1", "1_2", "1_3", "2_1", "3_1", "3_2", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3")

var array7 = new Array("1_1", "1_2", "1_3", "2_3", "3_3", "4_3", "5_3")

var array8 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_1", "4_3", "5_1", "5_2", "5_3")

var array9 = new Array("1_1", "1_2", "1_3", "2_1", "2_3", "3_1", "3_2", "3_3", "4_3", "5_1", "5_2", "5_3")

var numArr = new Array()

numArr[0] = array0

numArr[1] = array1

numArr[2] = array2

numArr[3] = array3

numArr[4] = array4

numArr[5] = array5

numArr[6] = array6

numArr[7] = array7

numArr[8] = array8

numArr[9] = array9

var cls = "whitePoint"

for (var i = 0 i < numArr[num].length i++) {

if (id == numArr[num][i]) {

cls = "blackPoint"

}

return "<div id='" + id + "' class='" + cls + "'></div>"

}

function blockEmpty() {//空格代码

return "<div class='singleNumber'></div>"

}

function blockM() {//冒号的代码

var code = ""

code += "<div class='singleNumber'><div class='whitePoint'></div>"

code += "<div class='whitePoint'></div>"

code += "<div class='blackPoint'></div>"

code += "<div class='whitePoint'></div>"

code += "<div class='blackPoint'></div>"

code += "<div class='whitePoint'></div>"

code += "<div class='whitePoint'></div></div>"

return code

}

function makeMonCode(totalCode) {//生成模拟的数字时钟代码

var finalCode = ""

for (var i = 0 i < totalCode.length i++) {//每个字符分别转换

if (isNaN(totalCode[i])) {//非数字字符，例子中只有冒号

if (totalCode[i] == ":") {

finalCode += blockM()//冒号的代码，用blockM()函数生成

}

else {

finalCode += buidlPointArea(totalCode[i])//数字的代码，用buildPointArea()函数生成

}

return finalCode

}

function updateLatestTime() {//更新剩余时间

var setHour = document.getElementById("sltHour").value//获取选择的小时值

var setMin = document.getElementById("sltMin").value//获取选择的分值

var setSecond = document.getElementById("sltSecond").value//获取选择的秒值

var time = new Date()//获取系统时间

var nowHour = time.getHours()//当前时间小时值

var nowMin = time.getMinutes()//当前时间分值

var nowSecond = time.getSeconds()//当前时间秒值

var viewHour = setHour - nowHour//剩余小时

var viewMin = setMin - nowMin//剩余分钟

var viewSecond = setSecond - nowSecond//剩余秒

if (viewSecond < 0) {//剩余秒小于0时，借位

viewSecond += 60

viewMin -= 1

}

if (viewMin < 0) {//剩余分小于0时，借位

viewMin += 60

viewHour -= 1

}

if (viewHour < 0) {//剩余小时小于0时，借位

viewHour += 24

}

document.getElementById("divLatestTime").innerHTML = "剩余时间为：" + viewHour + "时" + viewMin + "分" + viewSecond + "秒"//填充

if (viewHour == 0 && viewMin == 0 && viewSecond == 0) {//到点提示

alert("到点了！")

}

function createSelect() {//生成选择框代码

var code = ""

code += "请选择闹钟时间：<select id='sltHour' onchange='updateLatestTime()'>"

for (var i = 1 i < 25 i++) {

code += "<option value='" + i + "'>" + i + "</option>"

}

code += "</select>时"

code += "<select id='sltMin' onchange='updateLatestTime()'>"

for (var k = 1 k < 61 k++) {

code += "<option value='" + k + "'>" + k + "</option>"

}

code += "</select>分"

code += "<select id='sltSecond' onchange='updateLatestTime()'>"

for (var j = 1 j < 61 j++) {

code += "<option value='" + j + "'>" + j + "</option>"

}

code += "</select>秒"

document.getElementById("divAlert").innerHTML = code

}

</script>

body {

background-color: #FFFFFF

}

.clsTime {

width: 600px

height: 50px

font-size: 30px

margin-left: auto

margin-right: auto

margin-top: 100px

}

.whitePoint {

width: 10px

height: 10px

background-color: #FFFFFF

margin: 0px

padding: 0px

float: left

}

.blackPoint {

width: 10px

height: 10px

background-color: #000000

margin: 0px

padding: 0px

float: left

}

.clsMonDigitalClock {

margin-left: auto

margin-right: auto

width: 480px

height: 50px

background-color: #FFFFFF

}

.singleNumber {

width: 40px

height: 50px

float: left

font-size: 8px

}

.clsAlert {

width: 400px

margin-top: 50px

margin-left: auto

margin-right: auto

}

.clsLatestTime {

width: 400px

margin-top: 50px

margin-left: auto

margin-right: auto

}

</style>

</head>

<div id="divTime" class="clsTime">loading....</div>

<div id="divTimeChinese" class="clsTime">loading....</div>

</body>

</html>

之前做着玩的，有你说到的功能，有兴趣看看。代码存为html即可。

计算文本域剩余字数

function

displaySpareNumber(_this,size)

{

var

spareNumber=document.getElementById("spareNumber")

//汉字长度

var

len=_this.value.replace(/[^\x00-\xff]/gi,'xx').length

var

snum=parseInt(size)-len

spareNumber.value=snum

if(snum(size/2))

{

_this.value=_this.value.substring(0,size/2)

}

else

{

_this.value=_this.value.substring(0,size-(len-_this.value.length))

}

else

{

_this.value=_this.value.substring(0,size)

}

spareNumber.value=0

return

}

剩

注：

displaySpareNumber(this,10)

与

<input

id="spareNumber"

name="spareNumber"

value="10"

size="1"/>

中的10是你定义的内容长度.

[Ctrl+A

全选

注:如需引入外部Js需刷新才能执行]

1.等价于Function.apply()，传入数组，会被迭代为函数的参数

2.在构造时（此时传值不同于apply，因为它调用的是Call而不是Construct）

3.构造字面量数组/对象

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：英雄联盟手游怎么样才可以在电脑上玩？

# 下一篇：为什么买车位，开发商要求要交现金不能刷卡？？

推荐阅读

热门文章

最新发布

标签列表

js显示剩下的时间

给您推荐相同类型的内容：