共 13篇 前 2 页: 1 2    每页10篇 下一页  

Javascript

javascript封装QQ天气预报接口

现在提供天气预报服务的网站挺多的，一般常见的都是直接在自己网站上使用，有部分的网站提供了web service接口。

  • 常见正则方式：常见引用天气预报的方法多是使用正则去解析指定网站的天气预报，使用这种方法有些弊端：1.人 家网站的HTML格式发生了变化，你的程序则需要跟着修改。2.本身解析的正则写起来就不太简单。3.每次解析都要去访问别人的网站，当别人网站发生异常 的时候可能会拖累你的程序。当然你可以从你的应用流程上解决掉一些问题。
  • Web service接口：这个当然是首选了，一般提供web service接口的网站都会是自己的服务相对稳定一些。

如果你的网站只需要一个显示一个地区的天气预报的话，那么就直接用吧，如果需要显示多地区的话，那么你可能就需要建立一个自己的IP库了。那天看到 QQ提供了一些这样的服务，于是就简单研究了一下，找出几个有用的接口。其中最令我比较满意的就是这些接口是javascript实现的，可以很容易的做 到各种网站系统的兼容性，不过人家的编码格式是GB2312的～

我使用了Jquery来调用，所有的调用都是基于 http://minisite.qq.com/js/j.minisite.weather.js 研究的结果。

获取当前浏览器的所在地区和IP：

$j.getScript("http://fw.qq.com:80/ipaddress", function() {
    if(typeof IPData != "undefined") {
        //YoyoSite.Cookie.set("current_ip", IPData[2]+','+IPData[3]);
        alert(IPData);
    }
});

获得当前的天气我简单的封装了一下，这里只说明使用方法（不过……，这个天气预报不太准）：

<script language="javascript" src="http://www.greatmoo.com/untest/samples/js/jquery.js"></script>
<script language="javascript" src="http://www.greatmoo.com/untest/samples/weather/weather.js"></script>
<div id="weather_content"></div>

<script language="javascript">
weather.init("weather_content");
</script>

调用方法很简单，请主义示例中的 weather_content 这个关键字。

应用实例：http://www.greatmoo.com/untest/samples/weather/weather.php，别忘了对你的页面设置GB2312编码。

meiking   2009-06-30 15:14:44 阅读:1671  评论:0  引用:0
使用php+javascript来实现html table数据表的导出

数据列表导出的功能很常见，有些是简单的复制粘贴，或者复杂的饼状条形图形，一般都是基于服务器端的操作。我这里是一个简单的html table数据导出功能，目前只些了个简单的模型，主要使用javascript和简单的php来实现。
注：在ie浏览器中其实是可以使用 document.execCommand() 来实现php的操作，为了兼容各种浏览器所以我直接是使用php来实现文件下载。

要实现的功能：如图将其导出到本地文件。

javascript代码

//下载指定区域为指定文件
function saveTableElementToFile(id, fileType, fileName) {
  if(typeof fileName == undefined || fileName == "") fileName = "nonamed";
  if(typeof fileType == undefined || fileType == "") fileType = "csv";
 
  var result = "";
  if(fileType == "html") {
    var html = document.getElementById(id).innerHTML;
    html = html.replace(/table/gi, "table border='1' ");
    result = html;
    //document.write(html);
  } else if(fileType == "csv") {
    //使用jquery
    var vhtml = "";
    $("#"+id).find("table").each(function() {
        $(this).find("tr").each(function() {
          $(this).find("th").each(function() {
            vhtml+= $.trim($(this).html())+",";
            });
          $(this).find("td").each(function() {
            vhtml+= $.trim($(this).html())+",";
            });
          vhtml+= "\n";
          });
        });
    vhtml = vhtml.replace(/,\n/g, "\n");
    result = vhtml;
    //document.write(vhtml);
  }
 
  var formHtml = "";
  formHtml+= "<form name='saving_form' target='_blank' action='file_download.php' method='post'>";
  formHtml+= "<input type='hidden' name='content' value='' />";
  formHtml+= "<input type='hidden' name='file_type' value='' />";
  formHtml+= "<input type='hidden' name='file_name' value='' />";
  formHtml+= "</form>";
  $("form[name=saving_form]").remove();
  $("body").append(formHtml);
 
  document.forms['saving_form'].elements['content'].value = result;
  document.forms['saving_form'].elements['file_type'].value = fileType;
  document.forms['saving_form'].elements['file_name'].value = fileName;
  document.forms['saving_form'].submit();
  //history.go(-1);
}

