JavaScript：字符串+日期对象+行走的方块+汉字显示当前日期+秒表的制作
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript：字符串+日期对象+行走的方块+汉字显示当前日期+秒表的制作相关的知识，希望对你有一定的参考价值。
javascript：字符串+日期对象
字符串
var str="aaa";
var str=new String("aa");
console.log(str);
var str1="aaa";
//字符串的length是只读属性，不能修改
//str1.length
字符串本身是不能被修改
console.log(str1[0])
str1[0]="b";//无法修改
console.log(str1)//aaa
指定获取Unicode编码
var str = "0Abcdef";
console.log(str.charAt(2))//指定下标
console.log(str.charCodeAt(0));//获取指定元素的Unicode编码
连缀
console.log(Array(75).fill(1).map(function (t, i) return i));
var str = Array(75).fill(1).map(function (t, i)
// 0~74
return i
).filter(function (t, i)
//过滤出符合这个条件的unicode值
return (i >= 0 && i < 10) || (i >= 17 && i < 43) || (i >= 49 && i < 75);
).map(function (t)
//返回转换成这个unicode值所对应的字符
return String.fromCharCode(t+48)
).sort(function()
//返回这个乱序的字符数组
return Math.random()-0.5;
).join("").slice(0,4);
//转换为字符串，最后截取四位输出
console.log(str)
| 方法 | 描述 |
|---|---|
| search | 查找元素的下标 比indexOf更强大，因为它可以使用正则 |
| match | 查找元素 应用于正则，大量使用 |
| substring(0,4) | 没有负数，使用负数代表0之前 |
| str.substring(6,2) | 可以从右到左获取 |
| str.substr(2,3) | 从下标几开始获取长度多少的字符串 |
| replace | 主要使用于正则 |
| str.replace(查找的字符,替换的字符); | str.replace(查找的字符,function(查找到元素,(群组1…),查找到元素的下标，原字符串) return 要替换的内容 ); |
split 适用于正则
var url="http://localhost/news/a/index.html";
var str=url.split("/").pop();
console.log(str)//index.html
模拟重构jquery获取网址参数
var url="https://www.163.com/news/index.html?a=1&b=2&c=3";
function getQuery(url)
var index=url.indexOf("?");
var str=url.slice(index+1);//a=1&b=2&c=3
var arr=str.split("&");//['a=1','b=2','c=3']
var o=;
for(var i=0;i<arr.length;i++)
var arr1=arr[i].split("=");//['a','1']
var key=arr1[0];
var value=arr1[1];
o[key]=isNaN(value) ? value : Number(value);
return o
function getQuery(url)
return url.split("?")[1].split("&").reduce(function(v,t)
var arr=t.split("=");
v[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
return v;
,);
| 方法 | 功能 |
|---|---|
| str.toUpperCase() | 大写 |
| str.toLowerCase() | 小写 |
| str.trim() | 去掉首尾空格 |
| str.trimEnd() | 去除头部空额 |
| str.trimStart() | 去除尾部空格 |
| str.repeat(3) | 重复 |
| str.padEnd(2,0) | 判断字符串的长度是否是2位，如果不足两位，后方补0 |
| str.padStart(4,0) | 判断字符串的长度是否是4位，如果不足两位，前方补0 |
| str.startsWith(“a”) | 从第一位开始起始是不是a |
| str.startsWith(“b”,1) | 从哪一位开始算起始 |
| str.endsWith(“f”) | 判断f是不是最尾部元素 |
| str.endsWith(“e”,5) | 判断第五位之前是不是e结尾 |
日期对象
创建日期对象
输出时会被自动隐式转换Wie字符串
var date=new Date();
| 方法 | 功能 |
|---|---|
| date.getFullYear(); | 年 |
| date.getMonth(); | 0-11 |
| date.getDate(); | 日期 |
| date.getDay(); | 星期0-6 |
| date.getHours(); | 小时 |
| date.getMinutes(); | 分钟 |
| date.getSeconds(); | 秒 |
| date.getMilliseconds() | 毫秒 |
| set的一套 | 设置时间 |
| date.setHours(18); | 设置小时 |
| Date.now() | 时间戳 |
| date.getTime() | 1970.1.1到现在的毫秒数 |
汉字显示日期时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<script>
var div;
var arr=["零","一","二","三","四","五","六","七","八","九"];
init()
function init()
div = document.getElementById('div1');
setInterval(animation,500);
function animation()
var date = new Date();
var str = ''
str += '公元'+getYear(date.getFullYear())+'年'
str += arr[date.getMonth()+1]+'月'
str += getCN(date.getDate())+'日'
str += date.getDay() === 0 ? " 星期日 ":" 星期"+arr[date.getDay()]+' '
str += getCN(date.getHours())+'点'
str += getCN(date.getMinutes(),true)+'分钟'
str += getCN(date.getSeconds(),true)+'秒'
str += getCN(date.getMilliseconds(),true)+'毫秒'
div.innerHTML = str
/* 获取年份，根据元素特性取值累计字符串 */
function getYear(num)
return num.toString().split('').reduce(function(v,t)
return v+arr[t]
,'');
function getCN(num,bool)
num=~~num;
// 真值缩小
if(num<0 || num>1000) throw new RangeError("错误的数值")
if(num<10) return bool ? "零"+arr[num] : arr[num];
if(num===10) return "十";
if(num<100)
if(num%10===0) return arr[num/10]+"十";
if(num<20) return "十"+arr[num%10];
return arr[~~(num/10)]+"十"+arr[num%10];
if(num%100===0)return arr[num/100]+"百";
if(num%100<10) return arr[~~(num/100)]+"百零"+arr[num%100];
if(num%10===0)return arr[~~(num/100)]+"百"+arr[num/10%10]+"十";
return arr[~~(num/100)]+"百"+arr[~~(num/10)%10]+"十"+arr[num%10];
</script>
</body>
</html>
秒表制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1">00:00:00</div>
<button id="startBn">开始</button>
<button id="stopBn">停止</button>
<script>
var div1,startBn,stopBn,startTime;
var bool=false, prevTime=0;
init();
function init()
div1=document.getElementById("div1");
startBn=document.getElementById("startBn");
stopBn=document.getElementById("stopBn");
startBn.onclick=clickHandler;
stopBn.onclick=clickHandler;
setInterval(animation,1);
function clickHandler()
if(this===startBn)
if(startBn.innerHTML==="开始")
startBn.innerHTML="暂停"
startTime=Date.now();
bool=true;
else
startBn.innerHTML="开始";
bool=false;
prevTime+=Date.now()-startTime;
else
div1.innerHTML="00:00:00";
prevTime=0;
bool=false;
startBn.innerHTML="开始";
function animation()
if(!bool) return;
var num=Date.now()-startTime+prevTime;
var str="";
var m=(~~(num/1000/60));
var s=~~((num-m*1000*60)/1000);
str+=m.toString().padStart(2,0)+":";
str+=s.toString().padStart(2,0)+":";
str+=(~~((num%1000)/10)).toString().padStart(2,0);
div1.innerHTML=str;
</script>
</body>
</html>
点击事件行走的方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
height: 50px;
width: 50px;
background-color: red;
text-align: center;
line-height: 50px;
position: relative;
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<script>
var dis;
init();
function init()
dis = Array.from(document.querySelectorAll('div'));
for(var i=0;i<dis.length;i++)
dis[i]JavaScript 之日起对象（转）