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 lang="en">
<head>
<meta charset="UTF-8">
<title>timer</title>
<script>
window.onload = function () {
var num = 1;
var count = document.getElementById('count');
count.innerHTML = num++;
function startTimer() {
var timerID = setInterval(function () {
count.innerHTML = num++;
},1000);
return timerID;
}
var btn = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
btn.onclick = function () {
clearInterval(timerID);
}
btn2.onclick = function () {
timerID = startTimer();
}
}
</script>
</head>
<body>
<h1 id="count"></h1>
<button id="btn2">继续</button>
<button id="btn">停止</button>
</body>
</html>
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>
替换背景
<!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获得内部样式
var speed = parseInt(getComputedStyle( oDiv).left) + -12; // 步长
时间对象
new Date(yyyy,MM,dd,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>
function toTwo ( n ) {
return n < 10 ? '0' + n : '' + n;
}
function showTime() {
var myTime = new Date();
var oBody = document.getElementById('body');
// 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;
}
window.onload = function () {
showTime();
setInterval(function () {
showTime();
},1000);
}
</script>
</head>
<body id="body">
</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');
var map = new Map();
btn.onclick = function () {
var textarea = document.getElementById('content');
var words = textarea.value.split(' ');
for(var i = 0; i < words.length; i++)
{
if(map.has(words[i]))
{
var count = map.get(words[i]);
count++;
map.set(words[i],count);
}
else
{
map.set(words[i],1);
}
}
var result = '';
for(var entry of map)
{
result += entry[0] + '------------' + entry[1] + '<br>';
}
var div = document.getElementById('result');
div.innerHTML = result;
}
}
</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>
<script>
window.onload = function () {
var inputs = document.getElementsByTagName('input');
var p = document.getElementById('p');
inputs[2].onclick = function () {
var str = p.innerHTML;
var arr = str.split(inputs[0].value);
var string = arr.join('<span>'+inputs[1].value+'</span>');
p.innerHTML = string;
}
}
</script>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
<p id="p">奇克课堂是一支独具特色的IT培训团队，奇克反对传统IT教育枯燥乏味的教学模式，奇克提供一种全新的快乐学习方法！<br />
2013年底，奇克课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>
</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.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<ul id = 'content'>
</ul>
</body>
<script>
var jokes = [{
"title": "妹子去纹身，被老板暴打的真相",
"content": " 今天去纹身，小的那种图案我根本不屑一顾，要纹就纹一个满背！到那师傅跟我说：“姑娘，我要告诉你，纹身很疼，而且易纹难祛，三思后行。”我根本没有犹豫就趴到了那，师傅一看我是铁了心了，也直接开整，时间有点长迷迷糊糊之间我就睡着了，醒来之后我心里又一犹豫：“师傅，我不纹了！”师傅一个大嘴巴子呼到了我脸上：“老子给你搓了两小时的泥，你跟我说你不纹了？趴下！”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/161859.htm"
}, {
"title": "你闺蜜的确挺成熟的",
"content": " 闺蜜说她成熟的标志就是每天都会记账。<br/><br/> 出于好奇我翻看了她的账本，<br/><br/> 只见上面写着：5月7号用钱了，5月8号用钱了，5月9号居然又用钱了……尼玛……",
"poster": "",
"url": "http://www.laifudao.com/wangwen/79319.htm"
}, {
"title": "夏日健康提醒",
"content": " 夏日健康提醒：夏天来了应尽量选择多吃西红柿或者西瓜，尽量少吃芒果，荔枝，猕猴桃，提子，因为西红柿和西瓜比较便宜。吃多了不心疼……",
"poster": "",
"url": "http://www.laifudao.com/wangwen/89966.htm"
}, {
"title": "为什么只有唐僧不会法术",
"content": " 甲：“为什么西游记里师徒四人，只有唐僧不会法术？”<br/><br/> 乙：“这你都不懂，员工靠能力吃饭，老板靠员工吃饭！”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/163745.htm"
}, {
"title": "前几天在小区公园玩",
"content": " 前几天在小区公园玩，碰到李大爷抱条狗，鬼鬼祟祟的在小区转悠，我跟李大爷打声招呼，他做个嘘的手势：别那么大声，这事千万别跟你大妈说。<br/><br/> 不久后，小区贴出寻狗启事，能提供线索和帮着找到的，奖励五百元，这时李大爷抱着狗找到我：你把这狗给你大妈送去，赏钱咱俩一人一半。",
"poster": "",
"url": "http://www.laifudao.com/wangwen/161155.htm"
}, {
"title": "结果她给我拿了瓶眼药水",
"content": " 今天感冒了，刚去药店买药，营业员是个美女，有个帅哥要买东西，对着美女营业员眨巴眼，只见营业员哦了一声，拿了一盒杜蕾斯给他。 轮到我时，我也对美女眨眼，结果她给我拿了瓶眼药水！ 顿时在心里问候无数遍：X你妹。",
"poster": "",
"url": "http://www.laifudao.com/wangwen/90123.htm"
}, {
"title": "真的是太有趣了啊！",
"content": " 回家的路上，我开着60码的车速，<br/><br/> 后面的车一直想超车，还不停的打喇叭，<br/><br/> 没办法，我打开车窗把给表弟买的玩具枪朝后面指了指，<br/><br/> 那车直接一个刹车，停住了，哈哈，真好笑。<br/><br/> 好了，不说了，该录口供了。",
"poster": "",
"url": "http://www.laifudao.com/wangwen/80169.htm"
}, {
"title": "代沟",
"content": " 什么是代沟？<br/><br/> (8、90后）男：你跟小龙女长的很像。<br/><br/> 女：真的吗？我那么漂亮？<br/><br/> (00后）男：你跟小龙女长的很像。<br/><br/> 女：你TMD再说一遍试试...",
"poster": "",
"url": "http://www.laifudao.com/wangwen/89393.htm"
}, {
"title": "你和我谈什么将来",
"content": " 老师: 来福你上课就知道玩手机将来怎么办呀！<br/><br/> 来福: 老师你一月工资多少<br/><br/> 老师: 3000<br/><br/> 来福: 我家每月收租6万 你和我谈什么将来",
"poster": "",
"url": "http://www.laifudao.com/wangwen/90162.htm"
}, {
"title": "你是怎么看呢？",
"content": " 朋友圈都在呼吁人贩子死刑，我理解当父母的感受 人贩子穷凶极恶确实不值得同情，但人贩子也有父母亲人，如果判处他死刑 不是又多了一个破碎的家庭么？所以，我呼吁对于人贩子应该诛九族，让他们一家团聚！",
"poster": "",
"url": "http://www.laifudao.com/wangwen/90940.htm"
}, {
"title": "福彩的真相",
"content": " 福彩往大海里抛了一根绣花针，捞上来就给你500万。于是各大港口摆摊叫卖：“老板快来啊，两块钱撒一网...”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/121545.htm"
}, {
"title": "其他方面的能力",
"content": " 老妈总喜欢买长的不完美的水果，问她：“为什么？”<br/><br/> 她老人家幽幽地说：“长的不完美的水果，都会努力长的很甜，就像长得丑的人，总会努力提高其他方面的能力……”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/120563.htm"
}, {
"title": "万一隔壁老王也这么想咋办",
"content": " 隔壁老王家的女人虽然有点丑但是特别会做饭，每次吃饭时香味总是能飘到来福家来。<br/><br/> 而每次来福都会对着老婆幽怨的说：“真想每天吃在她们家里，住在我们家里。”<br/><br/> 来福老婆说：“要点脸行吗！万一隔壁王大哥也这么想咋办呀？”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/90824.htm"
}, {
"title": "叫我干嘛就干嘛",
"content": " 食堂排队打饭，小红饿的厉害，就说：“谁要是现在给我一个面包，叫我干嘛就干嘛。”<br/><br/> 小明：“我给你一个。”<br/><br/> 小红：“你想叫我干嘛？”<br/><br/> 小明：我叫你别吃！！",
"poster": "",
"url": "http://www.laifudao.com/wangwen/161644.htm"
}, {
"title": "老师，您有对象了吗",
"content": " 楼主班主任一个，班里有个女生喜欢给别人介绍男女朋友，弄的班里的学生都谈恋爱去了，我忍无可忍，叫来该女生家长<br/><br/> 我：“小丽家长，你家孩子太不像话了，自己谈恋爱不说，还要给其他同学介绍对象，弄的班里没有了学习气氛”<br/><br/> 家长：“啊～对不起老师，我回去肯定教育教育她”<br/><br/> 我：“好吧，确实该教育教育”<br/><br/> 家长：“老师费心了，哎，老师，您有对象了吗，我们老家有个姑娘可漂亮了，眉清目秀，我给你介绍介绍吧？”<br/><br/> 我：“……”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/121128.htm"
}, {
"title": "不管怎样都好",
"content": " 没钱也好，省却了有钱的烦恼；<br/><br/> 单身也好，避免了恋爱的争吵。",
"poster": "",
"url": "http://www.laifudao.com/wangwen/120967.htm"
}, {
"title": "二哈，你能再二点么",
"content": " 今天行街，走着走着一只哈士奇突然像认识我似的向我走过来<br/><br/> 我知道这种生物是很友善的就没管<br/><br/> 它跟着我一起走了大概30米，然后见它加速跑到了我面前<br/><br/> 回头仔细看了我一眼，又看了看我身后，楞呆了一下<br/><br/> 疯了似的向它主人跑回去了，尼玛！它认错人了......",
"poster": "",
"url": "http://www.laifudao.com/wangwen/79971.htm"
}, {
"title": "我每天都有两个成功",
"content": " 我很佩服马云，自从认识他以后，我每天都有两个成功：一是登录成功，二是付款成功。同时，我还拥有了属于自己的一辆车：购物车！不过，我还能清醒地认识自己：啥事别任性，否则，很有可能会余额不足！",
"poster": "",
"url": "http://www.laifudao.com/wangwen/193369.htm"
}, {
"title": "老公在外面跪搓衣板的！",
"content": " 老婆：“老公，我漂亮吗？”<br/><br/> 老公：“漂亮！”<br/><br/> 老婆：“我贤惠吗？”<br/><br/> 老公：“贤惠！”<br/><br/> 老婆：“我这么优秀怎么就嫁给了你。”<br/><br/> 老公：“因为只有我能把你的缺点看成优点。”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/79668.htm"
}, {
"title": "你帅死了",
"content": " 大牛：“来福你为啥这么爱下象棋啊？还一次都没赢过。”<br/><br/> 来福：“你知道怎么回事吧？每次我的帅给对方吃了以后，对方的女生会说你帅死了，你帅死了。”",
"poster": "",
"url": "http://www.laifudao.com/wangwen/91201.htm"
}];
var strHtml = '';
for(var i = 0; i < jokes.length; i++)
{
strHtml += `<li>
<div><a href="${jokes[i].url}">${jokes[i].title}</a></div>
<div>${jokes[i].content}</div>
</li>`;
}
// alert(strHtml);
var ul = document.getElementById('content');
ul.innerHTML = strHtml;
</script>
</html>
