分类： 前端

js读取文件内容

22.3k 前端 , , 3评论
JS是否可以读取本地文件的内容呢？答案是肯定的。 流程只用两步： 用file类型的input载入文件； 用HTML5的FileReader方法读取文件内容。 如下是一个js读取文件内容到文本框的方法。 1 演示 点击查看演示地址。 2 HTML代码 页面有两个元素，file类型的input，和显示内容的textarea文本框。 <input type="file" name="upload" id="uplo…

JQuery实现checkbox状态切换（Toggle）

9.2k 前端 发表评论
点击查看效果演示。 有如下一段HTML代码，是一个checkbox复选框： <div class="line"> <label for="status"> <input type="checkbox" id="status" name="status" value="1" />开启 </label> </div> 我们希望点击div.line的时候，能够自动切换checkbox的状态。 这个实现起来也很简单，JS代码如下： <sc…

Javascript实现页面内容下载

4.0k 前端 , , 发表评论
页面上有一段代码，要保存下来，怎么做？ 选择复制？用按钮请求数据库？都很低效。 既然页面已经有了内容，为何不用JS获取这段代码，生成文件后直接下载？ 下面我们用Blob和URL.createObjectURL来实现这一功能，兼容Chrome、Firefox和IE等主流浏览器。 1 演示 点击查看演示地址。 2 实现代码 JS代码如下，已经封装成一个函数，filename…

plupload多按钮上传

5.1k 前端 , 一条评论
plupload可以轻松实现拖动、点击上传等功能，但是没有明确说明，多按钮上传方式（不要告诉我复制粘贴改browse_button这种方式）。 下面，我们就来探索这样的功能，初始化一段plupload代码，实现多个上传按钮。 1 演示和下载 点击查看演示Demo。 点击这里下载完整代码。 2 HTML代码 HTML代码如下： <div> <div class="upload-bo…

JQuery定时自动消失提示框/弹出框

17.2k 前端 , 3评论
在表单提交中，不论成功与否，好的体验都应该有弹出提示，效果： 在页面中央显示提示，1.5秒后消失，不影响页面的正常布局。 1 HTML代码 HTML代码显示提示内容，放在页面中任何位置。 <div class="alert"></div> 2 CSS代码 弹出框参考了 Bootstrap 的样式： .alert { display: none; position: fixed; top: 50%; left: 50%;…

JQuery Post转义提交HTML模板

3.6k 前端 , , 发表评论
最近遇到这样一个问题，在表单中有一个textarea文本框，用来保存HTML模板。 因为是HTML模板，所以会有<html>、<script>等标签，但是这样无法通过AJAX Post方式保存。 经过实验，<script是导致无法提交的根源。找到原因，解决办法就简单了，就是把<转义成HTML实体&lt;。 最新说明：这个最后发现，是__POST被后台的…

JS实现表格列宽拖动

4.1k 前端 , 4评论
在数据表格中，有时候需要拖动表格宽度，查看完整的数据，是很常用的功能。 1 效果 可以用纯JS就可以实现，如下，是正常情况下的表格： 拖动表格标题中间线，拖动后效果如下： 查看DEMO 2 代码 HTML代码： <!DOCTYPE html> <html> <head> <title>演示</title> <script type="text/javascript" src="ta…

JQuery和Awesome实现炫酷【返回顶部】按钮

2.1k 前端 , 一条评论
之前通过JQuery+纯CSS实现了返回顶部的功能，比较轻量级：JQuery+CSS实现【返回顶部】按钮，不需要图片。 现在我们再用JQuery+Awesome实现更炫酷的“返回顶部”按钮。 效果如下：      按钮的工作流程大致是：页面加载后按钮隐藏，向下拖动显现，鼠标悬浮时变色（颜色可以更改），点击返回顶部。 代码如下，复制成HTML文件保存即可看到效…

PHP读取文件内容并排序输出

3.1k 前端 , 发表评论
本文实现PHP读取一个txt文件内容，并把内容按自然排序后输出。 假设 a.txt 文件内容如下： h a 6 z i 0 3 PHP读取这个文件，排序后输出，代码如下： $txt = file_get_contents("a.txt"); $arr = explode(PHP_EOL, $txt); sort($arr); echo implode(PHP_EOL, $arr); 执行后的结果如下： 0 3 6 a h i z

自定义JavaScript的alert()弹出框样式

9.9k 前端 , 一条评论
JavaScript原始的 alert()弹出框效果很差。 于是想着自定义这个原始alert()的显示样式。 JQuery方式实现代码如下： <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> (function () { window.alert = function (text) { //解析…
« 上一页   下一页 »