分类目录归档：demo

demo、无聊产物

Web Audio Api获取音乐频率演示

19条评论

使用的canvas库是我的COL，参考刘哇勇的部落格和基于Web Audio API实现的音频可视化效果(被我翻译了一部分)完成。

食用方法：点选择文件放首歌进去，或者把歌拖到选择文件的框上面。

请确保你的浏览器最新！(经测试只有chrome和firefox支持良好)

经测试2，把<我的滑板鞋>放入其中观看效果更佳！

在新页面中打开旧版
在新页面中打开新版
精心特制的coding参赛作品
继续阅读Web Audio Api获取音乐频率演示 →

demo、html、无聊产物

canvas函数图

留下评论

【初始编辑】2013/4/21 14:55
【更新 2013/5/1 14:36 】
更新日志：加上坐标轴的箭头，加了两个函数(其实这个不算更新吧。。)。
优化了一下绘制方法：修改了清除画布的方法，极大提高效率。
自定义函数的功能还是没有修好。
代码中已经包含了一部分下次更新的功能：差不多是坐标轴的单位线

昨天我翻出来了以前一时兴起做的一个渣渣函数图绘制的代码，然后又一时兴起想把它改好一点，于是就出现了今天的这篇文章。
【我可是冒着期中考试前不复习的风险来做这个的】
【用chrome浏览效果更佳，其他浏览器可能会有卡顿现象】
现在已经做成了这个样子

源地址在这里，佳佳实验室的地址在这里，代码在文章最下面，自带注释
继续阅读canvas函数图 →

demo、javascript、悠哉博主的日常、笔记

iframe元素操作

留下评论
本文所有内容均未测试，只是看着参考写出来的笔记，不保证内容的准确性，如果发现了错误请指出谢谢。

在很久很久以前(其实是忘了时间。。。)我发现iframe内部的内容是可以在iframe外面操作的。

在这之前我曾经把Glory的blog做了iframe放在我的佳佳实验室里，然后他一脸黑线，现在我终于知道是为什么了~

接下来进入正文

访问iframe元素的关键就在于要知道连接到iframe的方法，看下面

[PS：不同方法在不同浏览器里可能不可用]

继续阅读iframe元素操作 →

demo、html、无聊产物

图片转data:URI工具

8条评论

昨晚由于需要用data:uri，于是做了这么个转换工具
可本地使用，因为文件不用上传
疯狂的点击这里看demo
截图[此截图使用datauri,看不见请升级人品]

上面这张图的datauri

1
data:image/png;base64,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7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQhOUeAACSsNwDAEASlnsAAEjCcg8AAElY7gEAIAnLPQAAJGG5BwCAJCz3AACQRL/G/+c//wNAn/5fp2D0CgAAAABJRU5ErkJggg==

datauri优点：
在页面添加图片不用额外上传文件了！
还有什么就不知到了
缺点：
无法缓存，每次加载页面都要载入（其实想缓存它只要用js文件复制给变量就行了，而且可以一个文件存N张图，和图片分割异曲同工啊）
浏览器支持不全面
转出来的字符串体积一般比原文件大= =。。。

