Hpyer 的未知空间 » javascript http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 01 Feb 2012 02:16:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 JavaScript 下四舍五入法、舍去法、进一法截取小数的方法 http://hpyer.cn/javascript-number-format.html http://hpyer.cn/javascript-number-format.html#comments Mon, 28 Nov 2011 08:58:01 +0000 Hpyer http://hpyer.cn/?p=778 JavaScript 版四舍五入法、舍去法、进一法截取小数的方法。若不指定小数位数，则按整数截取。

var Digit = {};
/**
 * 四舍五入法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */<br />
Digit.round = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.round(digit);
    digit = Math.round(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 舍去法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.floor = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.floor(digit);
    digit = Math.floor(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 进一法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.ceil = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.ceil(digit);
    digit = Math.ceil(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
 
// 使用方法
var num = 1.2345;
document.write("数字：" + num + "<br />");
document.write("四色五入法：<br />");
document.write(num + " 保留3位小数：" + Digit.round(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.round(num, 2) + "<br />");
document.write("舍去法：<br />");
document.write(num + " 保留3位小数：" + Digit.floor(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.floor(num, 2) + "<br />");
document.write("进一法：<br />");
document.write(num + " 保留3位小数：" + Digit.ceil(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.ceil(num, 2) + "<br />");
]]> http://hpyer.cn/javascript-number-format.html/feed 0 调用腾讯QQ天气预报的JS代码 http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html#comments Sat, 17 Sep 2011 01:12:37 +0000 Hpyer http://hpyer.cn/?p=738 发一个个人觉得比较好用的天气预报JS代码，是腾讯QQ的，且可以根据访问者的IP自动判断并输出其所在地的天气，很不错哦~

测试效果：

 


代码如下：

<div id="wealth">&nbsp;</div>
<script type="text/javascript" src="http://minisite.qq.com/js/j.minisite.weather.js" charset="gbk"></script>
<script type="text/javascript">
MiniSite.Weather.print("wealth");
</script>

以下2012年2月1日更新

最近发现这段代码不能用了，测试后发现，是不能调用QQ的IP库（http://fw.qq.com:80/ipaddress）导致的，所以本人对脚本进行了调整，使其可以手动设置显示哪个城市的天气，并且在无法读取IP库的时候显示默认城市（MiniSite.Weather.defaultCity 的值）的天气。

修改的 j.minisite.weather.js 下载地址：Minisite Weather   [v1.0 - 4.45 kB - 1 Hits]

调用方法：

// 和原来一样，但是如果无法读取ip库的情况下会显示默认城市的天气
MiniSite.Weather.print("wealth");
 
// 手动设置城市，如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "XX省", "XX市");
// 如果是直辖市，则类似：
MiniSite.Weather.print("wealth", "北京市", "北京市");

注：如果仍然想要自动判断用户所在城市的功能，则需要通过服务器端脚本（PHP、ASP、Java等）来实现了。可以谷歌、百度一下“XX读取纯真IP库”（XX是对应的服务器端脚本）。
纯真IP库最新版：http://www.crsky.com/soft/2611.html

]]> http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html/feed 0 获取 javascript 时间戳 http://hpyer.cn/get-the-timestamp-of-javascript.html http://hpyer.cn/get-the-timestamp-of-javascript.html#comments Mon, 20 Jun 2011 03:52:53 +0000 Hpyer http://hpyer.cn/?p=724 获取从 1970年1月1日午夜开始的时间戳（单位：毫秒）。

// 其毫秒部分都为 0，即只是精确到秒的毫秒数
// 将值除以 1000 后，可以和 PHP 互通
var timestamp = Date.parse(new Date());

或者：

// 精确到毫秒数
// 将值除以 1000 后取整也可和 PHP 互通，Math.ceil(timestamp / 1000)
var timestamp = (new Date()).valueOf();
]]> http://hpyer.cn/get-the-timestamp-of-javascript.html/feed 0 IE6 下修复 PNG 图片的 Javascript 代码 http://hpyer.cn/js-code-about-png-fix-in-ie6.html http://hpyer.cn/js-code-about-png-fix-in-ie6.html#comments Fri, 29 Apr 2011 15:07:42 +0000 Hpyer http://hpyer.cn/?p=717 　　最近开始学DIV+CSS布局和PS切图，发现PNG这东西是好，图像更真实、逼真，可惜就是IE6对透明背景的PNG图片支持不好，需要辅助以IE提供的滤镜才可以。

