js之日期对象，定时器应用，Map集合，json
2018-01-18 03:48
597 查看
js一次性定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var n = 0;
/*
* 除了定时调用，还有一个延时调用
* 延时调用指函数不马上执行，而是过一段时间以后再执行
* 使用setTimeout()来设置延时调用，
* setTimeout()和setInterval()用法一样
* 也是需要两个参数：
* 1.回调函数
* 2.毫秒数
*
* 延时调用中的函数，只会执行一次。而定时调用会执行多次
* 定时调用和延时调用本质上没有区别，我们可以通过setTimeout()
* 实现setInterval()的功能，
* 也可以通过setInterval()实现setTimeout()的功能
*
*/
var timer = setTimeout(function(){
console.log(++n);
},1000);
//关闭延时调用
// clearTimeout(timer);
</script>
</head>
<body>
</body>
</html>js周期性定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
* 使h1中的内容，每隔1s修改一次
*/
//获取h1
var count = document.getElementById("count");
//修改h1中的内容
//count.innerHTML = 10;
/*
* 创建一个for循环，多次修改h1中的内容
* 循环语句执行的速度是非常非常的快的
*
*/
/*for(var i=0 ; i<10000 ; i++){
count.innerHTML = i;
alert("hello");
}*/
/*
* 定时调用
* - 定时调用指每间隔一段时间就调用指定的函数一次
* - 通过setInterval()来开启一个定时调用
* - 参数：
* 回调函数，该函数将会每间隔一段时间被调用一次
* 时间，函数调用相隔的时间（毫秒）
*
* - 返回值：
* 会返回一个number类型的值作为返回值，
* 这个number就是定时器的标识
*/
//定义一个变量来计数
var num = 1;
var timer = setInterval(function(){
count.innerHTML = num++;
//判断num
if(num == 11){
//关闭定时器
clearInterval(timer);
}
},1000);
//console.log(timer);
/*
* clearInterval()
* - 可以用来关闭一个定时器
* - 需要一个定时器的标识作为参数，需要用它来指定要关闭的定时器
*/
//clearInterval(timer);
};
</script>
</head>
<body>
<h1 id="count"></h1>
</body>
</html>替换背景
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<input type="button" value="换背景吧" />
<input type="button" value="停" />
<script>
var aBtn = document.getElementsByTagName('input');
var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
var num = 0;
var timer = null;
var oBody = document.body;
aBtn[0].onclick = function (){
clearInterval( timer ); // null、未定义
timer = setInterval(function(){
oBody.style.background = 'url('+ arrUrl[num] +')';
num++;
num%=arrUrl.length;
}, 1000);
};
aBtn[1].onclick = function (){
clearInterval( timer );
};
// oBody.style.background = 'url('+ arrUrl[num] +')';
</script>
</body>
</html>定时器应用
getComputedStyle获得内部样式<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 { width:100px; height:100px; background:red; position:absolute; top:50px; left:300px; }
</style>
</head>
<body>
<input id="btn1" type="button" value="往后" />
<input id="btn2" type="button" value="往前" />
<div id="div1"></div>
<script>
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oDiv = document.getElementById('div1');
oBtn1.onclick = function () {
clearInterval( oDiv.timer );
oDiv.timer = setInterval(function () {
var speed = parseInt(getComputedStyle( oDiv).left) + -12; // 步长
if ( speed < 10 ) {
speed = 10;
}
oDiv.style.left = speed + 'px';
if ( speed == 10 ) {
clearInterval( oDiv.timer );
}
}, 30);
};
oBtn2.onclick = function () {
clearInterval( oDiv.timer );
oDiv.timer = setInterval(function () {
var speed = parseInt(getComputedStyle( oDiv).left) + 12; // 步长
if ( speed > 800 ) {
speed = 800;
}
oDiv.style.left = speed + 'px';
if ( speed == 800 ) {
clearInterval( oDiv.timer );
}
}, 30);
};
</script>
</body>
</html>时间对象
new Date("month dd,yyyy,hh,mm,ss");getTime(); 返回从1970年1月1日0点0分0秒0毫秒到现在的毫秒数
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
系统时间对象
*/
// alert( new Date() ); // 当前系统的时间对象
// myTime typeof object
window.onload = function () {
var oBody = document.body;
setInterval( fnTime, 1000 );
fnTime ();
function fnTime () {
var myTime = new Date();
// number
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay();
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();
var str = '';
if( iWeek === 0 ) iWeek = '星期日';
if( iWeek === 1 ) iWeek = '星期一';
if( iWeek === 2 ) iWeek = '星期二';
if( iWeek === 3 ) iWeek = '星期三';
if( iWeek === 4 ) iWeek = '星期四';
if( iWeek === 5 ) iWeek = '星期五';
if( iWeek === 6 ) iWeek = '星期六';
str = iYear+ '年' +iMonth+'月'+iDate+'日 '+iWeek+' '+ toTwo(iHours)+' : '+ toTwo(iMin)+' : '+ toTwo(iSec);
oBody.innerHTML = str;
}
};
// alert( toTwo(5) ); // '05'
// alert( toTwo(15) ); // '15'
function toTwo ( n ) {
return n < 10 ? '0' + n : '' + n;
}
</script>
</head>
<body style="font-size:60px;">
</body>
</html>Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* Math
* - Math可以用来做数学运算相关的操作
* - Math并不是一个构造函数，我们也不需要去创建一个Math类型
* - Math是一个工具类，它里面封装了一些数学运算相关的常量和方法
*/
/*
* Math中的常量
* Math.PI 圆周率
*/
//console.log(Math.PI);
/*
* Math.abs()
* - 可以用来获取一个数的绝对值
*/
//console.log(Math.abs(10));
/*
* Math.ceil()
* - 可以对一个数进行向上取整
* - 只要小数点后有值就向上进1
*/
//console.log(Math.ceil(1.000001));
/*
* Math.floor()
* - 可以对一个数进行向下取整
* - 小数点后的值都舍去
*/
//console.log(Math.floor(1.01));
/*
* Math.round()
* - 对一个数进行四舍五入取整
*/
//console.log(Math.round(5.4));
/*
* Math.random();
* - 可以生产一个0-1之间的随机数
*
* - 生成一个 0-10 之间的随机数
* 生成 0 - x 之间的随机数
* Math.round(Math.random()*x)
*
* 生成一个 1 - 6之间的随机数
* 生产一个 x - y之间的随机数
* Math.round(Math.random()*(y-x) + x)
*
* 生成一个 1-8之间的随机数
* 生成一个 22-30之间的随机数
*
*/
for(var i=0 ; i<100 ; i++){
//console.log(Math.round(Math.random()*5));
//console.log(Math.round(Math.random()*8 + 22));
}
/*
* Math.max()
* - 可以从多个值中获取到最大值
* Math.min()
* - 获取多个值中的最小值
*/
var result = Math.max(100,20,55,77);
result = Math.min(100,20,55,77);
//console.log(result);
/*
* Math.pow(x,y)
* - 获取x的y次幂
*/
result = Math.pow(3,3);
/*
* Math.sqrt(x)
* - 求一个数的平方根
*/
result = Math.sqrt(2);
//console.log(result);
</script>
</head>
<body>
</body>
</html>Map数据结构
map 类型包含一组有序的键值对，其中键和值可以是任何类型。创建Map对象和Map的基本的存取操作
Map创建使用Map构造函数向Map存储键值对使用set(key, value)方法
可以使用get(key),来获取指定key对应的value
<script type="text/javascript">
var map = new Map();
map.set("a", "lisi");
map.set("b", "zhangsan");
map.set("b", "zhangsan222"); // 第二次添加，新的value会替换掉旧的
console.log(map.get("a"));
console.log(map.get("b")); //zhangsan222
console.log(map.get("c")); //undefined.如果key不存在，则返回undefined
console.log(map.size); //2
</script>Map的3个方法
has(key) - 判断给定的 key 是否在 map 中存在delete(key) - 移除 map 中的 key 及对应的值
clear() - 移除 map 中所有的键值对
初始化Map
创建Map的时候，传入的数组中必须有两个元素，这个两个元素分别是一个数组。也就是传入的实际是一个二维数组！
<script type="text/javascript">
//map接受一个二维数组
var map = new Map([
//每一个数组中，第一个是是map的可以，第二个是map的value。如果只有第一个，则值是undefined
["name", "lisi"],
["age", 20],
["sex", "nan"]
]);
console.log(map.size);
console.log(map.get("name"))
</script>Map的forEach方法
<script type="text/javascript">
var map = new Map([
["name", "李四"],
["age", 20],
["sex", "nan"]
]);
/*
回调函数有函数：
参数1：键值对的value
参数2：键值对的key
参数3：map对象本身
*/
map.forEach(function (value, key, ownMap) {
console.log(`key=${key} ,vlue=${value}`);
console.log(this);
})
</script>for…of循环遍历map
var map2 = new Map();
map2.set('abc',{no:1,name:'zhangsan'});
for(var item of map2)
{
alert(item[0]);
alert(item[1].name);
}Map应用之统计文字出现次数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function () {
var btn = document.getElementById('btn');
btn.onclick = function () {
var content = document.getElementById('content').value;
var arr = content.split('');
var map = new Map();
for(var i = 0; i < arr.length; i++)
{
if(map.has(arr[i]))
{
var currentNum = map.get(arr[i]);
currentNum++;
map.set(arr[i],currentNum);
}
else
{
map.set(arr[i],1);
}
}
var str='';
// map.forEach(function(v,k,mapWord)
// {
// str+=`${k}---${v}<br>`;
// });
for(var item of map)
{
str+=`${item[0]}----${item[1]}<br>`;
}
var result = document.getElementById('result');
result.innerHTML = str;
}
}
</script>
</head>
<body>
<textarea id="content" rows="20" cols="30"></textarea>
<button id="btn">统计</button>
<div id="result">
</div>
</body>
</html>js字符串练习
结题思路1.用被替换的字符串，分隔正文成字符串数组（split）
2.用新字符串作为连接符，将字符串数组连接成一个字符串（join）
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
span { background:yellow; }
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
<p>奇克课堂是一支独具特色的IT培训团队，奇克反对传统IT教育枯燥乏味的教学模式，奇克提供一种全新的快乐学习方法！<br />
2013年底，奇克课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>
<script>
var aInp = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];
aInp[2].onclick = function () {
var str = aInp[0].value; // '奇克'
var newStr = aInp[1].value;
if (!str)return;
oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');
};
</script>
</body>
</html>json简介
简介：JSON（JavaScriptObject Notation）、采用完全独立于编程语言的文本格式来存储和表示数据。
JSON两种格式
1、对象对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。
var person = { "name":"huochai", "age":29, "school":{ "name":"diankeyuan", "location":"beijing" }};2.数组
var students =
[
{"sno":"001","name":"jack","age":130},
{"sno":"002","name":"tame","age":120},
{"sno":"003","name":"cule","age":110}
];访问json对象的属性值
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
//JSON格式的attr访问 - 点号或者中括号 -注意：中括号里面可以放变量
var imgData={ "name":"图片描述和图片相对路径", "title":"logo图片","url":"logo.png" };
alert( imgData.name );
alert( imgData["name"] );
var str="name" ;
alert( imgData[str] );
var json1={"name":"这里是一组图片的文字描述和图片相对路径",
"title":["logo图片","图片1","图片2","图片3"],
"url":["logo.png","1.png","2.png","3.png"]
};
alert( json1.name);
alert( json1.url );
alert( json1.url[1] );
alert( json1["name"]);
alert( json1["url"] );
alert( json1["url"][1] );
var json2 ={ "name":"图片描述和图片相对路径",
"imgData":[
{ "name":"图片1", "title":"logo图片1","url":"logo1.png" } ,
{ "name":"图片2", "title":"logo图片2","url":"logo2.png" } ,
{ "name":"图片3", "title":"logo图片3","url":"logo3.png" }
]
};
alert( json2.name );
alert( json2.imgData[0].name );
alert( json2["name"] );
alert( json2["imgData"][0].name );
</script>
</head>
<body>
</body>
</html>JSON对象两个方法
JSON对象有两个方法：stringify()和parse()。这两个方法分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值stringify()
var strPerson = JSON.stringify(person); alert(strPerson); var strStudents = JSON.stringify(students); alert(strStudents); parse()
JSON.parse方法用于将JSON字符串转化成对象
var strPerson = JSON.stringify(person); var personObj = JSON.parse(strPerson); var strStudents = JSON.stringify(students); var studentsObj = JSON.parse(strStudents);
模板字符串
var name = "Neo";
var occupation = "programmer"; //不使用模板字符串拼接
var str = "He is "+ name +",he is a "+ occupation; //使用模板字符串拼接
var str = `He is ${name},he is a ${occupation}`;模板字符串
var name = "Neo";
var occupation = "programmer"; //不使用模板字符串拼接
var str = "He is "+ name +",he is a "+ occupation; //使用模板字符串拼接
var str = `He is ${name},he is a ${occupation}`;模板字符串不再需要反复使用双引号(或者单引号)了拼接字符串，而是改用反引号标识符( ` 键盘右上角~键)，插入变量的时候也不需要再使用加号(+)，而是把变量放入${ }即可。
使用模板字符串的注意点：
1、可以定义多行字符串
var str = `write once , run anywhere`;
2、${ }中可以放任意的javascript表达式
${ }中可以是运算表达式
var a = 1;
var b = 2;
var str = `the result is ${a+b}`; //进行加法运算 结果：the result is 3${ }中可以是对象的属性
var obj = {"a":1,"b":2};
var str = `the result is ${obj.a+obj.b}`; //对象obj的属性
//结果：the result is 3.json和模板字符串的综合应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--http://api.laifudao.com/open/xiaohua.json-->
<script>
window.onload = function () {
var jsonData = [
{
"title": "你谁啊？我新娘呢？",
"content": " 新郎在礼堂焦急的等待着新娘，过了好一会儿穿着婚纱的姑娘终于匆忙的赶来。 新郎一看愣了：“你谁啊？我新娘呢？” 姑娘抱歉的说：“她喝多了，我是代嫁。”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/81923.htm"
},
{
"title": "哪有人用口香糖做喜糖的？",
"content": " 最近一位学姐结婚，回学校送给每个学妹几包口香糖做喜糖，室友觉得很奇怪：“哪有人用口香糖做喜糖的？” “有什么不可以，口香糖和结婚不是颇有类似之处吗？初时甜甜蜜蜜，久了就味同嚼蜡了！ ”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/81756.htm"
},
{
"title": "磁悬浮列车",
"content": " 黑蚂蚁与黄蚂蚁在公路上爬行，黑蚂蚁很快追到了前面的黄蚂蚁。 黑蚂蚁说：“蚂蚁老弟，你是拉黄包车的吗？” 黄蚂蚁说：“小样，那你说说你这是什么车？” 黑蚂蚁说：“我这可是黑色奔驰车，加长的那种。” 没多久，一条蛇呼啸而过。黄蚂蚁说：“你神气什么，你看到吗？那是磁悬浮列车。”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/126841.htm"
},
{
"title": "那当初为什么要和我合影",
"content": " A：“既然不想在一起，那当初为什么要和我合影？” B：“我再TM警告你一遍！能不能不拿毕业照说事！”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/99196.htm"
},
{
"title": "看看爸爸今天会编什么故事",
"content": " 『麻麻，我睡不着，你给我讲个故事好不好？』 『等你老爸回来听听他今天又会编什么故事就行了！』",
"poster": "",
"url": "http://www.laifudao.com/wangwen/70649.htm"
}
];
var html = '';
for(var i = 0; i < jsonData.length; i++)
{
var article = `
<li>
<h3>${jsonData[i].title}</h3>
<p>${jsonData[i].content}</p>
</li>
`;
html += article;
}
var news = document.getElementById('news');
news.innerHTML = html;
}
</script>
</head>
<body>
<ul id="news">
</ul>
</body>
</html>js实战 模拟扑克发牌洗牌
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css">
img{
margin:4px;
border: 1px solid green;
}
</style>
</head>
<body>
<!-- <div class="boom"></div>-->
<input type="button" value="开始" onclick="CreatCompeleteCard()" />
<input type="button" value="摸牌" onclick="Start()" />
<br/>
底牌：<div id="old"></div>
<hr />
我摸到的牌：<div id="new"></div>
</body>
<script type="text/javascript">
var RadomCards = [];//随机牌存储数组
var MyCards = [];//存储摸过来的牌
class Cards{
constructor(number,src)
{
this.number = number;
this.src = src;
}
}
function CreatCompeleteCard() {
var arr=[];
var src='';
for (var i = 0; i < 52; i++) {
src = "cards/" + i + ".JPG";
var value = i%13;
var card = new Cards(value,src);
arr.push(card);
}
var smallBoss = new Cards(-1,'cards/52.jpg');
var bigBoss = new Cards(-2,'cards/53.jpg');
arr.push(smallBoss);
arr.push(bigBoss);
RadomCards = SortCards(arr);
Show();
}
//洗牌
function SortCards(arr) {
arr.sort(function (a, b) {
return 0.5 - Math.random();
})
return arr;
}
//摸牌方法
function GetCards(CardObj) {
var k = InCardsIndex(MyCards, CardObj);//考虑下插入的位置
MyCards.splice(k, 0, CardObj); // 插入形成新的顺序
}
/*【获取牌应该插入的位置】
*arr:当前手里的牌
*obj:新摸到的牌
*/
function InCardsIndex(arr, obj) {
var len = arr && arr.length || 0;
if (len == 0) {
return 0;
}else if (len == 1) {
if (obj.number >= arr[0].number) {
return 1;
} else {
return 0;
}
} else {
var backi = -100;
for (var i = 0; i < len; i++) {
if (obj.number <= arr[i].number) {
backi = i;
break;
}
}
if (backi == -100) {
backi = len;
}
return backi;
}
}
function Start() {
if (RadomCards.length > 0) {
GetCards(RadomCards.shift());
Show();
} else {
alert("没有了");
}
}
function Show() {
var lenOld = RadomCards.length;
var lenNew = MyCards.length;
var html = "";
for (var i = 0; i < lenOld; i++) {
html += `<img src="${RadomCards[i].src}">`;
}
document.getElementById("old").innerHTML=html;
html = "";
for (var i = 0; i < lenNew; i++) {
html += `<img src="${MyCards[i].src}">`;
}
document.getElementById("new").innerHTML=html;
}
Show();
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【js jQuery】map集合 循环迭代取值---以及 map、json对象、list、array循环迭代的方法和区别
- js中数据结构数组Array、映射Map、集合Set、对象、JSON
- 前台js获取到后台json数据，eval解析json后，日期（object）对象转换为date日期格式显示
- 整型-文件-方法名-日期-文件拷贝-缩略图-JSON创建-PDF-HTTP-单例-抓屏-目录-ZIP-XML-Map-邮件-Array-beanCopy-数组类型转换-数组集合转换-枚举示例
- js遍历拼接list集合对象,JSONArray数组
- js将对象会集合转换为json字符串。Jackson
- JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
- 定时器及系统日期对象的应用
- js json map对象传给java后台接收
- Java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json
- JSON是什么？JSON和JS对象的区别和JSON的基本应用
- java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json
- Json对象在JS中应用，经典总结。
- json对象、json格式字符串、java对象【使用此net.sf.json.JSONObject将java对象[比如数组集合Map、Map扩展]转换成json格式字符串】
- android应用存储用户信息,map集合与用户对象存储
- handlebars获取json数据（Map对象(与集合处理一样)）
- 用JS把Java的Map对象转为Json对象
- JSON转换包含Date日期属性的对象的List集合报错问题
- java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json
- java中把对象、对象bean、list集合、对象数组、Map和Set以及字符串转换成Json