array-string
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>array和string</title>
<script>
// //数组的声明
// var arr=[1,2,3,4,5,6,7];
// //数组的访问
// console.log(arr[0]);//访问第一个对象
// //数组的方法
// arr.push(3);//push在数组末尾添加n项 并返回数组的长度 这是内置的方法直接调用就可以了
// console.log(arr);
// var newArr=arr.push(3,5);
// console.log(newArr);//返回了长度
// console.log(arr.length);//返回了长度 都是返回长度这个length耗性能
//pop:删除末尾的元素,并返回删除的元素
// var ele=arr.pop();//这句话可以看返回值
// console.log(ele,arr);
// arr.shift arr.unshift
// splice:
// var ele=arr.splice(1,3,90,99);//从第2个数开始删 删除两个数字 还剩1,4,5,6,7 并返回被删除的元素2,3
//splice(1,0,90,100)从第2个数开始删删0个 在那个位置后插入90,100这些元素
// console.log(arr,ele);
// arr.indexOf():返回该元素的下标索引,如果不存在返回-1
//数组的去重
// var arr=[1,2,2,3,3,3,5,4,5,6,9,8,8];
// for(var i=0;i<arr.length-1;i++){//数组去重方法一
//
// for (var j=i+1;j<arr.length;j++) {
// if (arr[i]===arr[j]) {
// arr.splice(j,1);
// j--;
// }
// }}
// console.log(arr);
// var newArr=[];//数组去重方法二
// for(var i=0;i<arr.length-1;i++){
// if(newArr.indexOf(arr[i])==-1){
// newArr.push(arr[i]);
// }
// }
// console.log(newArr);
//数组的排序
//冒泡排序
var arr=[1,2,3,2,9,4,6,3,90,67,5];
// for (var i=0;i<arr.length;i++) {
// for (var j=i+1;j<arr.length;j++) {
// if(arr[i]>arr[j]){
// var temp=arr[i];
// arr[i]=arr[j];
// arr[j]=temp;
// }
// }
// }
// console.log(arr);
for (var i=0;i<arr.length;i++){
for (var j=0;j<arr.length-i;j++){
if(arr[j]>arr[j+1]){
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
console.log(arr);
</script>
</head>
<body>
</body>
</html>
BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM</title>
<script>
//window对象是最根上的对象
//console.log(window);
//window对象下的对象方法
//alert();
//var a=100;//声明的变量是加到window对象上的属性
//console.log(window.a);
//confirm('你确定要放弃H5吗?');
//console.log(flag);
window.onload=function(){//把括号内的内容放到代码最后面
var btn=document.getElementById('btn');
var stop=document.getElementById('stop');
var id;
btn.onclick=function(){
//var flag=confirm('你确定要放弃H5吗?');
//console.log(flag);
//打开指定网址的窗口
//var win=open('https://www.baidu.com/?tn=98010089_dg&ch=8'); //里面放网址的话会跳到新开一个窗口内容是网址 如果里面不写网址就会弹出一个新窗口
//setTimeout(function(){
// win.close();
// },3000)
var i=16;
//周期执行
id=setInterval(function(){
//console.log(i++);
//btn.style.fontSize=i++ +'px';
btn.style.marginLeft=i++ + 'px';
},50);
}
stop.onclick=function(){
//清除定时器
clearInterval(id);
}
}
</script>
</head>
<body>
<button id="btn">开始</button>
<button id="stop">停止</button>
</body>
</html>
data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data</title>
</head>
<body>
<div id="box"></div>
<script>
//构造函数
function Person(name,age){
this.name=name;
this.age=age;
}
var obj=new Person('lili',20);
console.log(obj);
//Object Array String
//var d=new Date();
//console.log(d.toLocaleDateString());
var box=document.getElementById('box');
var d1=new Date(2017-9-19);
d1.setHours(14);
setInterval(function(){
//var mon=d.getMonth()+1;
//var day=d.getDay();
//var h=d.getHours();
//var m=d.getMinutes();
//var s=d.getSeconds();
//box.innerHTML=mon+'月:'+day+'星期:'+h+'时:'+m+'分:'+s+'秒';
//box.innerHTML=d.toLocaleString();
var d2=new Date();
console.log(d2.getTime());
// var day=parseInt((d2-d1)/1000/60/60/24);
// var house=((d2-d1)/1000/60/60%24);
// console.log(day+'-'+house);
console.log(d2-d2);
},1000)
</script>
</body>
</html>
DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#nav{
width: 1000px;
height: 50px;
border: 1px solid #ccc;
margin: 0 auto;
}
#nav li{
width: 80px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
}
.box{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
.box div{
display: none;
}
</style>
</head>
<body>
<!--<ul id='nav'>
<li>
<a href="">1</a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>-->
<ul id="nav">
<li>我的关注</li>
<li>推荐</li>
<li>导航</li>
</ul>
<div class="box">
<div>我的关注</div>
<div>推荐</div>
<div>导航</div>
</div>
<!--<button id="btn">练习事件绑定</button>-->
<script>
//获取元素
var lis=document.getElementById('nav').children;
var divs=document.getElementsByClassName('box')[0].children
console.log(lis);//里面是节点数组 要用lis[0]才能访问第一个节点,这句代码可以看到lis里的东西 方便后面调用时的理解
for(var i=0;i<lis.length;i++){
//给节点对象添加一个属性,赋值为下标
lis[i].index=i;
//给lis[i]加属性,分别给每一个li绑定点击事件
lis[i].onclick=function(){
// console.log(this.innerHTML)
// this.innerHTML='nav'+this.index;//先是数字都是加法遇到字符串以后再往后都是字符串了
for(var i=0;i<lis.length;i++){
//隐藏三个div
divs[i].style.display='none';
}
//对应的div显示
divs[this.index].style.display='block';
}
}
// DOM(document object model:文档对象模型)
// DOM树
// 节点类型:文本节点(换行或者里面写的文字) 元素节点(标签 ul这类) 属性节点
// 获取元素
// document.getElementById();获取一个id
// document是一个对象里面有很多他的方法get获取元素
// document.getElementsByClassName();获取类
// document.getElementsByTagName();获取标签
//
// var nav=document.getElementById('nav');
// console.log(nav);
// var lis=document.getElementsByTagName('li');
// console.log(lis[0]);
//通过节点关系获取 第一个会是换行 换行也会被算在内
// //console.log(nav.childNodes);不怎么用
// console.log(nav.children);//常用
// console.log(nav.parentNode);//常用
// console.log(nav.firstElementChild);//常用
// console.log(nav.firstElementChild.nextElementSibling);//第一个元素节点,nextElementSibling这个元素的下一个节点
//事件类型:onclick onmouseover onmouseout onmousemove onmouseup onmousedown
//绑定事件
//三要素:绑定的元素、事件的类型、事件处理函数
// var obj={
// color:{
// name:[]
// }
// }
// var btn=document.getElementById('btn');//先获取这个标签按钮
// btn.onclick=function(){//给btn添加一个属性/方法 给属性附上一个function值
// console.log('onclick');
// }
// btn.onmouseover=function(){
// this.style.background='red';
// }
// btn.onmouseout=function(){
// this.style.background='#fff';
// }
// btn.onmousemove=function(){
// console.log('onmousemove');
// }
// nav.onmouseover=function(){
// this.style.background='red';
// }
// nav.onmouseout=function(){
// this.style.background='#fff';
// }
//
//
</script>
</body>
</html>
DOM2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"id="msg" />
<ul id="list">
<li>111 <button>删除</button></li>
<li>222</li>
<li>333</li>
</ul>
<script>
//1.先获取要操作的标签
var inp=document.getElementById('msg');
var list=document.getElementById('list');
//2.给input绑定键盘事件
//键盘事件:onkeydown onkeyup
inp.onkeydown=function(e){//添加方法二
//判断是否是回车键
if (e.keyCode===13) {
//创建一个li标签
var li=document.createElement('li');
var btn=document.createElement('button');
//给li里赋值成input框输入的内容
li.innerHTML=inp.value;//+ <button></button>;
btn.innerHTML='删除';
//添加到指定的元素里
list.appendChild(li);
li.appendChild(btn);
// li.onclick=function(){
// list.removeChild(this);
// }
inp.value='';
//事件流:事件冒泡 事件捕获
//先获取li
var lis=list.children;
//给li绑定点击事件
for(var i=0;i<lis.length;i++){
lis[i].onclick=function(e){
// list.removeChild(this);//this就表示你所点击的那一个 不能写li li不能指明是哪个
//阻止事件冒泡
e.stopPropagation();
console.log('li点击了');
}
}
//事件委托
list.onclick=function(e){
// console.log('ul点击了');
if(e.target.nodeName=='BUTTON'){
list.removeChild(e.target.parentNode);
}
}
// list.innerHTML+='<li>'+inp.value+'</li>';//添加方法一
}
}
</script>
</body>
</html>
function
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<script>
// 函数声明
// document.write('<h1 style="color:red";>hello world</h1>');在html输出的标题大小h1的hello world
// 声明变量用var声明函数用function
//函数名以英文字母或者$开头,不能是关键字
//下面是两种都是定义函数的方法 第一种函数名是fn 第二钟是把函数赋到f中
// function fn(){
// console.log(100);
// }
// var f=function(){
// console.log('这是f函数');
// }
函数的调用(函数+小括号) 函数定义后并不会执行 要调用才能用
// fn();//这就是把函数调用了,不用重复再打函数代码
// f();
function printTable(row,col){//函数的声明
// var row=3,col=5;把函数的变量写在上面的小括号内这样函数定义就不是死的了,在调用的时候把数传入函数即可
document.write('<table width="100" border="2">')
for(var i=0;i<row;i++){
document.write('<tr>');
for(var j=0;j<col;j++){
document.write('<td>'+j+'</td>');
}
document.write('</tr>')
}
}
printTable(3,5);
printTable(9,5);//函数调用,调用时候把9行5列传给函数
//函数的参数(函数声明时是形参,函数调用时是实参)形参是有个名里面不知道是啥,实参是实际的数值,把实参传给形参
//函数的返回值(返回一个值或者直接跳出整个函数)
//函数return后没有值,函数也有返回值,是undefined
//函数如果没有return语句,也有返回值,是undefined
// function sum(a,b){
// return a+b
//
// }
// console.log(sum(1,5));//控制台出来的是6
// alert(sum(10,20));//弹窗弹出30
// function sum(a,b){
// if(a>b){
// return"请输入合法数值";
// }
// var all=0;
// for (var i=a;i<=b;i++) {
// all+=i;
// }
//
// return all;//只要遇到return就会跳出这个函数 后面的这个100就没有出来
// console.log(100);
// }
// console.log(sum(1,4));
// function evenSum(a,b){//
// var all=0;
// for (var i=a;i<=b;i++) {
// if(i%2==0){
// all+=i;
// }
// }
// return all;//只要遇到return就会跳出这个函数 后面的这个100就没有出来
// console.log(100);
// }
// console.log(evenSum(9,10));
//求质数合
// function isPrime(a){
// for( var i=2;i<=a/2;i++){
// if (a%i==0) {
// return false;
// }
// }
// return true;
// }
// function primeSum(a,b){
// var sum=0;
// for(var i=a;i<=b;i++){
// isPrime(i)&&(sum+=i);//如果前面是真就会执行sum+=i
// }
// return sum;
// }
// console.log(primeSum(2,9))
var num=100;
function a(){
num=num+100;
var sum=100;
console.log(sum);
}
a();
console.log(num);
// console.log(sum);局部变量在外面不可以访问
</script>
</head>
<body>
</body>
</html>
lunbo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 800px;
height: 105px;
border: 3px solid red;
margin: 0 auto;
overflow:hidden;
position: relative;
}
#slide{
width: 2300px;
position: relative;
}
#slide img{
width: 200px;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="slide">
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
<img src="img/s3.jpg"/>
<img src="img/s4.jpg"/>
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
<img src="img/s3.jpg"/>
<img src="img/s4.jpg"/>
<img src="img/s1.jpg"/>
<img src="img/s2.jpg"/>
</div>
</div>
<script>
var slide=document.getElementById('slide');
var box=document.getElementById('box');
var i=0;
var id=setInterval(function(){
if(i<=-1320){
i=0;
}else{
i--;
}
slide.style.left=i +'px';
},20);
box.onmouseover=function(){
clearInterval(id);
}
box.onmouseout=function(){
id=setInterval(function(){
slide.style.left=i-- +'px';
},50);
}
</script>
</body>
</html>
lunbo1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
padding: 0;
margin: 0;
}
#box{
width: 800px;
height: 120px;
border: 3px solid red;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#slide{
width: 2320px;
position: absolute;
}
#slide img{
width: 200px;
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<div id="box">
<div id="slide">
<img src="http://www.gxun.edu.cn/images/xslj.jpg" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_36.png" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_34.png" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_32.png" alt="">
<img src="http://www.gxun.edu.cn/images/timg123.jpg" alt="">
<img src="http://www.gxun.edu.cn/images/ethniclaw.jpg" alt="">
<img src="http://www.gxun.edu.cn/images/xslj.jpg" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_36.png" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_34.png" alt="">
<img src="http://www.gxun.edu.cn/images/17/05/15/1xut7t9vm8/gx_32.png" alt="">
</div>
</div>
<script>
var slide = document.getElementById('slide');
var box = document.getElementById('box');
var i = 0;
function move(){
if(i<=-1320){
i=0;
}else{
i--;
}
slide.style.left = i + 'px';
// i=i<=-1320?0:i-1;
}
var id = setInterval(move,10);
box.onmouseover = function(){
clearInterval(id);
}
box.onmouseout = function(){
id = setInterval(move,10);
}
</script>
</body>
</html>
object
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>object</title>
<script>
//对象的声明
//this是调用方法的对象 要放在函数中 然后this指代这个函数的对象
// var name='许嵩';
// var age=18;
// var height=180;
// var weight=80;
// function say(){
// console.log('我很帅');
// }
// var obj=new Object();//调用了这个函数 返回来的是一个对象 创建对象的一种形式
// //var obj={};
var obj={
name:'许',
age:18,
height:180,
say:function(){
console.log('我老师很帅');
}
};
//对象的访问
console.log(obj.name);
console.log(obj['name'])//属性名要加引号,不加的话是变量
obj.say();
//添加属性或方法
obj.weight=80;
console.log(obj);
//修改
obj.name='许嵩'
console.log(obj);
//删除属性
delete obj.age;
//遍历(for in 循环)
for (var item in obj) {//不分先后顺序 只能用for in循环
if(typeof obj[item]!=="function"){//不想要函数出现 先判断是否为函数 不是的话就打印出来
document.write(obj[item]+'<br>');//访问变量的时候要用中括号 用.的话是在找item属性 但是前面并没有写这个属性
}
}
</script>
</head>
<body>
</body>
</html>
user0912
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.header{
width: 1200px;
height: 50px;
margin: 0 auto;
border: 1px solid #ccc;
}
.header button{
float: left;
width: 100px;
height: 50px;
}
#nav{
width: 1000px;
height: 50px;
float: left;
}
#nav li{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
float: left;
cursor: pointer;
}
.box{
width: 1200px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
</style>
<script src="js/data1.js"></script>
</head>
<body>
<div class="header">
<button id="prev"><</button>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button id="next">></button>
</div>
<div id="box" class="box">
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<script src="js/data1.js"></script>
<script>
//1.获取相关元素
var prev=get('prev'),
lis=get('nav').children,
next=get('next'),
ps=get('box').children,
page=0;
//2.初始在li中渲染前10个名字
for (var i=0;i<10;i++) {
lis[i].index=i;
lis[i].innerHTML=data[i].name;
//3.给每个li
lis[i].onclick=function(){
ps[0].innerHTML=data[page+this.index].name
ps[1].innerHTML=data[page+this.index].age
ps[2].innerHTML=data[page+this.index].xuehao
}
}
//4.给左右button绑定点击事件
//右箭头事件
next.onclick=function(){
// ps[0].innerHTML=''
// ps[1].innerHTML=''
// ps[2].innerHTML=''
// 页数+10
page+=10;
if(page>data.length){
page-=10;
return;
}
if(page===parseInt(data.length/10)*10){
for(var i=0;i<data.length%10;i++){
lis[i].innerHTML=data[i+page].name
}
for(var i=0;i<data.length%10;i++){
lis[i].innerHTML='';
}
}else{
// 十个li的内容变成当前页的
for(var i=0;i<10;i++){
lis[i].innerHTML=data[i+page].name;
}
ps[0].innerHTML=data[page].name
ps[1].innerHTML=data[page].age
ps[2].innerHTML=data[page].xuehao
}
}
//左箭头事件
prev.onclick=function(){
ps[0].innerHTML=data[page].name
ps[1].innerHTML=data[page].age
ps[2].innerHTML=data[page].xuehao
if(page===0){
return;
}
page-=10;
for(var i=0;i<10;i++){
lis[i].innerHTML=data[i+page].name;
}
}
</script>
</body>
</html>
userinfor
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script src="js/data.js"></script>
<style>
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.header{
width: 1200px;
height: 50px;
margin: 0 auto;
border: 1px solid #ccc;
}
#nav{
width: 1000px;
height: 50px;
/*border: 1px solid #ccc;*/
margin: 0 auto;
float: left;
}
#nav li{
width: 100px;
height: 100px;
text-align: center;
line-height: 50px;
float: left;
}
.header button{
float: left;
width: 100px;
height: 50px;
}
.box{
width: 1000px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
}
.box div{
/*display: none;*/
}
img{
height: 100px;
}
</style>
</head>
<body>
<div class="header">
<button id="prev"><</button>
<ul id="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<button id="prev">></button>
</div>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<script>
// function get(id){
// return document.getElementById(id);
// }
var arr=[
{
name:'珑妹妹',
age:20,
weight:60,
height:170
},
{
name:'梁妹妹',
age:30,
weight:30,
height:130
},
{
name:'美女',
age:40,
weight:40,
height:140
},
{
name:'美妞',
age:50,
weight:50,
height:150
},
{
name:'好看',
age:60,
weight:60,
height:160
},
{
name:'美妞',
age:50,
weight:50,
height:150
},
{
name:'美妞',
age:50,
weight:50,
height:150
},
{
name:'美妞',
age:50,
weight:50,
height:150
},
{
name:'美妞',
age:50,
weight:50,
height:150
}
];
var lis=document.getElementById('nav').children;
var page = 0;
var box=document.getElementsByClassName('box')[0];
for(var i=1;i<9;i++){
// arr.push('张'+i);
arr[i].name=acc[i-1];
lis[i].innerHTML=arr[i].name;
lis[i].index=i;
//点击每一个li
lis[i].onclick=function(){
//使box里的内容是对应li里的名字
// console.log(box.children[0])
box.children[0].innerHTML=arr[page+this.index].name;
box.children[1].innerHTML=arr[page+this.index].age;
box.children[2].innerHTML=arr[page+this.index].weight;
box.children[3].innerHTML=arr[page+this.index].height;
}
}
for(var j=0;j<13;j++){
lis[j].index=j;
button.onclick=function(){
page+=8;
}
}
// //获取元素
// var lis=document.getElementById('nav').children;
// var divs=document.getElementsByClassName('box')[0].children
// console.log(lis);//里面是节点数组 要用lis[0]才能访问第一个节点,这句代码可以看到lis里的东西 方便后面调用时的理解
// for(var i=0;i<lis.length;i++){
// //给节点对象添加一个属性,赋值为下标
// lis[i].index=i;
// //给lis[i]加属性,分别给每一个li绑定点击事件
// lis[i].onclick=function(){
console.log(this.innerHTML)
this.innerHTML='nav'+this.index;//先是数字都是加法遇到字符串以后再往后都是字符串了
// for(var i=0;i<lis.length;i++){
// //隐藏三个div
// divs[i].style.display='none';
// }
// //对应的div显示
// divs[this.index].style.display='block';
// }
// }
</script>
<!--<script src=""></script>//引入外部js文件 里面不可以写代码 因为会识别不出来-->
</body>
</html>