js | 易学教程

小demo原生js同步翻译，可以玩玩儿

阅读更多关于小demo原生js同步翻译，可以玩玩儿

1. 背景：平时不知道用js写什么练手，这里就写了一个类似百度翻译的小demo。大家可以平时没事儿了看看书，写写像这种类型的小demo,调用以下公开的api即可。对于学生党，能进入学校实验室做项目更好。进不去的，平时写写小demo练练也不差。(我为什么没在实验室) 2. demo前准备工作：页面布局了解百度翻译API，所需配置参数准备 MD5.js 加密算法函数（百度自己搜）写js代码 3. 步骤： 1. 页面布局：布局就不说了，直接贴图上代码：可进行语言切换 html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div id="main"> <div class="left"> <div class="title"> 要翻译为： <span class="lang">英文</span> <ul class="ul1"> <li data-lang="en">英语</li> <li data-lang="zh">中文</li> <li data-lang="jp">日语</li> <li data-lang="kor

js递归生成树型下拉菜单

阅读更多关于 js递归生成树型下拉菜单

需求：我需要把一个单表的数据转换成类似菜单那种如图所示：我呢需要把这个菜单树放入到下框里面去如图所示：下面是实现思路：1.第一步1.1var afTypeJson=${afTypeJson}// 这是从后台接口传到jsp页面的数据看一下后台传过来的源数据，里面并没children字段 //把扁平数据转成树形数据(可以实现无限层级树形数据结构，只适用于单个表的数据)1.2var json=treeDataformat(afTypeJson,'typeId','parentId','children');再来看一下数据：好的，走到这一步的话先恭喜下自己，已经成功一半啦！(赶紧奶一口白开水) 2.第二步如果想实现图二的效果我们需要给它伪造爸爸（父节点parentId: -1,typeId: 0,typeNameCn: "最顶层分类",typeNameEn: "Top"）这里面的字段根据你自己的实际情况来改 2.1 var tree=[{parentId: -1,typeId: 0,typeNameCn: "最顶层分类",typeNameEn: "Top",children:common.deepClone(json)}];2.2 varselectTree=creatSelectTree(tree);2.3 var selectbox=document.getElementById(

Hexo-Next提高加载速度

阅读更多关于 Hexo-Next提高加载速度

Hexo作为纯静态博客最大的优点就是快，但要真正的快起来你可能需要做这些事情。 CDN加速这里只是针对第三方静态文件的加速，修改 Next 主题配置文件 _config.yml 如下： #! --------------------------------------------------------------- #! DO NOT EDIT THE FOLLOWING SETTINGS #! UNLESS YOU KNOW WHAT YOU ARE DOING #! See: https://theme-next.org/docs/advanced-settings #! --------------------------------------------------------------- # Script Vendors. Set a CDN address for the vendor you want to customize. # Be aware that you would better use the same version as internal ones to avoid potential problems. # Remember to use the https protocol of CDN files when you enable

06------线程机制与事件机制

阅读更多关于 06------线程机制与事件机制

进程与线程 1.进程程序的一次执行，它占有一片独有的内存空间可以通过windows任务管理器查看进程 2.线程是进程内的一个独立执行单元是程序运行的一个完整流程是CPU的最小调度单元如下图： 3.相关应用程序必须运行在某个进程的某个线程中一个进程中至少有一个运行的线程：主线程，进程启动后自动创建一个进程中可以同时运行多个线程，程序是多线程运行的一个进程内的数据可以供其中的多个线程直接共享多个进程之间的数据是不能直接共享的线程池（thread pool）：保存多个线程对象的容器，实现线程对象的反复利用 4.相关问题 1).何为多进程与多线程？多进程：一应用程序可以同时启动多个实例运行多线程：在一个进程内，同时有多个线程运行 2).比较单线程与多线程？多线程优点：能有效提升CPU的利用率缺点：创建多线程开销线程间切换开销死锁与状态同步问题单线程优点：顺序编程简单易懂缺点：效率低 3).JS是单线程还是多线程？ JS是单线程运行的但使用H5中的Web Workers可以多线程运行 4).浏览器运行是单线程还是多线程？都是多线程运行的 5).浏览器运行是单进程还是多进程？有的是单进程：firefox、老版IE 有的是多进程：chrome、新版IE 浏览器内核支撑浏览器运行的最核心的程序 1.不同浏览器的内核可能不同 Chrome

js实现tab栏切换

阅读更多关于 js实现tab栏切换

//样式 <style> * { margin : 0 ; padding : 0 ; } li { list-style-type : none ; } .tab { width : 978px ; margin : 100px auto ; } .tab_list { height : 39px ; border : 1px solid #ccc ; background-color : #f1f1f1 ; } .tab_list li { float : left ; height : 39px ; line-height : 39px ; padding : 0 20px ; text-align : center ; cursor : pointer ; } .tab_list .current { background-color : #c81623 ; color : #fff ; } .item_info { padding : 20px 0 0 20px ; } .item { display : none ; } </style> //API2 < div class = "tab" > < div class = "tab_list" > < ul > < li class = "current" > 商品介绍 < / li > < li > 规格与包装 <