PHP代码

header('Content-type:application/download');
header("Content-Disposition:   attachment;   filename=".$_POST['file_name'].".".$_POST['file_type']);
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
 
echo iconv("utf-8", "gb2312", $_POST['content']);

详细例子可以查看 http://www.greatmoo.com/untest/samples/table2file.html

meiking   2009-06-09 16:35:09 阅读:147  评论:0  引用:0
javascript 数组的简单算法

在做一个程序中我需要用到javascript来缓存一些数据，建立 ID 与数据的 hash 结构用来排序，然后我就封装了几个对一维数组的算法。

/**
 * 判断一个值是否存在于当前的数组之中
 * 例如：  var arr1 = [1,2,5,9];
 *        alert(arr1.inArray(2)); //true
 *        alert(arr1.inArray(3)); //false
 */
Array.prototype.inArray = function (value) {
  for(var i = 0; i < this.length; i++) {
    if(this[i] == value) return true;
  }
  return false;
}

/**
 * 删除数组中的这个值
 * 例如：  var arr2 = [2,3,5,7,8];
 *        arr2.removeValue(5); // [2,3,7,8]
 */
Array.prototype.removeValue = function (value) {
  var focus = new Array();
 
  for(var i = 0; i < this.length; i++) {
    if(this[i] == value) {
      focus.push(i);
    }
  }

  if(focus.length > 0) {
    for(var k = focus.length-1; k >= 0; k--) this.splice(focus[k], 1);
  }
  return this;
}

/**
 * 将数组中值为 当前指定值的向前一定一位
 * 例如：  var arr3 = [1,2,3,5];
 *        arr3.sortUpByValue(3);  //结果： [1,3,2,5]
 */
Array.prototype.sortUpByValue = function (value) {
  var key = null;
  for(var i = 1; i < this.length; i++) {
    if(this[i] == value) {
      key = i;
    }
  }
  if(key != null) {
    var tmp = this[key];
    this[key] = this[key-1];
    this[key-1] = tmp;
  }
  return this;
}

/**
 * 同 sortUpByValue ，将指定值向后移动一位
 */
Array.prototype.sortDownByValue = function (value) {
  var key = null;
  for(var i = 0; i < this.length-1; i++) {
    if(this[i] == value) {
      key = i;
    }
  }
  if(key != null) {
    var tmp = this[key];
    this[key] = this[key+1];
    this[key+1] = tmp;
  }
  return this;
}

实例：http://www.greatmoo.com/untest/samples/test_js_array.html

meiking   2009-06-08 17:44:05 阅读:83  评论:0  引用:0
javascript小把戏

今天一朋友写了个小JS程序让我看一下(<java sricpt>on submit<fuck></sricpt>)，其实他是想告诉我他会JS了。

我一看，那哪是JS程序啊，而且是带有脏字的，于是装作很神秘的样子给了他一段高深而简洁的程序，说这个程序拿出去别人一看就知道你是高手。

<script language='javascript'>
while(1) alert(1);
//如果你不懂JS的话去试一下啊，很好玩的
</script>

于是他很兴奋的拿到了代码，而且在公司肆意传播，最后发现是个死循环把我骂一顿，说公司有些高手没上当，要我写个高级一点的让别人看不出来的东西，于是就正经一点写了个好玩的东东。

<script language="javascript">
function moveWin () {
    window.resizeTo(Math.random()*500+1, Math.random()*500+1);
    window.moveTo(Math.random()*1024+1, Math.random()*768+1);
}
setInterval("moveWin()", 100);
//有兴趣试一下，肯定无害
</script>

看效果：http://www.greatmoo.com/untest/samples/moving.html

meiking   2009-05-20 13:05:15 阅读:45  评论:1  引用:0
IE“无法打开 Internet 站点” 错误

如果这种错误是javascript产生的话，一般都是javascript的不规范导致的。项目中使用ajax加载数据的操作，ajax操作有同步和异步方式，常规的都是异步，而我这里要用到同步请求，然后就出现了这种情况（firefox是没有这种情况的。)。

详细错误信息：
Internet Explorer 无法打开 Internet 站点
http://localhost/……

已终止操作

