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和 ...

随机推荐

浅谈JS函数防抖及应用场景
[前言] 在工作中,我们可能碰到这样的问题: 用户在搜索的时候,在不停敲字,如果每敲一个字我们就要调一次接口,接口调用太频繁,给卡住了. 用户在阅读文章的时候,我们需要监听用户滚动到了哪个标题,但是每 ...
linux passwd批量修改用户密码
linux passwd批量修改用户密码对系统定期修改密码是一个很重要的安全常识,通常,我们修改用户密码都使用 passwd user 这样的命令来修改密码,但是这样会进入交互模式,即使使用脚本也不 ...
Redis学习笔记（六、哨兵）
目录: 基本概念环境部署哨兵原理哨兵命令基本概念: 1.什么是哨兵我们先从字面意思来了解哨兵,哨兵是对执行警戒任务的士兵的统称:在redis中哨兵也是一样,他监控着redis服务器的状态. ...
1、zabbix监控基础概念
目录为什么要使用监控? 监控怎么用? 去到一家新公司,应该如何搭建监控系统? 我叫张贺,贪财好色.一名合格的LINUX运维工程师,专注于LINUX的学习和研究,曾负责某中型企业的网站运维工作,爱好佛 ...
天翼宽带家庭网关用户：useradmin，nE7jA%5m 这个是中国电信的超级密码
天翼宽带家庭网关用户:useradmin,nE7jA%5m 这个是中国电信的超级密码
Web-babyphp
题目地址 http://web.jarvisoj.com:32798/ 首先先观察网页,点击about发现下面包含这些看到GIT,那么基本可以明确这题有.git泄露,我们用GitHack来获取源码分 ...
浅谈this指向问题
链接地址:https://www.jianshu.com/p/34572435b5d0
Node.js中的模块接口module.exports
在写node.js代码时,我们经常需要自己写模块(module).同时还需要在模块最后写好模块接口,声明这个模块对外暴露什么内容.实际上,node.js的模块接口有多种不同写法.在此做了个简单的总结. ...
微信小程序云开发－从0打造云音乐全栈小程序
第1章首门小程序“云开发”课程,你值得学习本章主要介绍什么是小程序云开发以及学习云开发的重要性,并介绍项目的整体架构,真机演示项目功能,详细介绍整体课程安排.课程适用人群以及需要掌握的前置知识.通过 ...
三台三层交换机OSPF多区域划分动态路由实验
一.实验拓扑二.实验步骤 1.给主机设置IP,网关:给交换机划分VLAN,给VLAN划分端口,给VLAN设置IP 2.启用OSPF.宣告网段(network 网络地址反掩码区域名其中0 ...

js 落幕

js 落幕的更多相关文章

随机推荐

热门专题