技术分享 / Web前端

Vue解决audio音乐不能播放的问题

Stephen/文

最近刚开始学Vue.js,感觉上手挺容易的,就用Vue写了个小demo---音乐播放器,代码量比js少了好多。 Html: <audio :src="'./music/'+music_src" id="audio"></audio> audio标签的src是用vue动态绑定的: var audio = document.getElementById("audio"); new Vue({ el: "#music", data: { music: [……], music_src: '', }, methods: { play: function(index){ this.music_src = this.music[index].src; audio.play(); } } }); 最后发现src是动态绑定进去了,但 audio.play(); 并不能播放,最后把这句去掉后,在audio标签里面加上autoplay属性,音乐就能动态加载播放了。 <audio :src="'./music/'+music_src" id="audio" au

Web前端 09/13 0

微信小程序插件wxParse解析处理HTML代码

Stephen/文

由于微信小程序不支持HTML代码,但我们存在服务器中的文章内容的代码都是HTML的,当我们在微信小程序上,从服务器取出的HTML数据,又如何在小程序中显示呢?这需要一个插件wxParse。 使用方法: 1.下载wxParse插件:https://github.com/icindy/wxParse,下载后解压到小程序根目录。 2.在需要显示文章内容的wxml文件中引入wxParse.wxml <import src="/wxParse/wxParse.wxml"/> 3.在wxml文件需要显示显示文章内容的地方加入以下代码 <template is="wxParse" data="{{wxParseData:content.nodes}}"/> 4.在wxss文件中引入wxParse.wxss样式文件 @import "/wxParse/wxParse.wxss"; 5.js文件代码 var WxParse = require("../../wxParse/wxParse.js");//引入wxPa

Web前端 10/23 0

微信小程序实现上拉加载更多

Stephen/文

微信小程序当页面滑到底部,如何上拉加载更多数据,我们需要用onReachBottom方法实现,当滑动到底部,页码+1请求服务器,并设置数据。 var pageNum = 1;//页码 Page({ data:{ loadMoreText: '加载更多',//底部文字 list: [] }, onLoad:function(options){ // 页面初始化 options为页面跳转所带来的参数 this.getList(1) }, onReachBottom:function(){ // 加载更多,滑动到底部执行此方法 pageNum+=1; console.log(pageNum) this.getList(pageNum) }, //获取数据 getList:function(page){ var that = this; wx.request({ url: 'weixin.htm

Web前端 10/23 0

Html5 Canvas绘制时钟

Stephen/文