JS判断浏览器类型与版本

阅读更多关于 JS判断浏览器类型与版本

转 http://www.2cto.com/kf/201108/101121.html 在JS中判断浏览器的类型，估计是每个编辑过页面的开发人员都遇到过的问题。在众多的浏览器产品中，IE、Firefox、Opera、Safari........众多品牌却标准不一，因此时常需要根据不同的浏览器，甚至相同浏览器不同版本做不同的操作，因此，知晓浏览器的判断方法，还是很重要的。下面列举一下常用的判断方法： 1、判断浏览器是否为IE document.all ? 'IE' : 'others'：在IE下document.all值为1，而其他浏览器下的值为0； navigator.userAgent.indexOf("MSIE")>0 ? 'IE' : 'others'：navigator.userAgent是描述用户代理信息。 navigator.appName.indexOf("Microsoft") != -1 ? 'IE' : 'others'：navigator.appName描述浏览器名称信息。 2、判断IE版本 navigator.appVersion.match(/6./i)=="6." ? 'IE6' : 'other version'：在已知是IE浏览器的情况下，可以通过此方法判断是否是IE6； navigator.userAgent.indexOf("MSIE 6.0

js通过

阅读更多关于 js通过

var $d1 = $ ( '#myDiv' ) ; for ( var key in mapdata ) { var input = $ ( "<input type='text' id='i' name='input' />" ) ; input . attr ( 'value' , mapdata [ key ] ) ; $d1 . append ( input ) ; } 来源： CSDN 作者： tatetianos 链接： https://blog.csdn.net/tatetianos/article/details/104060418

js实现瀑布流布局

阅读更多关于 js实现瀑布流布局

js实现瀑布流布局原理代码实现功能： 1、定义函数 waterfall（parent,box）实现瀑布流布局。 2、当拖动滚动轴时候，到底部时候会触发添加元素事件，瀑布流布局。瀑布流思路：第一排自由排版，记录第一排元素的高度存入数组，之后出现的元素都会放到数组高度最小的元素下面，绝对定位方式（x-上面元素数组内序号*每个元素宽度 y-上面元素的高度），并且每执行一次，会重新定义高度最小的值，之前高度加上当前元素的高度，存入数组。之后元素都如此执行。如此每个新增元素都会放置在最小高度元素下面，也就实现瀑布流。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>瀑布流</title> <style type="text/css"> *{margin: 0; padding: 0;} #main{ /* width: 1000px; max-width: 1000px;*/ margin :0 auto; position: relative; } .box{ float: left; padding: 15px 0 0 15px; } .pic{ padding: 15px; border:1px solid #ccc; border-radius: 10px; box-shadow: 0 0

js分页(非无刷新)

阅读更多关于 js分页(非无刷新)

每当以前看到网上类似的分页感觉很新奇很好看，于是自己也模仿做了一个(其实是项目中要用的，嘿嘿)。。。。其实功能做起来确实很简单，主要思想就是根据当前总页数，在js中输出类似<a href='xxx/xxx.aspx?page=current&condition=condition'>current</a>的标签，以下是css代码段，用于设置分页的样式：代码 <style type="text/css"> #setpage a:link, #setpage a:visited, #setpage a:hover, .current, #info { border: 1px solid #DDD; background: #F2F2F2; display: inline-block; margin: 1px; text-decoration: none; font-size: 12px; width: 15px; height: 15px; text-align: center; line-height: 15px; color: #AAA; padding: 1px 2px; } #setpage a:hover { border: 1px solid #E5E5E5; background: #F9F9F9; } .current { border: 1px solid

了解JS

阅读更多关于了解JS

了解JS 1.什么是JavaScript ？答：　1、JavaScript是一种具有面向对象能力的解释型语言。　 2、更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。面向对象: 是编程思维的一种，我们初期接触的是面向过程。 2.JavaScript特点？答： (1)松散型 (2)对象属性 (3)继承机制 3.JavaScript核心？答： (1)核心 – ECMAScript 5.0 　　(2)文档对象模型 – DOM 　　(3)浏览器对象模型 – BOM 　　ECMAScript介绍: 　　ECMAScript只是规范了JavaScript的语法，它与web浏览器没有依赖关系，web浏览器只是他的宿主环境之一。　　文档对象模型(DOM): 　　文档对象模型就是HTML中的树。 (会学的，在这就不讲了！讲了也不会听懂的，晓得吧！) 　　浏览器对象模型(BOM): 　　开发人员使用BOM可以控制浏览器显示页面以外的部分，BOM至今没有相关标准，所以每个浏览器对它支持的不一样。 4.JavaScript能做什么？答：嵌入动态文本于HTML页面。　　对浏览器事件做出响应。　　读写HTML元素。　　在数据被提交到服务器之前验证数据。　　检测访客的浏览器信息。　　控制cookies，包括创建和修改等。　　基于Node

订阅 js