js 落幕
1.关于路由的跳转
核心是 a 再取出后缀作为参数判断 最后 innerHTML 上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--这里返回的都是一个放在路由的后缀-->
<a href="#/love">爱</a>
<a href="#/myself">我自己</a>
<div id="app"></div> <script>
<!--这里是通过location.hash来取出后缀做判断-->
window.onhashchange = function () {
console.log(location.hash);
switch (location.hash) {
case '#/love':
document.getElementById("app").innerHTML = "<h2>我爱你</h2>";
break;
case "#/myself":
document.getElementById("app").innerHTML = "<h1>你是谁</h1>";
break;
default:
break
} }
</script> </body>
</html>
路由跳转
2.变量提升 js 的特殊情况
在js 中 会把 变量提到最前面显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script> console.log(a);
var a = 3;
//由于变量提升 会使其变成 var a console.log(a)
// a=3 console.log(a)
//结果为 undefinded 3
console.log(a); console.log(b);
{
var b = 5;
console.log(b);
}
console.log(b)
// 同理 结果为 undefinded 5 5
</script> </body>
</html>
变量提升 示例
3.tab栏选项卡
这里主要是通过联动 的 方式使页面和tab栏实现同步
但是会产生变量提升 所以以后会用let 代替 var 取消 变量提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#app{
width: 480px;
margin: 20px auto;
border:1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: yellow;
}
ul li a{
text-decoration : none;
color: darkviolet;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block;
} </style>
</head>
<body>
<div id="app">
<ul>
<li class="active">
<a href="#">我</a>
</li>
<li >
<a href="#">我</a>
</li>
<li >
<a href="#">我</a>
</li>
</ul>
<p class="active">首页内容</p>
<p >新闻内容</p>
<p>图片内容</p>
</div>
<script type="text/javascript">
var olis = document.getElementsByTagName('li');
var ops = document.getElementsByTagName("p");
for ( var i=0;i<olis.length;i++) {
//这里用olis[i].index = i 是为了防止产生变量提升
olis[i].index = i;
olis[i].onclick = function () {
for ( var j = 0; j <olis.length;j++){
olis[j].className = "";
ops[j].className = "";
} this.className = "active";
ops[this.index].className = 'active';
} }
/*
* (2)
// * 这里可以使用let 代替 var 不会发生变量提升
let olis = document.getElementsByTagName('li');
let oPs = document.getElementsByTagName('p'); for(let i = 0; i < olis.length; i++){ olis[i].onclick = function() {
for(let j = 0; j < olis.length; j++){
olis[j].className = '';
oPs[j].className = ''
}
this.className = 'active';
oPs[i].className = 'active';
} }*/ </script> </body>
</html>
tab栏
4.insertBefore 兄弟之间的包含
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
abc{
width: 100px;
height: 100px;
background-color: red;
display: block;
}
</style>
</head>
<body>
<div id="box">
<p id="child1">alex</p>
</div>
<script> var oDiv = document.getElementById('box');
var op1 = document.getElementById('child1'); // var oP = document.createElement('abc');
//appendChild 是父子之间的包含
// oDiv.appendChild(oP); var op2 = document.createElement('p');
op2.innerText = 'wusir'; //insertBefore 是兄弟之间的包含
oDiv.insertBefore(op2, op1); </script> </body>
</html>
insertBefore
5.时间
<1> 一次性定时器
可以做异步
开启一次性定时器:
var time = setTimeout(fn,1000);定时器函数
清除:
clearTimeout()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 50px;
background-color: red;
}
</style> </head>
<body>
<button id="start">开启</button>
<button id="clear">清楚</button>
<div id="box"></div>
<script>
var time =null;
document.getElementById("start").onclick = function () {
//建立时间的函数 一次性时间 异步
time = setTimeout(function () {
console.log(111);
},2000);
console.log(555)
};
document.getElementById("clear").onclick = function () {
//这里是清除时间 clearTimeout()后面加参数
//一定要在时间显示前清楚 要不就没用了
clearTimeout(time) }
</script> </body>
</html>
一次性定时器
<2>循环周期定时器
可以做动画
js 跟 python 一样 都有垃圾回收机制
but 定时器对象 垃圾回收收不回
开启循环定时器
time = setInterval(fn,1000);
清除:
clearInterval()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width: 100px;
height: 50px;
background-color: red;
}
</style> </head>
<body>
<button id="start">开启</button>
<button id="clear">清楚</button>
<div id="box"></div>
<script>
// var time =null;
// document.getElementById("start").onclick = function () {
// //建立时间的函数 一次性时间 异步
// time = setTimeout(function () {
// console.log(111);
// },2000);
// console.log(555)
// };
// document.getElementById("clear").onclick = function () {
// //这里是清除时间 clearTimeout()后面加参数
// //一定要在时间显示前清楚 要不就没用了
// clearTimeout(time)
//
// }
var time = null;
var count = 0;
document.getElementById("start").onclick = function () {
var oDiv = document.getElementById("box");
// clearInterval(time);
//这里是开启循环
time = setInterval(function () {
count+=10;
oDiv.style.marginLeft = count+"px";
},50);
document.getElementById("clear").onclick = function () {
clearInterval(time);
}
}
</script> </body>
</html>
循环定时器
6js 面向对象
3.js面向对象
//使用Object()内置的构造函数来创建对象 // new Array()
// [] /*
var person = new Object(); person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name);
}
person.fav();
*/
/*
// 1.字面量方式创建对象
var person = {
name:'玖妖',
age:18,
fav:function() {
alert(this.name)
}
}; person.fav();
*/ //2.工厂模式创建
function createPerson(){
var person = new Object();
person.name = 'alex'; person.age = 18; person.fav = function() { alert(this.name);
}
return person;
} function createFruit(){
var fruit = new Object();
fruit.name = 'alex'; fruit.age = 18; fruit.fav = function() { alert(this.name);
}
return fruit;
}
var p1 = createPerson();
var f1 = createFruit(); console.log(p1 instanceof Object);
console.log(f1 instanceof Object); //3.自定义构造函数
function Person(name,age) { this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
} function Fruit(name,age) { this.name = name;
this.age = age;
this.fav = function() {
alert(this.name);
}
}
var p1 = new Person('alex',17);
var f1 = new Fruit('wusir',19);
console.log(p1 instanceof Object);
console.log(f1 instanceof Object);
console.log(p1 instanceof Person);
console.log(f1 instanceof Fruit); //4.原型对象创建对象
function Person(name,age) {
this.name = name;
this.age = age;
}
// Person.prototype 它是person的父类 // 原型 prototype
Person.prototype.showName = function() {
// this指的是person
console.log(this.name)
}
var p1 = new Person('alex',18);
console.log(p1);
p1.showName();
js面向对象
js 落幕的更多相关文章
- 百度百科Tooltip的实现--原生js的应用
我们在浏览百度百科时,不难发现提示框的存在,如下图: 实现如下: 1.HTML代码部分 <!DOCTYPE html><html lang="en">< ...
- JavaScript--我发现，原来你是这样的JS（再说引用类型，基本包装类型与个体内置对象）
一.介绍 本篇是续上一篇的,引用类型的后篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...
- JS--我发现，原来你是这样的JS（引用类型不简单[下篇]，基本包装类型与个体内置对象）
一.介绍 本篇是续上一篇的,引用类型的下篇,本篇主要是说基本包装类型和个体内置对象.如果你能收获一些知识,那我很高兴,很满足,哈哈哈,希望大家能愉快看完.如果你想学好一门技术,要不忘初心,方得始终. ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
随机推荐
- Codeforces Round #604 (Div. 2) 练习A,B题解
A题 链接 思路分析: 因为只需要做到相邻的不相同,利用三个不同的字母是肯定可以实现的, 所以直接先将所有的问号进行替换,比如比前一个大1,如果与后面的冲突,则再加一 代码(写的很烂): #inclu ...
- zz《百度地图商业选址》
作者 | 阚长城 编辑 | 张慧芳 题图 | 站酷海阔 人类几千年的文明催生了城市的发展,计算机与复杂科学带给我们新的资源——大数据.罗马非一日建成,人力和时间成本极大,但试想一下,如果有了大数据,罗 ...
- django haystack报错： ModuleNotFoundError: No module named 'blog.whoosh_cn_backend'
在配置django haystack时报错: 解决方案: 将ENGINE的值 改为 这样就可以了.
- Vue 变异方法unshift&pop&shift
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ORB-SLAM2 地图加载2
补充SystemSetting和InitKeyFrame两个类的代码.实际上,由于是通过SystemSetting来读取的相机内参以及ORB特征参数,所以就可以将Tracking.cc中关于读取内参的 ...
- webrtc笔记(2): 1对1实时视频/语音通讯原理概述
开始正文之前,先思考1个问题:2个处于不同网络环境的(具备摄像头/麦克风多媒体设备的)浏览器,要实现点对点的实时视频/语音通讯,难点在哪? 至少得先搞定下面2个问题: 1.彼此要了解对方支持的媒体格式 ...
- FineUIPro v6.0.1 小版本更新！
这次修正了 v6.0.0版本的几个问题,建议所有用户升级到此版本: +修正调用F.addMainTab时可能出现JS错误的问题(34484135,1450561644). -仅在未调用F.ini ...
- 聊一下,前后分离后带来的跨域访问和cookie问题
在谈前后分离前,我们先看看什么是前后一体的.当我们用javaweb开发网站时,最终我们渲染的jsp或者springthymeleaf.我们的页面其实是WEB-INFO或者templates下.当用户请 ...
- RestTemplate的三种请求方式
转载 https://blog.csdn.net/qq_36364521/article/details/84203133
- WEB测试应该注意哪些地方，怎样才能做好WEB测试
基于Web的系统测试与传统的软件测试既有相同之处,也有不同的地方,对软件测试提出了新的挑战.基于Web的系统测试不但需要检查和验证是否按照设计的要求运行,而且还要评价系统在不同用户的浏览器端的显示是否 ...