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

随机推荐

es6 的类 class
1.ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类. 2. //定义类 class Point { constructor(x, y ...
20191102 「HZOJ NOIP2019 Round #12」20191102模拟
先开坑. md原题写挂我也真是... 100+20+10 白夜打表大法吼显然,不在环上的点对答案的贡献是 \((k-cycle)^{k-1}\) . 打表得到环上的递推式,矩阵一下乘起来就好了. ...
x3
#include<stdio.h> int main() { char ch; printf("输入一个字符:\n"); scanf("%c",&a ...
android shape图形优化Button效果
android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满 ...
『卧槽』意外发现了 Hashtable 的 foreach 用法 BUG
这段时间,公司项目中遇到一个问题,最后查出: 是 Hashtable 的用法导致的. private static void AutoCleanCache() { try { lock (m_Has ...
Python连载26-shelve模块
一.持久化 --shelve 持久化工具 (1)作用:类似字典,用kv对保存数据,存取方式类似于字典 (2)例子:通过一下案例创建了一个数据库,第二个程序我们读取了数据库 #使用shelve创建文件并 ...
es6中reduce()方法和reduceRight()方法
es6中reduce()方法从左往右开始参数:prev:它是上一次调用回调时返回的结果,每次调用的结果都会给prev cur:当前的元素 index:当前的索引 arr:循环的数组返回值:函数累计 ...
PCL学习之：将超声数据按照PCL点云方式发布出去
前言:基于2D激光雷达的机器人,想让它跑自动导航,众所周知有2个比较明显的缺陷,1,那就是普通的激光雷达无法对玻璃或是镜面物体有反映; 2,机器人避障时只能对某一个平面的物体有反映,超过或者低于这个平 ...
有状态 Vs 无状态
NET Core 分布式框架公司物联网项目集成Orleans以支持高并发的分布式业务,对于Orleans也是第一次接触,本文就分享下个人对Orleans的理解. 这里先抛出自己的观点:Orleans ...
JVM的监控工具之jhat
在上一篇文件文章中讲到了jhap的用法:https://www.cnblogs.com/cheng21553516/p/11223615.html,既然jhap可以转储堆的快照文件, 那么用什么来分析 ...

js 落幕

js 落幕的更多相关文章

随机推荐

热门专题