js

在谷歌地图上显示地名等信息,类似infowindow

纵饮孤独 提交于 2020-04-21 06:47:33
function Tooltip(options) { this.marker_ = options.marker; this.content_ = options.content; this.map_ = options.marker.get('map'); this.cssClass_ = options.cssClass || null; this.is_hidden = options.is_hidden === undefined ? !0 : options.is_hidden; this.div_ = null; this.setMap(this.map_); var me = this; if(this.is_hidden){ google.maps.event.addDomListener(me.marker_, 'mouseover', function(){ me.show(); }); google.maps.event.addDomListener(me.marker_, 'mouseout', function(){ me.hide(); }); } } Tooltip.prototype = new google.maps.OverlayView(); Tooltip.prototype.onAdd = function() { var div =

JS监控DOM的事件(内部插入、移除、修改属性等)!爽!

家住魔仙堡 提交于 2020-04-18 02:35:59
这可不是简单的 onclick、onchange,你对 DOM 进行内部插入、移除、属性修改等均会触发相应事件。 DOM 事件列表: DOMAttrModified DOMAttributeNameChanged DOMCharacterDataModified DOMElementNameChanged DOMNodeInserted DOMNodeInsertedIntoDocument DOMNodeRemoved DOMNodeRemovedFromDocument DOMSubtreeModified 如何用? 像普通绑定事件一样绑定到 DOM 里就可以。 兼容性? 我只测了 Firefox 和 Chrome,其他的没有测,我的项目只需要兼容现代浏览器就可以了。 参考MDN: https://developer.mozilla.org/en-US/docs/Web/API/MutationEvent 参考W3C: http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent 来源: oschina 链接: https://my.oschina.net/u/988279/blog/491173

JS操控CSS样式完成小球自由落体运动,和大家分享一下制作心得。

|▌冷眼眸甩不掉的悲伤 提交于 2020-04-17 02:20:38
【推荐阅读】微服务还能火多久?>>> 这篇心得本应该在一个月之前和大家一起分享的,由于本人比较懒,也几乎没有写博客的习惯,所以迟了一些。有一些内容只是一些个人的废话,可看可不看,毕竟在国内的应试教育下,大家基础物理知识都是很扎实的: (废话) (背景:下面讨论的物体运动默认为宏观角度)一般情况下,物体在三维空间所发生的位移都可以解析为若干连续的在二维空间所发生的位移的和,同理,物体在二维空间所发生的位移也可以解析为若干连续的在一维空间所发生位移的和。基于这个思想(本人的个人体会,对错有待验证),往往一个物体复杂的运动,若将其位移解析为不同一维空间所发生位移的总和,则会让我们能更好地去理解和模拟物体的运动规律。 (废话) 关于自由落体,若在外部环境稳定的情况下,我们可以视其为一个有规律的运动(所谓有规律的运动,运动的方式或过程具有周期性,可重复性),这样我们在写代码的时候,只要抓住其第一个周期的运动规律和初始状态,整个运功过程就可以被复制下来。 (废话) 在中学时期,我们都学过自由落体,老师教我们将它的运动过程解析为水平方向(X轴)和竖直方向(Y轴)的运动轨迹之和,本人能力有限,对物体的运动规律理解不够深刻,所以不能跳出教科书所给定的常规方法,故也采用此法,若不能带给大家更多新的东西,望见谅。 (废话) 如何理解位移:简单地说,就是物体在下一时刻所处的位置交上一时刻所处的位置的“差”

utf-8编码引起js输出中文乱码的解决办法

老子叫甜甜 提交于 2020-04-14 14:29:35
【推荐阅读】微服务还能火多久?>>> 如果web application的编码规则是utf-8,如网页头中的: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 那么js文件中如果有中文输出就会出现乱码,解决此个问题可在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"(假设输出的是Big5繁体字)。 例: <script type="text/javascript" language="javascript" src="scripts/output.js" charset="gb2312"></script> PS:另一种解决方法是把js文件保存为utf-8编码。 如果web application的编码规则是utf-8,如网页头中的: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 那么js文件中如果有中文输出就会出现乱码,解决此个问题可在引用javascript输出的地方加上charset="gb2312" 或 charset="big5"(假设输出的是Big5繁体字)。 例: <script type="text/javascript"

javascript标准对象与包装对象

橙三吉。 提交于 2020-04-11 18:40:35
标准对象 在JavaScript的世界里,一切都是对象。 但是某些对象还是和其他对象不太一样。为了区分对象的类型,我们用typeof操作符获取对象的类型,它总是返回一个字符串: typeof 123 ; // 'number' typeof NaN ; // 'number' typeof 'str' ; // 'string' typeof true ; // 'boolean' typeof undefined ; // 'undefined' typeof Math.abs; // 'function' typeof null ; // 'object' typeof []; // 'object' typeof {}; // 'object' 可见,number、string、boolean、function和undefined有别于其他类型。特别注意null的类型是object,Array的类型也是object,如果我们用typeof将无法区分出null、Array和通常意义上的object——{}。 包装对象 除了这些类型外,JavaScript还提供了包装对象,熟悉Java的小伙伴肯定很清楚int和Integer这种暧昧关系。 number、boolean和string都有包装对象。没错,在JavaScript中,字符串也区分string类型和它的包装类型

JS 窗口加载与定时器笔记

拈花ヽ惹草 提交于 2020-04-08 11:39:52
bom浏览器对象模型 bom由一系列相关的对象构成并且每个对象都提供了很多方法属性 bom顶级对象是window bom是浏览器产商在各自浏览器上定义的,兼容性差 window具有双重角色,他是一个全局对象.定义在全局作用域中的变量、函数都会变成window对象的属性和方法,但是在调用的时候可以省略window 窗口加载事件 window.onload当前页面文档加载完成后会触发该事件,在页面中只能写一次,如果有多个就以最后一个为准 可以换成window.addEventListener('load',function(){})则没有限制 如果网页中图片特别多可以用document.addEventListener('DOMContentLoaded',function(){}) DOMContentLoaded是DOM加载完毕,不包含图片,falsh,css等就可以执行 加载速度比load快一些 1 <button>点击</button> 2 window.onload = function () { 3 var btn = window.document.querySelector('button') 4 btn.onclick = function () { 5 alert('ok') 6 } 7 } 8 window.addEventListener('load',

JS 中的类总结

一个人想着一个人 提交于 2020-04-08 07:35:08
① 什么是类,描述了一种代码的组织结构,一种在软件中对真实世界中问题领域的建模方法 ② // 非常简单的 mixin() 例子 function mixin(sourceObj, targetObj) {   for (var key in sourceObj) {     // 只会在不存在的情况下复制     if (!(key in targetObj)) {       targetObj[key] = sourceObj[key]     }   }   return targetObj; } var Vehicle = {   engines: 1,   ignition: function() {     console.log('Turning on my engine.');   },   drive: function() {     this.ignition();     console.log('Steering and moving forward!');   } } var Car = mixin(Vehicle, {   wheel: 4,   drive: function(){     Vehicle.drive.call(this);     console.log('Rolling on all ' + this.wheel + '

回顾JS第一章如何在HTML文件中添加JavaScript代码

随声附和 提交于 2020-04-08 02:13:11
JavaScript入门篇—第1章 请做好准备 本章节主要讲解如何在HTML文件中添加JavaScript代码,掌握必备的基础语法,为以后来章学习打下基础。 1-1 为什么学习JavaScript 1-2 新朋友你在哪里(如何插入JS) 1-3 我也可以独立(引用JS外部文件) 1-4 找到你的位置(JS在页面中的位置) 1-5 JavaScript-认识语句和符号 1-6 JavaScript-注释很重要 1-7 JavaScript-什么是变量 1-8 JavaScript-判断语句(if...else) 1-9 JavaScript-什么是函数 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>为什么学习JavaScript</title> 6 </head> 7 <body> 8 <ul> 9 <li id="ceshi1">所有主流浏览器都支持JavaScript。</li> 10 <li id="ceshi2">目前,全世界大部分网页都使用JavaScript。</li> 11 <li>它可以让网页呈现各种动态效果。</li> 12 <li>做为一个Web开发师,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</li> 13 </ul> 14

js缩小父窗口打开新窗口

元气小坏坏 提交于 2020-04-08 02:11:03
直接上代码,有图有真相,方便在左边窗口点击,右边显示预览页面 <html> <head> <meta content="text/html; charset=utf-8" /> <script type="text/javascript"> var w5pwindow = null; function openLink() { var uri = "http://msdn.microsoft.com/en-us/library"; top.moveTo(0, 0); top.resizeTo(450, screen.height); if (this.w5pwindow && !this.w5pwindow.closed) this.w5pwindow.location.href = uri; else this.w5pwindow = top.open(uri, "newindow", "status=1,toolbar=0,left=470,scrollbars=1,location=1,top=0,height=" + (screen.height - 110) + ",width=" + (screen.width - 470)); }; </script> </head> <body> <div> <h1>This is the parent window</h1>

一个相当酷的js图片展示网站

余生颓废 提交于 2020-04-08 00:59:39
在站酷上搜到一个相当酷的js图片展示网站 http://preview.zcool.com.cn/code/js/04/1/ 更酷的是,页面里包含全部的js代码!wow!!!!!!!!!!保存下面的代码,自己放上几张图试下,绝对效果超赞。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd "> <html> <head> <title>1</title> <meta http-equiv="imagetoolbar" content="no"> <style type="text/css"> html { overflow: hidden; } body { margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; } #imageFlow { position: absolute; width: 100%; height: 80%; left: 0%; top: 10%; background: #000; } #imageFlow .diapo { position: absolute; left: -1000px; cursor: pointer; -ms