　　为了代码可以复用，网上找了很多JS代码，发现没几个好用的。不过Hpyer在此推荐的这个代码使用上还是比较方便的。

　　使用方法：

<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix_inline.js"></script>
<script type="text/javascript" src="js/pngfix_bg.js"></script>
<![endif]-->

　　但是，IE6 下 PNG 图片修复后，会存在以下问题：

  • 导致背景图被放大（填充）为整个区域。 – 要求切图更为细致，样式 padding 也会影响整个区域的大小
  • 导致该区域的链接、按钮等失效。 – 需要使用样式 position:relative; 再对链接、按钮等修复

下载地址：IE6_pngfix   [v1.0 - 12.43 kB - 13 Hits]

压缩包中包含示例代码

 

]]> http://hpyer.cn/js-code-about-png-fix-in-ie6.html/feed 0 图片幻灯片JSlider http://hpyer.cn/codes/jslider http://hpyer.cn/codes/jslider#comments Mon, 19 Jan 2009 03:19:05 +0000 Hpyer http://hpyer.cn/?page_id=496 Summry / 概览：

This is an images slide based on Javascript.
这是一款基于 Javascript 的图片幻灯片程序。

DEMO / 示例：

http://demo.hpyer.cn/js/jslider/

Download / 下载：

JSlider   [v1.0 - 155.32 kB - 72 Hits]

Standard version (without any JS libraries) / 标准版（无须任何 JS 类库）

Usage / 用法：

1. Import script / 引入脚本

<script language="javascript" type="text/javascript" src="jslider.js"></script>

2. Import stylesheet / 引入样式

<link rel="stylesheet" type="text/css" href="jslider.css" />

3. Create slide / 创建幻灯片

<div id="jslider2" class="jslider"></div>
<script language="javascript" type="text/javascript">
var items = [];
items.push({
    file: 'images/1.jpg',
    link: '#1'
});
items.push({
    file: 'images/2.jpg',
    link: '#2',
    desc: 'Title'
});
JSlider.init('jslider', items, {width:'200px', height:'200px'});
</script>
]]> http://hpyer.cn/codes/jslider/feed 0 利用 jsonp 进行 Javascript 的跨域数据访问 http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html#comments Thu, 23 Oct 2008 14:32:38 +0000 Hpyer http://hpyer.cn/?p=379 一、基础知识

　　1、什么是 JSON：JavaScript Object Notation (JSON) 是一种轻量级、基于文本、语言无关的数据交换格式。它是从 ECMAScript 语言标准衍生而来的。JSON为轻便的表示结构化数据，定义了一小套格式化规则。以下是一个 JSON 对象的例子：

{
    "Image": {
        "Width": 800,
        "Height": 600,
        "Title": "View from 15th Floor",
        "Thumbnail": {
            "Url": "http://www.example.com/image/481989943",
            "Height": 125,
            "Width": "100"
        },
        "IDs": [116, 943, 234, 38793]
    }
}

　　2、什么是 JSONP：JSONP（JSON with Padding）是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 Javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

二、JSONP 的原理

