js | 易学教程

JS模仿MSN右下角弹出提示框

阅读更多关于 JS模仿MSN右下角弹出提示框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无标题文档 /*--> */ /*--> */ <input id="btn" onclick="show();" type="button" value="Show" /><div id="tip" style="height:0px; position:fixed; bottom:0px;" data-mce-style="height: 0px; position: fixed; bottom: 0px;"><h1><a onclick="show()" href="javascript:void(0)" data-mce-href="javascript:void(0)">×</a>您有1条新消息</h1><p><a onclick="showwin()" href="javascript:void(0)" data-mce-href="javascript:void(0)">点击这里查看详细</a></p></div> RunCode CopyCode < style type = " text/css " > * { margin:

js弹出可拖动div

阅读更多关于 js弹出可拖动div

JS 弹出可拖动DIV 2010-09-01 18:03:37 | 分类：学习总结 | 标签： js 弹出可移动div | 字号大中小订阅文章分类: Web前端弹出DIV同时加入背景层实现方式很多，有原创也有借助js框架实现的，这些弹出的div功能都比较强悍，实际项目中有时候根本不需要如此般复杂操作，只是弹出div进行数据展现或者是有效的操作而已，以上述的方式加入无疑让简单的东西复杂化，使程序执行效率降低。繁复的东西技术含量的确挺高（EXT），同时不可避免会有其它方面的牺牲，以下弹出DIV简单高效，代码也很简洁，发出了一起看看，全部源代码如下，保存为html文件即可观看运行效果。 /** ** 源码部分开始 **/ <html> <head> <title>可拖动 DIV</title> <script type="text/javascript"> function showProc(){ message_box.style.visibility='visible'; // 创建灰色背景层 procbg = document.createElement("div"); procbg.setAttribute("id","mybg"); procbg.style.background = "#000"; procbg.style.width = "100%";

js中去除两端逗号

阅读更多关于 js中去除两端逗号

1.js replace(a,b)之替换字符串中所有指定字符的方法 var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果： obcadeacf var str2 = str.replace(/a/g, 'o'); alert(str2); //打印结果： obcodeocf, 注意：此处replace的第一个参数为正则表达式，/g是全文匹配标识。 2. JS四种方法去除字符串最后的逗号 <script> window.onload=function() { var obj = {name: "xxx", age: 30, sex: "female"};//定义一个object对象 var str = ''//定义一个空字符用来接收对象里的key或者value for(var item in obj) {//遍历item变量里的对象的属性和元素， str += obj[item] + ","//将obj对象的值遍历出来，并且追加到str字符中。 //str += item + ","//将obj对象的属性遍历出来，并且追加到str字符中。 } //第一种方法、将字符串中最后一个元素","逗号去掉， //str = str.substring(0, str.lastIndexOf('

js 数组数组最大值、最小值算法（转载）

阅读更多关于 js 数组数组最大值、最小值算法（转载）

一：https://www.cnblogs.com/zhouyangla/p/8482010.html 1.排序法首先我们给数组进行排序，可以按照从小到大的顺序来排，排序之后的数组中第一个和最后一个就是我们想要获取的最小值和最大值。排序我们会用到数组的 sort 方法。 var arr = [12,56,25,5,82,51,22]; arr.sort(function (a, b) { return a-b; }); // [5,12,22,25,51,56] var min = arr[0]; // 5 var max = arr[arr.length - 1]; // 56 2.假设法假设当前数组中的第一个值是最大值，然后拿这个最大值和后面的项逐一比较，如果后面的某一个值比假设的值还大，说明假设错了，我们把假设的值进行替换。最后得到的结果就是我们想要的。 // 获取最大值： var arr = [22,13,6,55,30]; var max = arr[0]; for(var i = 1; i < arr.length; i++) { var cur = arr[i]; cur > max ? max = cur : null } console.log(max); // 55 // 获取最小值： var arr = [22,13,6,55,30]; var min

Vue | 虚拟DOM

阅读更多关于 Vue | 虚拟DOM

*/ /*--> */ 一、真实DOM和其解析流程浏览器渲染引擎工作流程，大致可分为5步：创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。第三步，将DOM树和样式表关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有 attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。 DOM树的构建过程：构建DOM树是一个渐进过程，为达到更好用户体验，渲染引擎会尽快将内容显示在屏幕上。它不必等到整个HTML文档解析完毕之后才开始构建render数和布局。这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一遍解析，一遍渲染的工作现象。 CSS的解析是从右往左逆向解析的(从DOM树的下－上解析比上－下解析效率高)

web前端建站

阅读更多关于 web前端建站

web前端建站所需条件代码编辑器（sublime 记事本 DW WS 等）浏览器（谷歌火狐 ie 等） web前端建站所需的文件夹及文件根目录下：文件夹：css js images fonts 文件：favicon.ico index.html 这是基本的要求在css文件夹中包括基本的base.css index.css 同样在js文件夹中也包括base.js index.js 在index.html中一般分为以下部分 header>（logo+nav） banner>侧边栏+轮播图 main footer 其他页基本也是按照这样的来写来源： https://www.cnblogs.com/hanks-mimi/p/12570625.html

JS中创建元素的三种方法

阅读更多关于 JS中创建元素的三种方法

1、动态创建元素一 document.write() 例如向页面中输出一个 li 标签 1 <script> 2 document.write("<li>123</li>"); 3 </script> body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容 2、动态创建元素二 innerHTML <body> <div id="box"></div> <script> var box = document.getElementById("box"); box.innerHTML = "<p>这是p标签</p>"; </script> </body> div标签中就会插入一个p标签，并在在页面上输出“这是标签”，当需要添加的标签比较多的时候使用这种方式。 3、动态创建元素三 document.createElement() <body> <div id="box"></div> <script> var box = document.getElementById("box"); var li = document.createElement("li"); //创建一个li标签 li.innerHTML = "123"; //给li标签赋值 box.appendChild(li); //将创建好的li标签追加到box标签中

JS 创建元素的三种方法

阅读更多关于 JS 创建元素的三种方法

1、动态创建元素一 document.write() 　　例如向页面中输出一个 li 标签 <pre class="html" name="code"><span style="font-size:12px;"><script> document.write("<li>123</li>"); </script></span> 　　body标签中就会插入但是这种方法几乎不用，因为这回影响页面的布局，甚至会将页面原来的内容冲刷掉，从而只显示输出内容 2、动态创建元素二 innerHTML <span style="font-size:12px;"><body> <div id="box"></div> <script> var box = document.getElementById("box"); box.innerHTML = "<p>这是p标签</p>"; </script> </body></span> 　　div标签中就会插入一个p标签，并在在页面上输出“这是标签”，当需要添加的标签比较多的时候使用这种方式。 3、动态创建元素三 document.createElement() <span style="font-size:12px;"><body> <div id="div"></div> <script> var divobj = document

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

阅读更多关于 Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一、三种获取页面元素的方式： getElementById:通过id来获取 <body> <input type="text" value="请输入一个值：" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementById("txt");//获取id为txt的页面元素 console.log(txt); txt.value="haha";//重新给id为txt的文本输入框的value赋值 </script> </body> getElementByTagName:通过标签名来获取 <body> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <input type="text" value="请输入一个值：" /> <script> var inputs=document.getElementsByTagName("input");//获取标签名为input所有页面元素。 console.log

JS之onkeypress,onkeydown,onkeyup区别

阅读更多关于 JS之onkeypress,onkeydown,onkeyup区别

onkeypress 是在用户按下并放开任何字母数字键时发生。系统按钮（例如，箭头键和功能键）无法得到识别。 onkeyup 是在用户放开任何先前按下的键盘键时发生。 onkeydown 是在用户按下任何键盘键（包括系统按钮，如箭头键和功能键）时发生。 onkeypress As of Microsoft® Internet Explorer 4.0, the onkeypress event fires and can be canceled for the following keys: Letters: A - Z (uppercase and lowercase) Numerals: 0 - 9 Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~ System: ESC, SPACEBAR, ENTER onkeydown As of Microsoft® Internet Explorer 4.0, the onkeydown event fires for the following keys: Editing: DELETE, INSERT Function: F1 - F12 Letters: A - Z (uppercase and lowercase) Navigation:

订阅 js