jQuery插件制作: 语音播报jspeech

在手机网站或者PC网站的资讯页面,想要有一个对文字进行语音播报功能。在网上找了很多资料,大部分都是正对于手机APP的,比如百度语音。这些都是给手机app(android、ios)提供sdk包,然后在调用对应的接口即可。而现在需要的是在网页上实现对文字进行语音播报功能,大致也是调用百度的语言功能。请看如下实现步骤。 第一步: 下载JQuery文件,并导入到html文件中 第二步: html文件布局实现 第三步: jspeech插件实现 1. 创建jspeech文件,然后根据jquery插件的基本格式把基本框架写好 2. 设置默认配置信息 var defaults = { //通过点击链接播报,还是直接播报 “jspeech_a”:true, //链接按钮的宽度 “jspeech_a_width”:”16px”, //链接按钮的高度 “jspeech_a_height”:”13px”, //链接按钮的背景图片 “jspeech_a_png”:”url(./image/icon.png) no-repeat”, //直接播报内容 “jspeech_content”:”测试” }; 3. 设置点击链接播报方式 //如果是通过点击链接播报 //获得文本内容 var content = $(this).text(); //生成链接 var speechClick = “<a href=’javascript:void(0);’ class=’jspeech_a’></a>”; $(this).append(speechClick); //设置链接样式 $(this).find(“.jspeech_a”).css({ width:options.jspeech_a_width, height:options.jspeech_a_height, “display”:”inline-block”, “background”:options.jspeech_a_png }); $(this).find(“.jspeech_a”).click(function(){ //捕获点击事件 var src = ‘http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&text=’ … Continue reading “jQuery插件制作: 语音播报jspeech”

JQuery插件制作:倒计时countdown

关于倒计时的插件可能网上很多,但是都不能满足自己想要的需求,所以作为程序员的我就开始来写一个JQuery倒计时插件countdown。 第一步: 下载JQuery文件 既然编写JQuery插件,那肯定是需要JQuery文件。 第二步: 把JQuery文件导入到html文件中 第三步: 网页布局 第四步: 编写JQuery插件countdown 1. 创建countdown.js文件,并且导入到html文件中。 2.  根据jquery插件的基本格式把基本框架写好。 jquery插件的基本格式: (function($){ $.fn.插件名称 = function(options){ var defaults = { //相关属性设置 } var options = $.extend(defaults, options); this.each(function(){ //实现的功能设置 }); }; })(jQuery); 3. 设置默认配置信息 4. 添加一个倒计时方法timedown 首先添加三个全局变量,第一个是用来保存插件传进来的this,第二个是用来保存的配置信息,第三个是定时器对象 var jthis = null; var opts = null; var countdowtime = null; 然后给这三个变量赋值 opts = … Continue reading “JQuery插件制作:倒计时countdown”