demo源码[部分参考其他网站]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
    <head>
        <title>
            文件转DATA URI
        </title>
    </head>
    <body>
        <div id="droparea" style="height:30px;line-height:30px;background-color:#66ccff;width:126px; text-align:center;">
            把图片拖到这里
        </div>
        [其实我发现除了图片以外还可以拖其它任何文件进来，只不过下面的预览图会裂掉另外最好不要把超过1MB的文件拉进来，不然你懂的]
        <br>
        PS:如果同时拖入多个文件，只操作第一个，拖入文件夹无效
        <br>
        <img id='view' src='' />
        <br />
        <textarea style="height:600px;width:1000px;" id='text'>
        </textarea>
        <script>
            var droparea = document.getElementById('droparea');
            var viewimg = document.getElementById('view');
            var showdataarea = document.getElementById('text');
            droparea.addEventListener("dragenter", dragenter, false);
            droparea.addEventListener("dragover", dragover, false);
            droparea.addEventListener("drop", drop, false);
            function handlefiles(files) {
                var file;
                file = files[0];
                var reader = new FileReader();
                reader.onload = function(e) {
                    viewimg.src = e.target.result;
                    showdataarea.innerHTML = e.target.result;
                };
                reader.readAsDataURL(file);
            }
            function dragenter(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            function dragover(e) {
                e.stopPropagation();
                e.preventDefault();
            }
            function drop(e) {
                e.stopPropagation();
                e.preventDefault();
                var list = e.dataTransfer;
                var filelist = list.files;
                handlefiles(filelist);
            }
        </script>
    </body>
 
</html>
 

demo、javascript、jquery、无聊产物

视频手动载入js

留下评论

俺花了好长时间，用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子（无视频源）video标签的例子(同上)

object标签的例子(同上)

其实屏蔽了以后看起来都是一样的。。

这货的功能：点击以后再载入，防止意外流量损失或带宽？占用
这就是个鲜明的例子http://blog.luojia.tk/?p=181
里面装满了视频，这样就可以解决打开这个网页一下载入很多视频的问题了

原理：让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓

1
2
3
4
 
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面
objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签
 

特点：插队的div使用源元素的宽高和定位【本来想把z-index也算进去的，时间不够就不做了↓

1
2
3
4
5
6
7
8
 
//一堆if用来判断是否有这些属性
if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}
 

全代码↓

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
var changevideos=function(){
var target=new Object;
function findtag(tag) {
        return document.getElementsByTagName(tag);
}
function getwidth(obj){
    if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;}
}
function getheight(obj){
    if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;}
}
function getposition(obj){
    return obj.style.position?obj.style.position:false;
}
function getright(obj){
    return obj.style.right?obj.style.right: false;
}
function getleft(obj){
    return obj.style.left?obj.style.left:false;
}
function changeinner(html){
    target=event.srcElement?event.srcElement:event.target;
    target.innerHTML=html;
}
function run(objarray){
    for (var i = 0; i < objarray.length; i++) {
                var aimhtml = objarray[i].outerHTML;
    var tmpdiv=document.createElement("div");
    if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}
tmpdiv.innerHTML='&lt;div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;">&lt;center>&lt;h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失&lt;br>此处已被自动屏蔽&lt;/h2>&lt;span style="position:absolute;bottom:2px;right:2px;">点击恢复&lt;/span>&lt;/center>&lt;/div>';//填上填充显示的内容
//tmpdiv.style.overflow="hidden";
tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')');
tmpdiv.style.display="inline-block";
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);
objarray[i].parentNode.removeChild(objarray[i]);
        }
}
function changehideneededtag() {
    var tmpstyle=document.createElement("style");
    tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}";
    document.getElementsByTagName("head")[0].appendChild(tmpstyle);
        var a;
        if(a=findtag("embed")){
        run(a);}
        if(a=findtag("object")){
        run(a);}
        if(a=findtag("video")){
        run(a);}    
}
changehideneededtag();
}
changevideos.changeinner=function(html){
    target=event.srcElement?event.srcElement:event.target;
    target.innerHTML=html;
}
 

没时间了所以还有些可能出错的地方没做错误处理，以后来补上

demo、html、javascript、jquery、无聊产物、笔记

做了个元素拖动实验

一条评论

iframe框引用demo：

原始demo地址:http://www.luojia.tk/shiyanshi.php?id=moveelement

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx  =  0;
clickpointy  =  0;
divx  =   (window.innerWidth  -  400)  /  2;
divy  =   (window.innerHeight  -  200)  /  2;
$("#1").css("left",  divx);
$("#1").css("top",  divy);
$("#1").mousedown(function(event)  {
    $(document).unbind("mouseup");
    $(document).unbind("mousemove");
    $("#1").unbind("animate");
    event.preventDefault();
    var clickpointx  =  event.pageX;
    var clickpointy  =  event.pageY;
    $(document).mouseup(function(event)  {
        $(document).unbind("mouseup");
        $(document).unbind("mousemove");
        $("#1").animate({
            top:  divy
        },
        500);
        $("#1").animate({
            left:  divx
        },
        500);
    });
    $(document).mousemove(function(event)  {
        event.preventDefault();
        var pointx  =  event.pageX  -  clickpointx;
        var pointy  =  event.pageY  -  clickpointy;
        $("#1").css("left",  pointx  +  divx);
        $("#1").css("top",  pointy  +  divy);
    });
});
</script>