　　首先说明一下，想要使用 JSONP 来进行跨域访问，必须服务器端支持，原因后面再解释。和 AJAX 一样，JSONP 实际上也是早已存在，只是说法相对比较新颖（貌似也出来很久了，额…），而且所有做网页开发肯定都用过。为什么这么说？应为它用到的只是所有 HTML 元素中一个简单的 script 元素。看到这是不是觉得越发奇怪了？没关系，继续看下去就会茅厕（塞）顿开的，嘿嘿～来看个例子吧：
demo.html 文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript">
function say(words) {
    alert(words);
}
</script>
</head>
<body>
<script type="text/javascript" src="demo.js"></script>
</body>
</html>

demo.js 文件

say("Hello, everyone!");

　　运行 demo.html 文件后，是不是看到写着“Hello, everyone!”的警告框了？你可能会觉得这个例子很简单，没什么了不起的，甚至会在想：这和 JSONP 有关系吗？那么，我可以很肯定的告诉你：有关系！而且，这个例子实际上就是 JSONP 的原型！你也许会想到，JSONP 不是访问远程数据的吗？对，试想一下，如果 demo.js 文件在其它域的服务器上呢？结果会不会出现问题？我也可以很负责的告诉你：不会！你可以将上面例子中的 demo.js 更改为：http://demo.hpyer.cn/php/jsonp.php?callback=say 再试一下。
　　现在，聪明的你应该已经明白 JSONP 到底是怎么回事了，那么，再来解释一下本节开头第一句话吧。看过 demo.js 文件的内容，应该知道，其只是对一个函数（通常称之为：回调函数）的调用，而需要交互的数据则通过参数形势进行返回。所以通过 JSONP 访问的服务器需要提供一个可以设置回调函数名的接口，就像 http://demo.hpyer.cn/php/jsonp.php?callback=say 中的 callback，所以，综上所述 JSONP 是需要服务器端的支持的。附上 jsonp.php 的源码：

<?php
$type = isset($_GET['type']) ? $_GET['type'] : '';
$callback = isset($_GET['callback']) ? $_GET['callback'] : '';
$json = '';
 
if ($type == 'json') {
    $json = '{
        "Image": {
            "Width": 800,
            "Height": 600,
            "Title": "View from 15th Floor",
            "Thumbnail": {
                "Url":  "http://www.example.com/image/481989943",
                "Height": 125,
                "Width": "100"
            },
            "IDs": [116, 943, 234, 38793]
        }
    }';
} else {
    $json = '"Hello, everyone!"';
}
 
if (!empty($callback)) {
    $json = $callback . '(' . $json . ')';
}
 
echo $json;
?>

三、jQuery 中的应用

　　自 1.2 版本起，jQuery 加入了对 JSONP 的支持。我们可以很容易的利用 $.getJSON() 方法（或者其它基于 $.ajax() 的方法），来跨域加载 JSON 数据。来个例子吧：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_jsonp() {
    $.getJSON("http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?",
    function(data) {
        $('#result').val('data.Image.IDs: ' + data.Image.IDs);
    });
}
</script>
</head>
<body>
<a href="javascript:do_jsonp();">Click me</a><br />
<textarea id="result" cols="50" rows="5"></textarea>
</body>
</html>

　　你可能注意到上面的例子中，url 被写成了 http://demo.hpyer.cn/php/jsonp.php?type=json&callback=?，需要说明的是，这个问号会被 jQuery 自动替换为回调函数的函数名（如果是一个匿名函数，jQuery 会自动生成一个带时间戳的函数名）。

四、小结

　　通过本文的描述，相信你对于 JSONP 有了一个比较直观的了解，Hpyer 也相信，你也肯定可以举一反三的写出属于你自己的代码。其实，JSONP 的实现方法并不是只有回调函数一种，还有其它方式，例如将数据赋值给一个变量等。在 Web 2.0 的总体趋势之下，JS 显得越来越重要，并成了许多网页制作者所必学的一种脚本，所以，尽情的去体会 JS 带来的乐趣吧，Enjoy it!

]]> http://hpyer.cn/visit-remote-data-with-jsonp-in-javascript.html/feed 9