具体原因我也说不清楚，不过按照下面的方式就没问题了。也就是需要当页面加载结束之后再去做ajax数据请求。

if (document.readyState=="complete") {
    //your ajax
}

我使用的是 jquery js插件，做法：

$(document).ready(function () {
    //ajax
});
meiking   2009-05-15 14:13:34 阅读:188  评论:0  引用:0
面向对象的javascript -引用

对象（object）是组成Javascript的基本单元，事实上，javascript中的一切都是对象，而且充分发挥了这一点。书上是这样写的～事实上也的确如此！

来看几个实例增加一下理解。

代码1：

var obj = new Object();
var objRef = obj; //引用
obj.oneProperty = true; //这里对obj赋值，因为objRef引用了obj的对象，所以给obj赋值的同时，所有成功引用了obj的都和其一起变化，因为他们指向同一个对象。
alert(obj.oneProperty == objRef.oneProperty);  //结果为true

代码2：

var items = new Array("one", "two", "three");
var itemsRef = items;
items.push("four");
alert(items.length == itemsRef.length);  //结果为true，和代码1的解释是一样的。

相信大家已经有一些自己的理解了，如果你还不理解或者对于这种对象的有些疑惑，那么看完第三个代码你应该就全明白了。

上面两个实例都是在讲引用了这个对象，实际项目中其实引用其本身的赋值会更多。

代码3：

var items = new Array("one", "two", "three");
var itemsRef = items;  //
items = new Array("new", "array");  //itmes 通过 new 使其指向了一个新的对象了。
//itemsRef 指向的则还是 Array("one", "two", "three")。

alert(items != itemsRef); //结果依然是 true
meiking   2009-02-02 17:03:15 阅读:59  评论:0  引用:0
Javascript学习，面向对象实例。

年终和朋友们聊天，发现以前在亿邮（eyou.com）的同事Realazy 出书了（算是吧，翻译的，其博客首页有链接），是讲Javascript的，在其博客上极力推荐这本书，刚好我想系统的学习一下Javascript，就买了一本。

书里面的内容是用使用面向对象来实现，于是开始照葫芦画瓢学习。

来看看第一个实例代码，不过似乎有点问题，在做了下小的调整后正常了。这个实例可以很清楚的告诉我们，javascript的面向对象是很强大的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<script type="text/javascript" language="javascript">
function Lecture(name, teacher) {
    this.name = name;
    this.teacher = teacher;
}

Lecture.prototype.display = function () {
    return this.teacher + " is teaching "+ this.name;
};

function Schedule(lectures) {
    this.lectures = lectures;
}

Schedule.prototype.display = function () {
    var str = "";

    for(var i = 0; i < this.lectures.length; i++) {
        str+= this.lectures[i].display() + " \n";
    }

    return str;
}

var mySchedule = new Schedule([
    new Lecture("Gym",    "Mr. Smith"),
    new Lecture("Math",    "Mrs. Jones"),
    new Lecture("English", "TBD")
]);

alert(mySchedule.display());
</script>
 <BODY>
 
 </BODY>
</HTML>
meiking   2009-01-08 18:48:50 阅读:108  评论:3  引用:0
Javascript的面向对象

最近青草地上的博客们发文章怎么这么快呢，以前我发一篇文章能挂在首页一两周，左边的“博客新锐”存在的时间更长了，现在两三四五天就连带“博客新锐”都没有了。以前我的目标是让自己的文章或者博客名一直出现在首页，现在～还是争取一下更长的时间吧～算你们狠～

Javascript也算支持oop（面向对象），当让不要和java去做比较。使用面向对象能是程序更好的封装，更好的模块接口和常量。

简单的来讲就是可以把任何一个方法和变量放到Object对象中去。由于javascript的变量类型要求的不是很严格，于是乎可以无限类型无限 object的层数扩展（这一点和PHP中数组很想，PHP变量类型也是不严格的），好处就是很灵活。坏处对于中小项目来说不会有很大的影响，大项目嘛～等真正做大项目的时候再去研究总结吧，反正现在还没有真正参与过大项目。

javascript的面向对象很好玩，因为很简单，很随意，很灵活（和交朋友一样，一般人都喜欢这种朋友吧～？）。你会觉得在javascript面向对象这一块你可以当一个很出色的设计师，因为它本身规则很少，然后你就能给它定义很多规则，如果你的规则好那么你的规则就会成为标准。其实关键是你要用这个来干嘛！