用H5绘制一个模拟时钟,效果图: html <canvas id="clock" width="500px" height="500px" style="background-color:#fff">您的浏览器版本不支持!</canvas> javascript <script> var clock=document.getElementById("clock"); var cxt=clock.getContext('2d'); /**数字时钟**/ function time(){ var now=new Date(); var hour=now.getHours(); var min=now.getMinutes(); var sec=now.getSeconds(); hour=checkTime(hour); min=checkTime(min); sec=checkTime(sec); cxt.font="normal 20px arial" cxt.fillStyle='#00f'; cxt.fillText("北京时间:"+hour+":"+min+":"+sec

Web前端 09/24 0

表格头部固定和表格列固定

Stephen/文

我不是前端大神,只是偶尔在开发系统时,需要用到表格。如果表格只需要单独的用来展现数据,那就很简单了,那如果需要实现复杂的样式呢?比如说表头固定,当网页滚动的时候,表头自动固定到网页顶部,这样很客观的展现了每列的内容。 表头固定和列固定,需要用到jQuery DataTables(我不是前端大神,就懒一点,用下框架,偶尔用下框架,开发时间也节省了嘛,嘿嘿 ^_^),没错,又是我前面介绍的DataTables,我对这框架是情有独钟啊,我觉得是万能是表格插件,从简单到复杂,从客户端到服务器,从数据到Excel导入,平时我们基本上会用到的,它都能实现,并且不需要你些繁琐的javascript和后端代码,它都轻松搞定。 表头固定和列固定是jQuery DataTables里的两个独立的扩展插件,下面我们就分别说说: 表头固定 1.下载并引入js和css样式扩展 dataTables.fixedHeader.min.

Web前端 09/24 0

javascript禁用链接跳转等默认动作

Stephen/文

举一个简单的例子。 比如,有一个链接,你要在这个链接跳转前执行一些其他操作,显然,我们能想到给它添加一个单击(onclick)事件,然后执行其他的一些操作,但是你会发现,你所定义的单击事件里的操作并没有执行,而直接进行了页面跳转。那这样,我们就应该先要禁用它的链接,然后执行自定义的操作,再进行跳转或执行其他操作,那么,我们该如何禁用链接,禁用它的默认动作呢?这个问题,我们在开发中很少遇到,但遇到了也并不难处理。 JavaScript有一个方法,preventDefault(),取消事件的默认动作。 <script type="text/javascript"> $("a").click(function(event){ event.preventDefault();//禁用默认动作 var url = $(this).attr("href"); window.location.href = url;//执行页面跳转 }) </script> 在w3sc

Web前端 08/22 0

ajax异步请求不能赋值

Stephen/文

在一个ajax请求中,已经获取到回调值,然后给一个外部变量赋值为空,这是什么原因呢?我们先要了解异步和同步的区别。 同步:ajax请求结束后执行后面的操作 异步:ajax和后面的操作异步执行,ajax请求还没执行完,就已经执行了后面的操作 显然,回调值是在ajax请求(success)之后赋值的。 var temp; $.ajax({ async: false, type : "GET", url : 'tet.php', success : function(data) { temp=data; } }); async: false (同步) async: true(异步,默认值)

Web前端 08/16 0

javascript本地分页

Stephen/文

注意:本地分页适用于数据量小的地方,如果数据量大,不建议使用本地分页 var iTable = document.getElementById("iTable"); var rows = iTable.rows.length; var pageSize = 3;//每页显示条数 var pageNum = 0;//总页数 var current = 1; if(rows/pageSize > parseInt(rows/pageSize)){ pageNum = parseInt(rows/pageSize)+1; }else{ pageNum = rows/pageSize; } function toPage(current){ var startRow = (current-1)*pageSize+1; var endRow = current*pageSize; for(var i=1;i<(rows+1);i++){ var iRow = iTable.rows[i-1]; if(i>=startRow && i<=endRow){

Web前端 08/16 0

HTML5实现大文件分片上传

Stephen/文

在网页中直接上传大文件一直是个比较头疼的问题,一是上传时间长,中途一旦出错会导致前功尽弃;二是服务端配置复杂,要考虑接收超大表单和超时问题,如果是托管主机没准还改不了配置,默认只能接收小于4MB的附件。 比较理想的方案是能够把大文件分片,一片一片的传到服务端,再由服务端合并。这么做的好处在于一旦上传失败只是损失一个分片而已,不用整个文件重传,而且每个分片的大小可以控制在4MB以内,服务端不用做任何设置就可适应。 常用的解决方案是RIA,以flex为例,通常是利用FileReference.load方法加载文件得到ByteArray,然后分片构造表单(flash的高版本不允许直接访问文件)。不过这个load方法只能加载较小的文件,大约不超过300MB,因此适用性不是很强。 好在现在有了HTML5,我们可以直接构造分片了,这是一个非常喜人的进步,但是有一个最大的缺陷就是,不支持IE啊,不支持IE啊,不支

Web前端 08/16 0

实现一个带搜索的下拉选择框

Stephen/文

带搜索的下拉选择框,其实现成的框架并不少,很多框架的下拉选择框,虽自带ajax搜索,但是在下拉列表的时候,要展示所有数据,在开发的时候,问题来了,如果下拉选择框的数据很多,有几百条怎么办?难道我们要几百条数据全部展示到下拉框?这种体验效果自然很差,然后就想到了自己做一个简单的下拉选择框,会简单很多,也方便使用。 我在例子中,默认只展示5条,数据也小于10条,当然可以自己改,这只是例子而已。 效果图: 具体代码 html <div class="form"> <div class="demo"> <input type="text" name="" class="text"> <div class="box"> <ul class="list"> </ul> </div> </div> </d

Web前端 04/07 0

用javascript实现一个简单的日历

Stephen/文

有些时候我们翻看别人的博客的时候,会发现有一个日历面板,可以点击左右按钮查看上下个月的日历,那么这是怎么实现的呢?其实并不难,主要就是用javascript的date()方法。 先看效果图: 具体代码: html <div class="box"> <div class="date"> <div class="title"> <span class="last" id="showLastMonth"><</span> <div class="current"> <span id="showYear"></span> <span>/</span> <span id="showMonth"></span> </div> <span class="ne

Web前端 04/07 0

jQuery插件DataTables环境搭建及简单使用

Stephen/文

之前我已经简单介绍了这款插件,我把此类文章归类为“Web前端”,不是很正确,这款神奇的插件不仅支持客户端,也支持服务器端。通过ajax向服务器请求json数据,并展示到表格中。下面我们就来简单使用一下。 搭建环境 1.下载DataTables插件,下载地址:http://datatables.club/ 2.下载完成后,我们只需要media文件夹下的 css , js 和 images 文件夹 3.在项目中引入 css 样式和 js 脚本文件 首先引入 js/jquery.js 文件 然后引入 js/jquery.dataTables.min.js 文件 最后引入 css/jquery.dataTables.min.css 文件 如何使用DataTables 1.在需要插入表格的地方,插入如下 html 代码 <table id="table_list"> <tbody> <tr> <th>I

Web前端 07/28 0