charles_wang8888
charles_wang8888

HTML5 geolocation API 获得用户当前地理位置

 HTML5 里面引入了geolocation的API可以帮助用户获得浏览器所在的地理位置，它不仅可以标示出当前的经纬度，还可以与google map API结合使用来在地图上标示出当前位置。

HTML代码，主要就是2大块，第一部分的容器用于放google地图和标示位置，第二部分用于显示精确的经纬度以及精度（误差）。

  
  
  
  
    
   
   
   
   
  1. <!DOCTYPE HTML> 
    2. 
   
   
   
   
  2. <html> 
    3. 
   
   
   
   
  3. <head> 
    4. 
   
   
   
   
  4. <!-- 以下这段代码是googlemap官方建议的，它让用户禁止利用浏览器的放大缩小窗口功能，而使用googlemap自己的缩放功能 --> 
    5. 
   
   
   
   
  5. <meta name="viewport" content="initial-scale=1.0,user-scalable=no"/> 
    6. 
   
   
   
   
  6. <title>在页面上使用Google Map，获取浏览器的当前位置</title> 
    7. 
   
   
   
   
  7.  
    8. 
   
   
   
   
  8. <!-- 因为页面上要使用到google地图，所以导入googlemap地图文件 --> 
    9. 
   
   
   
   
  9. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
    10. 
   
   
   
   
  10.  
    11. 
   
   
   
   
  11. <!-- 这段js文件是我自己写的，用于利用HTML5的geolocation API获得当前位置，并且在google地图上标识出来 --> 
    12. 
   
   
   
   
  12. <script type="text/javascript" src="js/googlemap.js"></script> 
    13. 
   
   
   
   
  13.    
    14. 
   
   
   
   
  14. </head> 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16. <body onload="init()"> 
    17. 
   
   
   
   
  17. Hello,Google Map! 
    18. 
   
   
   
   
  18. <br> 
    19. 
   
   
   
   
  19. <!-- 这一个正方形区域是用来画google地图的 --> 
    20. 
   
   
   
   
  20. <div id="map"style="width: 400px; height: 400px"></div> 
    21. 
   
   
   
   
  21. <br> 
    22. 
   
   
   
   
  22. <!-- 这一个区域是用来显示你的位置信息的 --> 
    23. 
   
   
   
   
  23. <h3>您的浏览器显示了您当前的地理位置信息是:</h3> 
    24. 
   
   
   
   
  24. <p id="positionInfo"></p> 
    25. 
   
   
   
   
  25. </body> 
    26. 
   
   
   
   
  26.  
    27. 
   
   
   
   
  27. </html> 
    28.