来看一个面向对象形成过程：

var obj = new Object();
obj.myStr = "this is string";  //变量类型
obj.myArr = [1, "str2", 3];    //和php一样没有数组类型，很灵活
obj.myInt = 2008;
obj.myFun = function (args1) { //函数类型
   return args1+"result";
}

alert(obj.length);   //结果是 4
alert(obj.myFun("test"));  //结果是 "testresult"

从这个例子中你会发现原来这就是所谓的面向对象啊。没错，有总比没有好，关键还是看你用来做什么。就像php在5.0后引入了新的对象模型，完全重写了php处理对象的方式，允许更佳性能和更多特性。5.2加入了命名空间的支持。它们都在进步……

用它来做全局变量，你会发现你的程序突然有了很大的扩展空间了。做程序员也要自己动脑子去设计自己的程序，我是懒人，就不整理实际的应用内容了。

meiking   2008-12-11 01:14:47 阅读:38  评论:0  引用:0
网页浮动小窗口拖动功能

这个程序好像是一年前写的了，今天突然又要用了，于是上自己以前做的网站 www.maidee.com 上找到了这段代码。

功能就是实现窗口的拖动功能，不过前提是窗口的style属性为 position:absolute。

实现原理：按照鼠标的运动轨迹移动层的位置。

代码：

/**
 * 窗口拖动 start 调用方法：onmousedown = "divBlock_event_mousedown(arguments[0]);" //加在要拖动的窗口最外层就行了。
 */
function divBlock_event_mousedown(e) {
    var e, obj, temp;

    obj = document.getElementById("quick_window"); //要拖动的窗口ID
    e = window.event ? window.event : e;
    obj.startX = e.clientX - obj.offsetLeft;
    obj.startY = e.clientY - obj.offsetTop;

    document.onmousemove = document_event_mousemove;
    temp = document.attachEvent ? document.attachEvent("onmouseup",
            document_event_mouseup) : document.addEventListener("mouseup",
            document_event_mouseup, "");
}

function document_event_mousemove(e) {
    var e, obj;

    obj = document.getElementById("quick_window");
    e = window.event ? window.event : e;

    with (obj.style) {
        left = e.clientX - obj.startX + "px";
        top = e.clientY - obj.startY + "px";
    }
}

function document_event_mouseup(e) {
    var temp;

    document.onmousemove = "";
    temp = document.detachEvent ? document.detachEvent("onmouseup",
            document_event_mouseup) : document.removeEventListener("mouseup",
            document_event_mouseup, "");
}
//窗口拖动 end
meiking   2008-12-02 18:12:27 阅读:358  评论:0  引用:0
来看看另一个web“放大镜”。

前些天自己做了个放大镜，很不要脸的出了带有很多Bug的beta4版本(本博客里的是beta2)，无意间发现了很不错并且比较低调的“放大镜”作品，遵循w3c标准，ie&firefox都兼容，并且易于使用，而我的版本是基于Jquery框架开发的，而且还没有解决w3c标准和浏览器兼容问题。 厄... 有时间还得继续优化一下。似乎我欠自己的东西比较多，承诺挺多内容都没都还没有做到的，那也阻止不了我继续承诺！

那么现在让我们来看看这位大师的作品吧。 He said, "If you're using my script, post a message with your site to my blog! Thanks :).", so I do it.

调用起来非常简单，like this。

 

<!-- 首先你当然得引用其JS文件。 -->
<script type="text/javascript" src="http://valid.tjp.hu/tjpzoom/tjpzoom.js"></script>

<!-- 像下面这样就可以使用了，方法一 -->
<img style="width: 300px; height: 239px;" src="http://tjp.hu/barakk/images/200201152147.jpg" 
     onmouseover="TJPzoom(this)" alt="">

<!-- 方法二 -->
<img style="width: 580px; height: 580px;" src="http://valid.tjp.hu/zoom/collage.jpg"
     onmouseover="TJPzoom(this,'http://valid.tjp.hu/zoom/collage_2.jpg')" alt="">

那么效果如何呢？（因为无法上传边框图的原因，倒至效果有些让人失望，不过你可以去看原版。)

meiking   2008-06-07 02:36:27 阅读:107  评论:0  引用:0
Copyright@2008 powered by YuLog