/* 2 功能:生成博客目录的JS工具 3 测试:IE8,火狐,google测试通过 6 */ 7 var BlogDirectory = { 8 /* 9 获取元素位置,距浏览器左边界的距离(left)和距浏览器上边界的距离(top) 10 */ 11 getElementPosition:function (ele) { 12 var topPosition = 0; 13 var leftPosition = 0; 14 while (ele){ 15 topPosition += ele.offsetTop; 16 leftPosition += ele.offsetLeft; 17 ele = ele.offsetParent; 18 } 19 return {top:topPosition, left:leftPosition}; 20 }, 21 22 /* 23 获取滚动条当前位置 24 */ 25 getScrollBarPosition:function () { 26 var scrollBarPosition = document.body.scrollTop || document.documentElement.scrollTop; 27 return scrollBarPosition; 28 }, 29 30 /* 31 移动滚动条,finalPos 为目的位置,internal 为移动速度 32 */ 33 moveScrollBar:function(finalpos, interval) { 34 35 //若不支持此方法,则退出 36 if(!window.scrollTo) { 37 return false; 38 } 39 40 //窗体滚动时,禁用鼠标滚轮 41 window.onmousewheel = function(){ 42 return false; 43 }; 44 45 //清除计时 46 if (document.body.movement) { 47 clearTimeout(document.body.movement); 48 } 49 50 var currentpos =BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 51 52 var dist = 0; 53 if (currentpos == finalpos) {//到达预定位置,则解禁鼠标滚轮,并退出 54 window.onmousewheel = function(){ 55 return true; 56 } 57 return true; 58 } 59 if (currentpos < finalpos) {//未到达,则计算下一步所要移动的距离 60 dist = Math.ceil((finalpos - currentpos)/10); 61 currentpos += dist; 62 } 63 if (currentpos > finalpos) { 64 dist = Math.ceil((currentpos - finalpos)/10); 65 currentpos -= dist; 66 } 67 68 var scrTop = BlogDirectory.getScrollBarPosition();//获取滚动条当前位置 69 window.scrollTo(0, currentpos);//移动窗口 70 if(BlogDirectory.getScrollBarPosition() == scrTop)//若已到底部,则解禁鼠标滚轮,并退出 71 { 72 window.onmousewheel = function(){ 73 return true; 74 } 75 return true; 76 } 77 78 //进行下一步移动 79 var repeat = "BlogDirectory.moveScrollBar(" + finalpos + "," + interval + ")"; 80 document.body.movement = setTimeout(repeat, interval); 81 }, 82 83 htmlDecode:function (text){ 84 var temp = document.createElement("div"); 85 temp.innerHTML = text; 86 var output = temp.innerText || temp.textContent; 87 temp = null; 88 return output; 89 }, 90 91 /* 92 创建博客目录, 93 id表示包含博文正文的 div 容器的 id, 94 mt 和 st 分别表示主标题和次级标题的标签名称(如 H2、H3,大写或小写都可以!), 95 interval 表示移动的速度 96 */ 97 createBlogDirectory:function (id, mt, st, interval){ 98 //获取博文正文div容器 99 var elem = document.getElementById(id); 100 if(!elem) return false; 101 //获取div中所有元素结点 102 var nodes = elem.getElementsByTagName("*"); 103 //创建博客目录的div容器 104 var divSideBar = document.createElement('DIV'); 105 divSideBar.className = 'sideBar'; 106 divSideBar.setAttribute('id', 'sideBar'); 107 var divSideBarTab = document.createElement('DIV'); 108 divSideBarTab.setAttribute('id', 'sideBarTab'); 109 divSideBar.appendChild(divSideBarTab); 110 var h2 = document.createElement('H2'); 111 divSideBarTab.appendChild(h2); 112 var txt = document.createTextNode('目录导航'); 113 h2.appendChild(txt); 114 var divSideBarContents = document.createElement('DIV'); 115 divSideBarContents.style.display = 'none'; 116 divSideBarContents.setAttribute('id', 'sideBarContents'); 117 divSideBar.appendChild(divSideBarContents); 118 //创建自定义列表 119 var dlist = document.createElement("dl"); 120 divSideBarContents.appendChild(dlist); 121 var num = 0;//统计找到的mt和st 122 mt = mt.toUpperCase();//转化成大写 123 st = st.toUpperCase();//转化成大写 124 //遍历所有元素结点 125 for(var i=0; i

Web前端——JavaScript笔记

js

数据类型

字符串可以使用''或者是""

运算符

  • == 只比较内容
  • === 比较内容,也比较类型是否一样,两个为true才为true
  • !== 与上面===相反
var a=123;
var b="123";
//a==b 结果为true
//a===b 结果为false
//a!==b 结果为true

PS: JavaScript中,*可以让字符串和数字相乘。得到结果
"251.2"*2可以得到一个数值结果(number类型)

变量

js中的变量是全局性的,局部相同的变量名也会更改原来的数据

var i=2;
for(var i=0;i<5;i++){
    console.log('hello');
}
console.log(i);//这里的i等于4

let 局部变量的关键字,不会修改到全局的变量

var i=2;
for(let i=0;i<5;i++){
    console.log('hello');
}
console.log(i);//这里的i等于2

方法

js从上到下编译,但是,如果方法是在后面的话,也可以执行方法,即使还没有进行方法的编译

//console.log(hello); 打印函数内容
//console.log(hello()); 打印函数内容,之后执行函数
hello();
function hello(){
    console.log("hello world!");
}

方法返回无需在方法前面定义返回类型

function print(){
    return "";
}

其他

  • querrySelector

    querrySelector("#mydiv p") 与getElementById等方法相比,比较灵活,允许有层级关系
    • querrySelector("#mydiv") id选择器
    • querrySelector("div") 标签选择器(只会获得第一个div标签)
    • querrySelector(".mydiv") class选择器
  • innerHtml 如果文本有html,可以识别文字里面的html标签
  • innerText 只能放入文本,不会识别其中的标签

body标签 onload 相当于windows.onload

  • es6(JavaScript1.6)拼接字符串
//es6中,year和month是变量 换行直接换,不需要“+”
var str = `${year}${month}月`//会保留空格以及换行
var str = `${year}${month}月`
  • es6 判断元素为空
var e = document.getElementById("h");
//e存在为true,不存在则为false
if(e){
    
}
  • es6 数组遍历
var array1 = ["a","b","c"];
array1.foreach(function(element){
    console.log(element);
});
posted @ 2019-09-19 14:58  我的人生  阅读(181)  评论(0编辑  收藏  举报