javascript方法，主要就是用于绘制地图（以及标示位置），以及给出了当获取位置成功或者失败时候的回调函数定义：

  
  
  
  
    
   
   
   
   
  1. //这是初始化方法，用来绘制google地图 
    2. 
   
   
   
   
  2. function init() { 
    3. 
   
   
   
   
  3. console.log("entering the init() method"); 
    4. 
   
   
   
   
  4. //首先必须判断浏览器是否有geolocation属性，因为HTML5 才新增了这个属性，不是所有浏览器都支持 
    5. 
   
   
   
   
  5. if (navigator.geolocation) { 
    6. 
   
   
   
   
  6. //如果浏览器支持geolocation，则使用geolocation的getCurrentLocation方法来取得用户当前的地理位置， 
    7. 
   
   
   
   
  7. //并且在成功取得之后调用show_map()回调函数 
    8. 
   
   
   
   
  8. console.log(' Browser support geolocation '); 
    9. 
   
   
   
   
  9. navigator.geolocation.getCurrentPosition(show_map,handle_error ,null); 
    10. 
   
   
   
   
  10. } else { 
    11. 
   
   
   
   
  11. console.log(' Browser doesnt support geolocation '); 
    12. 
   
   
   
   
  12. } 
    13. 
   
   
   
   
  13.  
    14. 
   
   
   
   
  14. } 
    15. 
   
   
   
   
  15.  
    16. 
   
   
   
   
  16.  
    17. 
   
   
   
   
  17. //这是一个回调函数，用于当geolocation成功取得用户浏览器所在的地理位置时候的响应，它吧所有的位置信息封装在position中 
    18. 
   
   
   
   
  18. //所以我们就需要解析position来取得用户的详细信息 
    19. 
   
   
   
   
  19. function show_map(position) { 
    20. 
   
   
   
   
  20.  
    21. 
   
   
   
   
  21. // 取得当前的地理位置 
    22. 
   
   
   
   
  22. var coords = position.coords; 
    23. 
   
   
   
   
  23.   
    24. 
   
   
   
   
  24. //Part 1; 显示用户的精确位置信息 
    25. 
   
   
   
   
  25. //取得页面上用于显示精确位置信息的组件 
    26. 
   
   
   
   
  26. var positionInfo=document.getElementById("positionInfo"); 
    27. 
   
   
   
   
  27. var positionString="经度: "+coords.longitude+"<br>"; 
    28. 
   
   
   
   
  28. positionString+="维度: "+coords.latitude+"<br>"; 
    29. 
   
   
   
   
  29. var altitude=coords.altitude; 
    30. 
   
   
   
   
  30. if( altitude!=null){ 
    31. 
   
   
   
   
  31. positionString+="海拔高度"+coords.altitude+"<br>"; 
    32. 
   
   
   
   
  32. } 
    33. 
   
   
   
   
  33. positionString+="经纬度精确到："+coords.accuracy+"米"+"<br>"; 
    34. 
   
   
   
   
  34. positionInfo.innerHTML=positionString; 
    35. 
   
   
   
   
  35. //Part 2; 在google地图上显示浏览器的当前位置 
    36. 
   
   
   
   
  36. // 设定地图参数，将用户的当前位置的维度和精度都设定为地图的中心点 
    37. 
   
   
   
   
  37. var latlng = new google.maps.LatLng(coords.latitude, coords.longitude); 
    38. 
   
   
   
   
  38. var myOptions = { 
    39. 
   
   
   
   
  39. // 设定放大倍数 
    40. 
   
   
   
   
  40. zoom : 14, 
    41. 
   
   
   
   
  41. // 将地图的中心点设定为指定的坐标点 
    42. 
   
   
   
   
  42. center : latlng, 
    43. 
   
   
   
   
  43. // 指定地图的类型，这里选择的是街道地图 
    44. 
   
   
   
   
  44. mapTypeId : google.maps.MapTypeId.ROADMAP 
    45. 
   
   
   
   
  45. }; 
    46. 
   
   
   
   
  46. // 创建地图并在"map"div中显示，吧这个地图叫做map1 
    47. 
   
   
   
   
  47. var map1; 
    48. 
   
   
   
   
  48. map1 = new google.maps.Map(document.getElementById("map"), myOptions); 
    49. 
   
   
   
   
  49. // 在地图上创建标记 
    50. 
   
   
   
   
  50. var marker = new google.maps.Marker({ 
    51. 
   
   
   
   
  51. //标注刚才创建的标注点，因为标注点是由当前的经纬度设定的，所以表示了当前位置 
    52. 
   
   
   
   
  52. position : latlng, 
    53. 
   
   
   
   
  53. //标注在哪张地图上，我们创建了map1作为google map，所以标注在map1上 
    54. 
   
   
   
   
  54. map : map1 
    55. 
   
   
   
   
  55. }); 
    56. 
   
   
   
   
  56. // 设定标注窗口，并且指定该窗口的注释文字 
    57. 
   
   
   
   
  57. var infowindow = new google.maps.InfoWindow({ 
    58. 
   
   
   
   
  58. content : "这是Charles的浏览器的当前位置!" 
    59. 
   
   
   
   
  59. }); 
    60. 
   
   
   
   
  60. // 打开标注窗口 
    61. 
   
   
   
   
  61. infoWindow.open(map1, marker); 
    62. 
   
   
   
   
  62.  
    63. 
   
   
   
   
  63. } 
    64. 
   
   
   
   
  64.  
    65. 
   
   
   
   
  65.  
    66. 
   
   
   
   
  66.  
    67. 
   
   
   
   
  67. //这是第二个回调函数，用于当geolocation获取用户浏览器所在的地理位置失败时候的响应 
    68. 
   
   
   
   
  68. //error对象封装了所有的可能出现的无法获得地理位置的错误信息，并且HTML5为其预留了错误码，可以取值{1,2,3} 
    69. 
   
   
   
   
  69. function handle_error(error){ 
    70. 
   
   
   
   
  70. var errorTypes={ 
    71. 
   
   
   
   
  71. 1:'位置服务被拒绝', 
    72. 
   
   
   
   
  72. 2:'获取不到位置信息', 
    73. 
   
   
   
   
  73. 3:'获取信息超时' 
    74. 
   
   
   
   
  74. }; 
    75. 
   
   
   
   
  75. console.log(errorTypes[error.code] + ":,不能确定你的当前地理位置"); 
    76. 
   
   
   
   
  76. } 
    77.

 

