JavaScript Archives - 俺的BLOG

js实现通知提醒

用文本绘制SVG格式流程图

官方：https://github.com/adrai/flowchart.js

作用：通过简单的文本编辑，即可绘制流程图

效果：http://test.lizhenguo.cn/flowchart.html

截图：

web页面调用传统打印机

应用：

一般的B/S系统是只能打印当前页面所有内容。以下方法可以实现“只看想看的，打印想打的”，如在「订单管理」中，点击按钮直接打印「快递单」、「出货单」等。继续阅读“web页面调用传统打印机”

表单提交前验证

目的：

表单提交前，对表单内容先做检查处理，若不符合要求，则禁止表单提交并做相应提示。

实现：

方式一，form标签中使用onsubmit=”return chk_form();”

方式二，提交按钮使用onclick=”return chk_form();”

方式三，把提交按钮改成普通按钮，对该按钮绑定js事件，使用$(‘#form’).submit()

注意：

以上提到的检查函数chk_form()，不能写在jquery的 $(function(){...}); 中，否则可能不会执行，可以单独写在一个 <script>...</script> 中

爬虫学习

找了些不错的爬虫平台，学习参考：

JS版爬虫：

1.http://www.shenjianshou.cn/

2.https://github.com/ShenJianShou/crawler_samples

Python版爬虫：

http://scrapy.org/

PHP版获取页面内容：

http://sourceforge.net/projects/simplehtmldom/

.Net版爬虫：

http://www.locoy.com/

http://www.bazhuayu.com/

汉字转拼音

效果图：

示例代码下载：点击下载

在线体验：https://tools.lizhenguo.cn/pinyin/

【转自：http://my.oschina.net/tommyfok/blog/202412】

Jquery Mobile开发——奇怪的空行

现象：使用Jquery Mobile开发页面时，在listview中发现排版不正常，有莫名其妙的‘很窄的空行’，检查代码多遍也没发现问题，将官方代码贴在上面对比时发现官方的显示正常（代码完全一样，样式却不同——官方的正常，我的有空白）。

解决：使用浏览器检查DOM元素时发现，我的多了些‘ ’，即空格，将代码空格部分全部清楚，使代码在同一行显示后，显示正常，空白没了。

奇怪的事：我想复原问题现象，以便截图发出来，结果复原不了了，空白行没有了！

评论：神奇的Jquery Mobile

ajax中不能使用return

问题：

写JS时，在A方法中需获取B方法的返回值，此返回值在B方法中是通过ajax得到的，然后在ajax的success回调函数中使用return 将结果返回给调用者A，但A始终收不到返回值，显示undefined。

function A(){
 var result = B();
  console.log(result);//'undefined'
}

function B(){
    $.ajax({
       url:**,
       type:'get',
       success:function(data){
           return data;
       }
     });
}

function A(){

var result = B();

console.log(result);//'undefined'

}

function B(){

$.ajax({

url:**,

type:'get',

success:function(data){

return data;

}

});

}

原因：

在ajax的回调函数中不能使用return语句返回结果，原因不详（此结论由实际操作总结而来）。

解决方式：(错误的解决方式，详见下文)

在B 方法中，将ajax的success回调函数中得到结果保存至某变量中，然后在B方法的结尾，ajax操作外，将此变量使用return返回给调用者即可。

function A(){
 var result = B();
  console.log(result);//correct
}

function B(){
    var tmp = '';
    $.ajax({
       url:**,
       type:'get',
       success:function(data){
           tmp = data;
       }
     });

     return tmp;
}

function A(){

var result = B();

console.log(result);//correct

}

function B(){

var tmp = '';

$.ajax({

url:**,

type:'get',

success:function(data){

tmp = data;

}

});

return tmp;

}

重要更新：

以上解决方式通过实践检验，又发现不妥之处：因为是ajax，不能保证及时响应，所以有可能存在B执行return语句时，ajax还没收到结果并将结果赋值给tmp临时变量。于是会出现刷新页面时（特别是第一次刷新），有时并无ajax结果显示出来，再次刷新后就可能正常了。

所以，

建议直接在ajax的回调函数中处理返回结果，不要将其return给某个用于处理显示结果的方法。在上面的例子中，即将A方法中的内容写在B方法中的ajax回调函数里。

javascript中莫名其妙的错误Uncaught SyntaxError: Unexpected token )

JQuery类库版本：jquery-1.7.1.min.js

JQuery代码：

$(function(){
     $("select#brand").change(function(){//品牌下拉框

      });
});

$(function(){

$("select#brand").change(function(){//品牌下拉框

});

chrome中的错误报告：

Uncaught SyntaxError: Unexpected token )

1	Uncaught SyntaxError: Unexpected token )

firefox中的错误报告：

SyntaxError: syntax error

$("select#brand").change(function());

SyntaxError: syntax error

$("select#brand").change(function());

说明：

从代码上看，没有任何语法错误，但浏览器始终提示那个“不存在的错误”。

解析：

注释内容和JS代码放在同一行，导致某种错误。

解决方法：

将注释内容从代码行移出，可单独放一行。如，

$(function(){
   //品牌下拉框
     $("select#brand").change(function(){

      });
});

$(function(){

//品牌下拉框

$("select#brand").change(function(){

});

Javascript或submit按钮刷新当前页失效

现象：

最近为老板做个产品信息管理的小程序，在做搜索那块时发现多次点击表单的提交按钮(表单内容没变)，或调用javascript的window.location.href=window.location，window.reload()等方式都无效（页面内容无刷新，尽管标签页看似重新加载了），但使用F5刷新有效。

场景再现：

HTML代码：

<form id='test' name='test' action='#'>
<input type='text' id='txt' name='txt' />
<input type='submit' value='submit'/>
</form>

</form>

操作：第一次在输入框中输入一些信息时，提交成功，页面刷新，输入框被清空；第二次输入相同内容时，提交失败，页面内容未刷新，输入框内容不消失。

原因：

Form表单的action属性值是“#”（换用AJAX方式提交表单）。

解释：

地址栏中，若地址未发生改变，且最后一个字符是“#”的话，浏览器是不会重新加载新页面的，尽管调用了javascript的刷新当前页的方法（window.location.href=window.location，window.reload()等）。

解决：

既然不用Form表单的自带提交功能，而改用AJAX等方式提交的话，去掉action属性及其属性值即可。

通知类型一：标题闪烁

通知类型二：电脑桌面右下角弹窗提醒

通知类型三：声音通知

应用：

目的：

实现：

注意：

JS版爬虫：

Python版爬虫：

PHP版获取页面内容：

.Net版爬虫：