要显示结果，必须让用户开启共享位置功能，因为这是隐私，我测试了下Opera 11和Firefox 10 ，Google Chrome都可以。

Opera 11开始就需要用户选择是否要共享地理位置：

然后要签一份用户协议：

 

 

对于Firefox浏览器，也是需要得到用户共享自己位置的许可：

 

 

最终，就可以显示用户当前位置了（实际是你的ip暴露了你的信息），比如我住在上海广兰路地铁站附近，所以显示结果如下：

 

 

你可能感兴趣的:(html5,geolocation,地理信息)

  • 震惊！DOM变化监控神器MutationObserver，前端开发必知的隐藏武器！ coding随想 JavaScript前端javascripthtml5
    一、什么是MutationObserver？如果你是一个前端开发者，一定会遇到这样的场景：页面动态加载内容后，某些操作失效了。比如，你写了一个监听按钮点击的代码，但按钮是通过AJAX动态加载的，你的代码根本无法触发。这个时候，你就需要一个“监控哨兵”——MutationObserver，它能实时监听DOM树的变化，帮你捕获那些“暗中作祟”的节点变动。MutationObserver是HTML5引入
  • 大势智慧与西安市勘察测绘院达成战略合作，共推“低空经济+AI”发展 大势智慧 人工智能大数据低空经济测绘实景三维ai无人机
    近日，武汉大势智慧科技有限公司（以下简称“大势智慧”）与西安市勘察测绘院达成战略合作。大势智慧董事长黄先锋教授、西安市勘察测绘院院长张周平代表双方签署协议，大势智慧云产品部总监刘文轩博士、西安分公司总经理门小宁，西安市勘察测绘院副院长朱梅馨、地理信息研究院院长方登茂、新型测绘分院院长彭勃、卫星遥感中心副主任刘扬等出席此次合作交流座谈会暨战略合同签约仪式。张周平院长（左）与黄先锋董事长（右）代表双方
  • 11. HTML 中 DOCTYPE 的作用 yqcoder 前端面试-CSShtml前端
    总结H5的声明HTML5的DOCTYPE声明HTML5中的声明用于告诉浏览器当前文档使用的是HTML5的文档类型。它必须是文档中的第一行内容（在任何HTML标签之前），以确保浏览器能够正确地解析和渲染页面。DOCTYPE的作用触发标准模式：DOCTYPE声明的主要作用是让浏览器以标准模式（StandardsMode）来解析和渲染页面，而不是以兼容模式（QuirksMode）。兼容性：在没有DOCT
  • 前端面试题 大大。 前端vue.jsjavascript
    HTML5的新特性和CSS3的新特性引入了一系列语义化标签使文档结构更加清晰(header,nav,aside,article,footer,section)，多媒体支持video,audio，Canvas绘图div上下居中对齐的几种方式第一种：flex布局display:flex;justify-content:center;/*水平居中/align-items:center;/垂直居中/第二种
  • html5效果案例,10个优秀HTML5网站案例赏析
    随着Adobe的弃Flash转投HTML5，HTML5又开始吸引着大众的目光。与现在使用的HTML标记语言相比，HTML5有更多的标签和属性，使用更为灵活，功能更为强大。现在已经有很多前沿的HTML5网站开始使用HTML5，本文收集整理出了10个非常优秀的HTML5网站。那么，什么才是优秀的HTML5网站？因为HTML5还没有成为国际标准，旧的浏览器还无法支持HTML5，所以优秀的HTML5网站示
  • HTML5 Darling02zjh html5前端html
    HTML:和其他的语言一样也有基础的框架和快捷键。命名规则：后缀名是“.html”每个项目最上面都有是H5的声明，处于标签之前骨架：html标签：定义HTML文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其他元素要包裹在这个标签里面，标签限定了文档的开始点和结束点。...其他元素head标签：head标签用于文档的头部，文档的头部描述文档的各种属性和信息，包括文档的标题，在we
  • HTML5+JavaScript动画基础 完整版 中文pdf扫描版 不一样的女孩6
    《HTML5+JavaScript动画基础》包括了基础知识、基础动画、高级动画、3D动画和其他技术5大部分，分别介绍了动画的基本概念、动画的JavaScript基础、动画中的三角学、渲染技术、速度向量和加速度、边界与摩擦力、用户交互：移动物体、缓动与弹动、碰撞检测、坐标旋转与斜面反弹、撞球物理、粒子与万有引力、正向运动学：让事物行走、反向运动学：拖曳与伸出、三维基础、三维线条与填充、背面剔除与三维
  • 地理信息系统概述（三） 红小厨 地理信息系统（GIS）学习笔记地理信息系统GIS
    6国内外研究现状地理信息系统是20世纪60年代逐渐发展起来的一门新兴技术。20世纪60年代初，在计算机图形学的基础上出现了计算机化的数字地图。1950年，麻省理工学院为它的旋风一号计算机制造了第一台图形显示器；1958年，美国的caComp公司在联机的数字记录仪的基础上研制成滚筒式绘图仪；1962年，麻省理工学院的IvanE.Suther在其博士学位论文中，首次提出了计算机图形学的术语，并论证了交
  • HTML5元素相关补充 QZ_orz_freedom html5前端html
    一.元素是HTML5的文档类型声明，它告诉浏览器当前页面是使用HTML5规范编写的，HTML5是最新的HTML版本，拥有更多的功能和优化，因此推荐在新的Web页面中使用它。在HTML文档中，声明通常是文档的第一行文档元数据元素描述指定用于一个文档中包含的所有相对URL的根URL。一份中只能有一个该元素。包含文档相关的配置信息（元数据），包括文档的标题、脚本和样式表等。指定当前文档与外部资源的关系。
  • HTML5：中如何触发按钮点击事件 Dy大叔 前端开发记录HTML5html
    在HTML5中，可以通过多种方式触发按钮点击事件，包括使用JavaScript原生方法、使用jQuery库和使用HTML表单和提交按钮，根据项目需求和技术栈选择合适的方法来实现按钮点击事件的触发。使用JavaScript原生方法在HTML5中，可以使用JavaScript的addEventListener方法为按钮添加点击事件，需要在HTML文件中创建一个按钮元素，并为其设置一个唯一的ID，在Ja
  • 汤逊湖高分辨率矢量图Shp文件及ArcGIS应用指南 夏曦安
    本文还有配套的精品资源，点击获取简介：本矢量图数据集针对汤逊湖地理信息，提供了精确的边界、形状及属性信息，适用于多种领域。介绍SHP文件及其相关文件格式，展示了在ArcGIS中如何进行空间分析，包括地形、缓冲区、叠加、网络分析，模拟分析，以及可视化等功能，强调其在环境科学、城市规划等领域的应用价值。1.汤逊湖矢量图数据集概述在地理信息系统（GIS）领域，准确、丰富的数据集是进行空间分析和决策支持的
  • HTML5 新特性：MutationObserver 详解 索西引擎 #JavaScriptjavascript
    一、概念与背景MutationObserver是HTML5引入的一个强大的JavaScriptAPI，它用于异步观察DOM树的变化。在MutationObserver出现之前，开发者若要监测DOM变化，常采用轮询（如使用setInterval不断检查DOM状态）或依赖DOM事件（如DOMNodeInserted、DOMNodeRemoved等）的方式。但轮询效率低下，频繁检查会消耗大量资源；而旧的
  • 【高中数学之函数】四种幂函数图线（二次、三次、开方、开立方） 土门子拉马努金 高中数学之函数高中数学函数
    【图像】【代码】UNASSIGNED.centerlize{margin:0auto;border:0pxsolidred;width:1200px;height:600px;}如果看到这段文字说您的浏览器尚不支持HTML5Canvas，请更换浏览器再试.retval.max){retval.max=y;retval.max_x=cds[i].x;}if(yarr.length){index=in
  • 【QT进阶】Qt http编程之websocket的简单介绍 不吃~香菜 QT进阶qt开发语言websocket
    往期回顾【QT进阶】Qthttp编程之用户登录注册功能实现-CSDN博客【QT进阶】Qthttp编程之json解析的简单介绍-CSDN博客【QT进阶】Qthttp编程之nlohmannjson库使用的简单介绍-CSDN博客【QT进阶】Qthttp编程之websocket的简单介绍一、什么是websocket1、简介websocket是HTML5中新增的一个协议，这个协议的出现，让客户端和服务器之前
  • 【HTML】＜script＞元素中的 defer 和 async 属性详解
    文章目录元素中的defer和async属性详解基本概念传统脚本加载defer属性async属性对比表格使用场景建议注意事项示例在HTML5中，元素有两个控制脚本加载和执行行为的属性：defer和async。这两个属性可以帮助开发者优化页面加载性能，特别是在处理外部脚本时。基本概念传统脚本加载没有使用任何属性的元素会阻塞HTML解析：浏览器遇到这个脚本时会暂停HTML解析下载并执行脚本执行完成后才继
  • PostgreSQL入门笔记250718 kfepiza Database数据库sql关系型非关系型nosqlpostgresql笔记数据库
    PostgreSQL入门笔记250718PostgreSQL介绍PostgreSQL（简称Postgres）是一款功能极其强大且开源的对象-关系型数据库管理系统（ORDBMS）。它以可靠性、功能丰富、性能卓越和扩展性而闻名，是许多关键业务应用、地理信息系统（GIS）、数据分析平台等的首选数据库。以下是对PostgreSQL的详细解析：核心特性与优势开源与自由：遵循PostgreSQL许可证（类似B
  • 像素风格超级玛丽HTML游戏
    像素风格超级玛丽HTML游戏创建一个像素风格的HTML5小游戏，模仿超级玛丽的经典玩法。游戏包含移动、跳跃、收集金币、躲避敌人和到达终点等核心机制。设计思路使用纯HTML5Canvas实现游戏渲染像素风格美术设计(16x16像素元素)实现物理引擎(重力、碰撞检测)键盘控制移动和跳跃添加经典超级玛丽元素(砖块、水管、蘑菇敌人)下面是完整的实现代码：像素超级玛丽*{margin:0;padding:0
  • 像素风格坦克大战游戏 代码改变世界10086 游戏像素游戏游戏csscss3
    像素风格坦克大战游戏下面我将实现一个基于HTML5Canvas的像素风格坦克大战游戏，玩法类似经典的FC坦克大战。设计思路使用像素风格渲染游戏元素玩家控制坦克移动和射击敌方AI坦克自动移动和攻击可破坏的砖墙和不可破坏的钢墙基地保护机制计分系统和生命值显示实现代码像素坦克大战*{margin:0;padding:0;box-sizing:border-box;font-family:'PressSt
  • canvas使用 CDwenhuohuo canva可画
    是HTML5引入的一个新标签，它首次出现在2004年的Safari浏览器中，由Apple提出，并在后来的HTML5标准中被正式采纳。IE8及以下❌不支持Canvas的基本用法-WebAPI|MDNvue3import{onMounted}from'vue';onMounted(()=>{constcanvas=document.getElementById('myCanvas');constctx
  • 通过Deepseek找工作 速易达网络 人工智能
    推送的结果如下，对应的AI提示词在底部：计算机方向远程工作职位汇总整合全球远程技术岗位|支持全地域远程办公|涵盖开发、安全、云计算等方向覆盖方向：8+个技术领域薪资范围：¥10K-¥40K/月工作模式：100%远程远程技术职位列表职位名称技能要求经验要求薪资待遇工作模式WordPress开发工程师PHP,HTML5/CSS3,WordPress二次开发,SEO优化3年+1.4-1.6万/月全球远程
  • HTML制作一个介绍自己家乡的网站——贵州贵阳，排版整洁，内容丰富，主题鲜明 软件技术NINI 旅游htmlcss
    一、‍网站题目旅游，当地特色，历史文化，特色小吃等网站的设计与制作。二、✍️网站描述‍静态网站的编写主要是用HTMLDIV+CSS等来完成页面的排版设计‍,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，
  • HTML5和SVG篝火动画实战：月亮下的野营炊烟效果 申增浩
    本文还有配套的精品资源，点击获取简介：HTML5是网页标记语言的最新标准，支持更加动态和丰富的用户体验。本项目源码展示了如何使用HTML5的SVG来绘制篝火和炊烟动画，通过CSS3动画、JavaScript交互、Canvas与SVG的选择以及Web动画性能优化，实现了一个月亮下的篝火和野营炊烟效果。项目还考虑了响应式设计和数据结构的使用，为开发者提供了一个学习Web前端开发的实践案例。1.HTML
  • 技术大牛谈HTML 5设计原理 Bluestar Web开发htmlxhtml浏览器文档javascript工作
    本篇文章是JeremyKeith在Fronteers2010上的主题演讲，主要跟大家谈谈HTML5的设计。主要分两个方面，一方面就是HTML5；另一方面就是80/20。JeremyKeith在Fronteers2010上的主题演讲下载PPT(PDF)http://adactio.com/extras/slides/designofhtml5.pdf观看视频http://fronteers.nl/c
  • html结构解析 ca_rry 前端html
    ：声明为HTML5文档：根元素，指定页面语言为中文：设置字符编码，确保中文正常显示：实现响应式设计，使页面在移动设备上正确显示：设置浏览器标签页标题：内嵌CSS样式，用于定义页面元素的显示效果：页面主容器，用于统一管理页面内容的布局：页面主标题，应用了自定义标题样式：示例图片，添加了悬停缩放效果：表单容器，包含输入框、下拉选择器和提交按钮：特性列表，使用自定义列表样式
  • 向量转换为矩阵_论文推荐 | 胡光辉：DEM地表坡向变率的向量几何计算法 weixin_39625258 向量转换为矩阵
    《测绘学报》构建与学术的桥梁拉近与权威的距离DEM地表坡向变率的向量几何计算法胡光辉1,2,3,熊礼阳1,2,3,汤国安1,2,31.南京师范大学地理科学学院,江苏南京210023;2.南京师范大学虚拟地理环境教育部重点实验室,江苏南京210023;3.江苏省地理信息资源开发与利用协同创新中心,江苏南京210023收稿日期：2018-10-08；修回日期：2019-02-25基金项目：国家自然科学
  • GeoJson 地图地理信息数据获取 郭宝 Web前端信息可视化GeoJSON
    效果图：获取渠道：通过阿里数据可视化平台获取通过VectorMaps获取通过geojson来获取1、通过阿里数据可视化平台获取
  • JS执行机制 1024k纯金
    首先我们来看几个问题：1.JS是单线程的么？2.JS有异步么？3.JS单线程怎么实现的的异步1.JS是单线程的么？这个问题毫无悬念，肯定是单线程的。js刚开始就是作为浏览器脚本语言推出的，试想如果是多线程:那么一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？这样就复杂化了，HTML5提出WebWorker标准，允许JavaScript脚本创建多个线程，但
  • JS中仅有经纬度时热力图权重设置方案深度分析 贾修行 热力图地图javascript
    在地理信息可视化领域，热力图是展示数据分布特征的有效工具。当我们仅有经纬度数据，缺乏其他维度信息时，如何合理设置热力图的权重，成为呈现理想可视化效果的关键。本文将对常见的权重设置方案进行深入分析，并附上详细的算法代码，探讨其原理、优缺点及适用场景。一、均匀权重法1.1原理均匀权重法是最为基础、简单的方案，它为每个数据点赋予相同的权重值，一般设为1。在可视化时，所有点对热力图的贡献程度相同，仅通过点
  • 网页视频进度条禁止拖动----解决
    点击键盘F12键，进入开发者模式发现标志,html5播放器，属于原生支持最方便实现加速的在开发者模式中找到Console调式窗口，输入以下代码可以设置视频播放速度/*playvideotwiceasfast*/document.querySelector('video').defaultPlaybackRate=1.0;//默认一倍速播放document.querySelector('video'
  • HTML5+CSS3小实例：流星划过天际的动画效果 艾恩小灰灰
    实例：流星划过天际的动画效果技术栈：HTML+CSS效果：源码：【html】流星划过天际的动画效果【css】*{/*初始化*/margin:0;padding:0;}body{/*100%窗口高度*/height:100vh;/*溢出隐藏*/overflow:hidden;}.container{/*绝对定位*/position:absolute;top:0;left:0;width:100%;h
  • 项目中 枚举与注解的结合使用 飞翔的马甲 javaenumannotation
    前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。 一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。
  • 【Scala十七】Scala核心十一：下划线_的用法 bit1129 scala
    下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义   1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r
  • web缓存基础：术语、http报头和缓存策略 dalan_123 Web
    对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下
  • crontab 问题 周凡杨 linuxcrontabunix
      一： 0481-079   Reached   a   symbol   that   is   not   expected.   背景： */5   *   *   *   *  /usr/IBMIHS/rsync.sh 
  • 让tomcat支持2级域名共享session g21121 session
    tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。 打开tomcat下conf下context.xml文件 找到Context标签,修改为如下内容 如果你的域名是www.test.com <Context sessionCookiePath="/path&q
  • web报表工具FineReport常用函数的用法总结（数学和三角函数） 老A不折腾 Webfinereport总结
      ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。 示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。   ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角
  • linux 启动java进程 sh文件 墙头上一根草 linuxshelljar
    #!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid
  • 我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory aijuans Spring 3 系列
    如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import
  • Linux 内存使用方法详细解析 annan211 linux内存Linux内存解析
    来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。 一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用
  • 数据库的单表查询常用命令及使用方法(-) 百合不是茶 oracle函数单表查询
        创建数据库;       --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2));       创建bloguser表,里面有三个字段     &nbs
  • 多线程基础知识 bijian1013 java多线程threadjava多线程
    一．进程和线程 进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。 线程：是进程内部单一的一个顺序控制流。 线程和进程 a.       每个进程都有独立的
  • fastjson简单使用实例 bijian1013 fastjson
    一.简介         阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征：     
  • 【RPC框架Burlap】Spring集成Burlap bit1129 spring
    Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。 这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成  
  • 【Mahout一】基于Mahout 命令参数含义 bit1129 Mahout
    1. mahout seqdirectory   $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna
  • linux使用flock文件锁解决脚本重复执行问题 ronin47 linux lock　重复执行
    linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。 例如： <? //  test .php
  • java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 bylijinnan java
    public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间
  • linux 系统相关命令 candiio linux
    系统参数 cat /proc/cpuinfo  cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况 性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则 回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参
  • [经营与资产]保持独立性和稳定性对于软件开发的重要意义 comsci 软件开发
         一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造       如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中           那么软件开发者原有的设计思想和开发路线
  • 在CentOS5.5上编译OpenJDK6 Cwind linuxOpenJDK
    几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是
  • java乱码问题 dashuaifu java乱码问题js中文乱码
    swfupload上传文件参数值为中文传递到后台接收中文乱码     在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t
  • cygwin很多命令显示command not found的解决办法 dcj3sjt126com cygwin
    cygwin很多命令显示command not found的解决办法   修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us
  • [介绍]从 Yii 1.1 升级 dcj3sjt126com PHPyii2
    2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。 如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。 请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发
  • Linux SSH免登录配置总结 eksliang ssh-keygenLinux SSH免登录认证Linux SSH互信
    转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理      我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。      生成公钥与私钥有两种加密方式，第一种是
  • 手势滑动销毁Activity gundumw100 android
    老是效仿ios，做android的真悲催！ 有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？ 不用~，网上先问一下百度。 结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay
  • JavaScript变换表格边框颜色 ini JavaScripthtmlWebhtml5css
    效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&
  • Kafka Rest : Confluent kane_xie kafkaRESTconfluent
    最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。 这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。 环境声明：Ubu
  • Calender不是单例 men4661273 单例Calender
             在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。 测试： Calendar c1 =
  • 线程内存和主内存之间联系 qifeifei java thread
    1， java多线程共享主内存中变量的时候，一共会经过几个阶段，    lock:将主内存中的变量锁定，为一个线程所独占。   unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。   read:将主内存中的变量值读到工作内存当中。   load:将read读取的值保存到工作内存中的变量副本中。  
  • schedule和scheduleAtFixedRate tangqi609567707 javatimerschedule
    原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest {  
  • erlang 部署 wudixiaotie erlang
    1.如果在启动节点的时候报这个错 ： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]},     2.当generate时，遇到： ERROR
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他