Red_Ant_hoyl的博客_html技术

Html使用Json

【前言】前面咱们已经总结过，Java使用Json。《Java使用Json》下面我将继续学习，Html使用Json。【先来一个小demo】<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scripttype="text/javascript"src="jquery-1.11.0.min.js">

Json对象

Json数组

JSON.parse()

JSON.stringify()

原创 2020-06-04 17:30:55 1203 阅读

Font Awesome 【图标】

前言本笔记非常简短！简介FontAwesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。参考《FontAwesome一套绝佳的图标字体库和CSS框架》示例<!DOCTYPEhtml><html><head><metacharset="UTF-8"><linkrel="

无限缩放图标

原创 2020-06-01 10:21:20 917 阅读

FFmpeg基于HLS实现大视频分片下载播放[视频直播二]

关于HLS，上篇咱们已经讲过，它基于http协议，内容包括两部分：m3u8描述文件，ts媒体文件。它可以实现视频直播，不过直播有点延迟，延迟大小与循环体的大小有关。我们将要利用它的循环体，来实现大视频的分片下载播放。问：怎么将一个视频分片得到m3u8文件?答：利用ffmpeg工具。问：那么什么是FFmpeg呢？答：FFmpeg是一套可以用来记录、转换数字音频、视频，并且将其转化为流的开源程序。它提

ffmpeg

m3u8

HLS

原创 2020-05-12 20:04:49 10000+阅读

HLS与RTMP实现[视频直播一]

小编前言最近听说视频直播火了，好多都是视频带货的。小编很多年以前就喜欢流媒体相关的东西，现在入手虽说有点晚，但也算有所了解。目前主流的视频直播方案有HLS和RTMP，移动端以HLS为主，PC端以RTMP为主。HLSHTTPLiveStreaming（简称HLS）是一个基于HTTP的视频流协议，听说是苹果公司搞的，因此苹果机上很好的支持，高版本的Android也支持。HLS协议基于HTTP，而一个提

HLS

RTMP

原创 2020-05-11 20:00:35 2199 阅读 1收藏

4种弹框

1、最基本的三种弹窗alert，confirm，prompt<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js三种弹窗</title></head><body><spanonclick="doson(1)">alert()<

js弹框

lghdialog

layer

原创 2020-05-11 17:55:00 4222 阅读

我最亲爱的

今天偶尔听到这首歌，心里泛起了涟漪。程序员嘛，就要用自己的方式实现出来。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>我最亲爱的</title><scripttype="text/javascript"src="./jquery-1.12.4.min.js"&

jquery歌词

原创 2020-04-22 11:17:37 1764 阅读

wiki-DokuWiki[25Years]的交互

【无知】：就像，你就在哪里，存在了很久。我却一直不知道你的存在...【定义】1、Wiki是一种在网络上开放且可供多人协同创作的超文本系统【多人协作的写作系统】2、Wiki站点可以有多人（甚至任何访问者）维护，每个人都可以发表自己的意见，或者对共同的主题进行扩展与探讨。【架构】1、GeoDNS是一个未BIND写的40行小程序，可以让DNS解析的时候考虑地域因素，让用户能够访问最近的Web服务器。2、

wiki

Dokuwiki使用

原创 2020-03-12 20:48:36 957 阅读

Web项目中的常用编码

1、windows默认编码控制台输入936，它对于的编码格式为GBK2、IE浏览器对URL编码：GBK一般来说默认依赖本地编码火狐与谷歌浏览器对URL编码：按照互联网约定俗成utf-83、tomcat默认编码tomcat8以及后续的版本对于字符的默认编码格式是UTF-8；tomcat7及之前版本的都是iso-8859-1。如果默认情况下，tomcat使用的的编码方式：iso-8859-1修改tom

浏览器默认编码

tomcat默认编码

js默认编码

js函数默认编码

java默认编码

原创 2019-07-30 23:05:59 5756 阅读 1点赞

探究Web常用编码

今天呢，小编决定带着6个方面一路探究Web编码。1、问：为啥要编码？答：计算机存储信息的最小单位是1字节(bit)，然而一个字节最多能表示0-255个符号，但是人类自然语言中的符号又那么多，像汉语、韩语、日语等一个字节怎么能表示的过来，所以必须要有一个新的结构字符来编码。2、常见的编码格式有哪些？A、ASCII码总共128个，使用一个字节的低7位表示，0-31是控制字符如：换行、回车、删除等；32

Web编码

URL中文参数

浏览器URL中文编码

常用Web编码

原创 2019-07-30 21:39:21 10000+阅读 1点赞

浏览器的背景音乐实现方式总结

1、【利用audio】播放背景音乐这其实很简单，只需要在html的head之间加入这么一句话就ok了：<audioid="music"controls="controls"autoplay="autoplay"loop="loop"><sourcesrc="mp3/benxi-StillBelieve.mp3"type="audio/mpeg"></audio>

audio播放背景音乐

bgsound播放背景音乐

embed播放背景音乐

video播放背景音乐

四种网页播放背景音乐方式

原创 2019-06-27 23:07:20 10000+阅读 1点赞

在线表格

以下内容是基于SpreadJS开发的。SpreadJS是一款基于HTML5的纯JavaScript电子表格和网格功能控件。一、配置使用（3分钟）实例代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>基于SpreadJS的在线Excel<</title><

在线表格

51cto

原创 2019-01-11 21:31:50 4709 阅读 1点赞

一个实例全析js数组（17）

前言：数组和对象一样是数值的集合，不同的是每一个数值有一个名字（对象），而对象中每个数值都有一个下标。①数组的创建vara=newArray(10);vara=[1,2,3,4,8,5,"test",false,true,"abcd"];alert(a);②将数组进行排序a.sort();alert(a);③把数组中所有的元素连接起来转换成字符串我们可以看到，数组转为字符串之后，看不出有什么变化，

17

js

数组

操作

原创 2018-12-28 20:02:08 4442 阅读

浅谈jsp的7个动作

JSP与Servlet一样，是在服务器端执行的。通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。

jsp7

动作

原创 2018-10-08 23:28:26 10000+阅读 2评论

输入框联想输入

笔者，不玩网游还差4天就两个月了。我常常觉得，过往的都是不堪回首的，但现在又何尝不是。有时候，我的脑海里会浮现一首歌：“早知道是这样像梦一场，我才不会把爱都放在同一个地方”。只有一句，来来回回的重复나는당신을좋아합니다.어떤종류의자격이필요한지。상처를입지않고타박상을입지않도록고의로거리를유지해야합니다。输入框的联想输入，有许多的实现方式。在这里，笔者只是挑一种实现了其中的原理，至于细节优化，见仁

输入框联想输入

autocomplete联想输入

原创 2018-09-21 01:20:47 1622 阅读 1点赞

利用 Siblings一步实现多个同级div，只改变当前点击的div样式

记录一点，小技巧。直接上代码喽，因为今天还没有功夫扯皮呢。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>一步实现多个同级div，只改变点击的当前div样式</title></head><scripttype="text/javascript"src

一步实现

多个

同级

div

原创 2018-09-03 00:20:03 1853 阅读 1点赞

监听元素属性改变事件的方法

一、onchange事件只在键盘或者鼠标操作改变对象属性，且失去焦点时触发，脚本触发无效。（就是说你在输入框中输入完内容，输入完了，然后鼠标点别的地方触发该事件）二、oninput事件oninput事件在用户输入时触发。不支持JS等赋值改变的元素属性。该事件在<input>或<textarea>元素的值发生改变时触发。（也就是说，不用输入完，边输入边触发该事件）①但是，这个

oninput

事件

onproperty

原创 2018-08-30 01:12:35 10000+阅读 1点赞

Ajax中的load()方法实现指定区域加载或刷新html与jsp

梳理知识方法的时候，笔者还是有数的，就不闲扯了。一、Jquery中的AjaxJquery对Ajax操作进行了封装，在Jquery中:最底层的是$.ajsx(),第二层是load()、$.get()、$.post()第三层是$.getJSON()二、load()方法（能载入远程html、jsp代码，插入到DOM中）load()方法是Jquery中最简单和常用的Ajax方法，能载入远程的html。它的

指定

区域

嵌入

html

原创 2018-08-26 00:41:50 5194 阅读 1点赞 1收藏

自定义table显示列

今天呢，笔者，利用js（真的感觉，前端的一切技术都是js，或者js都能够实现）做了一个自定义table显示列的小插件。

自定义

table

列显示

原创 2018-08-25 19:31:16 4080 阅读 1点赞

利用My97DatePicker实现年份多选

昨天，咱们尝试使用Kalendae实现年份的多选事件，结果发现，该插件不能实现月份以及年份的选择，更不必说年份的多选的事件了。笔者也不愿多做深究，既然My97DatePicker可以定义选择年份，何不简单的改写改写它。笔者秉着这个思路，继续往皮毛之下探索。先看一下My97DatePicker的习性，俗语讲知己知彼，是吧。这个插件调用之后会改变调用位置的显示内容为当前选择日期。而且还可以给点击位置之

My97

DatePicker

年份多选

原创 2018-08-23 23:20:46 2076 阅读 1点赞

基于Kalendaer的日期多选

笔者，最近遇到一个需求，年份的多选事件。笔者之前见到的大多是月份多选，日子多选，时间多选，但是年份多选还是头回遇到。但是呢，有需求就说明有他存在的可然性。对于强大的代码来说，你觉得他能实现的那么他就一定能实现，还有你觉得他不一定的实现的，他有可能可以实现。My97DatePicker插件，不能多选；Kalendae插件，不兼容IE，且也没有关于能支持年份多选的介绍啊。虽然，没有介绍年份的选择，但是

Kalendaer日期多选

原创 2018-08-22 23:46:42 2157 阅读 1点赞 2评论

浏览器利用Webcam+Flash启用摄像头，并完成拍照

大家都比较喜欢谈论高考，然而笔者就不愿意提及，因为笔者高考很不理想，以致于意志消沉。后来吧，就迷恋上了游戏一直到上个月，可以说是不学无术已经很久了。火爆的脾气也是随之而来，虽时光不再，脾气尚存。怎么办呢，笔者用HBuilder写点东西消消火。闲扯一下，很开心。下面直接上代码了：<!DOCTYPEhtml><html><head><metacharset="

浏览器

拍照

原创 2018-08-20 22:21:29 7677 阅读 1点赞

利用JOrgChart只需2分钟即可配置简单组织机构图

笔者，自认为只是学习了一点皮毛，或者说JOrgChart就是这么简单。需要修改方法、样式直接修改jquery.jOrgChart.js与jquery.jOrgChart.css即可。配置也是那么的简单。那么这里我们，实现一个简单的横向分布的组织结构吧，原理就是<ul>与<li>的嵌套关系实现组织机构的分布图示。配置的简单代码如下：<!DOCTYPEhtml>&l

JOrg

Chart

制作

组织

机构图

原创 2018-08-13 00:11:57 6367 阅读 1点赞

利用JavaScript所见即所得的生成Excel表格

笔者认为，解决问题的途径n种，也有很多组合的使用。我们用Excel导出大量数据的时候，可能会从服务器端，但如果数据量较小，是不是也可以考虑使用JavaScript就可以轻量级的导出呢。另外实际工作中，用户也会考虑，所见即所得的导出当前见到的内容到Excel表格中。这里，笔者有那么一丢丢感想，像文档数据、文件数据、图片数据归根结底都是一些数据码，而数据码的解析方式也是分多钟的，像.html的文件可以

js生成Excel表格

原创 2018-08-11 20:15:32 4278 阅读 1点赞

IE、Chrome、Firefox使用debugger浅析

IEdebugger我总是觉得，有那么多好用的插件呀、软件呀应该尝试着去使用，而不是固步自封。我遇到js问题都是用alert语句来进行调试，今天呢，想着一起来学习一下3大主流浏览器的debugger，以后尝试使用改变一下。一、IE上的调试工具IE上可选择的JavaScript调试工具不多，主要是Microsoft脚本编辑器(MicrosoftScriptEditor)以及IEDeveloperTo

IE

debugger

Chrome

ebugger

原创 2018-08-01 22:05:14 3293 阅读 1点赞 1收藏

深入浅出，解析cookie与session

一、session和cookie的特征很多人认为，session是服务端的，cookie是客户端的。其实呢，session和cookie都是服务器产生的，都是键值对应的。**session是保存在服务器的，服务器会生成对应的session文件，cookie是返回给客户端的，然后客户端在存储相关文件。**session在服务器的入口是ID，然后服务器查出对应的的值，通过类似cookie的形式，返回给

session

cookie

原创 2018-08-01 00:36:27 10000+阅读 2点赞 1收藏

使用Echarts几分钟制作出折线图、饼图、柱状图等

ECharts，缩写来自EnterpriseCharts。ECharts，不仅是国内关注度最高的开源项目，还是中国第一个也是目前唯一一个入选了GithubExplorerDataVisualization板块的开源项目。这里咱们结合上篇提到的Bootstrap简单栅格框架，来做一个小小的布局。学以致用嘛。从来不喜欢赘述，直接上代码，一切的解释，请看代码注释：<scripttype="text

Echarts

折线图

饼图

柱状图

原创 2018-07-29 01:56:04 9419 阅读 2点赞

使用Bootstrap制作导航栏

废话不多说，直接上代码。<body><navclass="navbarnavbar-defaultnavbar-static-top"><!--navbarnavbar-default:首先声明是一个导航栏，然后声明用导航栏的default样式可以通过navbar-defa

Bootstrap

制作

导航栏

原创 2018-07-28 00:27:44 7953 阅读 1点赞

Bootstrap响应式布局以及栅格框架

一、Bootstrap简单配置简单使用Bootstrap，只需引入：<scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/bootstrap.js"></script><linkrel="stylesheet"h

Bootstrap

响应式

布局

栅格框架

原创 2018-07-27 21:13:07 10000+阅读 1点赞 2评论

JQuery等待加载与库冲突

一、JQuery等待加载JQuery库元素是在body元素加载之前加载的。在延迟等待加载，JavaScript提供了一个事件load，方法如下：window.onload=fuction(){}；//很少用，因为交互假死，方法覆盖$(document).ready(function(){})；//可以定义多个，不会覆盖只会一次加载他们的区别在于：二、JQuery解决库冲突的方法因为$代表的就是JQ

JQuery

等待

加载

JQuery

原创 2018-07-25 00:53:01 10000+阅读 1点赞

JQuery 选择器与过滤器（随手笔记）

一、表单选择器虽然可以使用常规的选择器来对表单的元素进行定位，但还是不能满足多变的需求，所以这里我们一起来学习一下JQuery表单选择器。例如：二、表单过滤器JQuery提供了四种表单过滤器，分别可以用在是否可用，是否选择来进行表单字段的筛选<body><inputtype="file"value="测试"disabled/><inputtype="image"val

Jquery选择器

Jquery过滤器

原创 2018-07-25 00:17:41 10000+阅读 1点赞

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

13469739

Html使用Json

Font Awesome 【图标】

FFmpeg基于HLS实现大视频分片下载播放[视频直播二]

HLS与RTMP实现[视频直播一]

4种弹框

我最亲爱的

wiki-DokuWiki[25Years]的交互

Web项目中的常用编码

探究Web常用编码

浏览器的背景音乐实现方式总结

在线表格

一个实例全析js数组（17）

浅谈jsp的7个动作

输入框联想输入

利用 Siblings一步实现多个同级div，只改变当前点击的div样式

监听元素属性改变事件的方法

Ajax中的load()方法实现指定区域加载或刷新html与jsp

自定义table显示列

利用My97DatePicker实现年份多选

基于Kalendaer的日期多选

浏览器利用Webcam+Flash启用摄像头，并完成拍照

利用JOrgChart只需2分钟即可配置简单组织机构图

利用JavaScript所见即所得的生成Excel表格

IE、Chrome、Firefox使用debugger浅析

深入浅出，解析cookie与session

使用Echarts几分钟制作出折线图、饼图、柱状图等

使用Bootstrap制作导航栏

Bootstrap响应式布局以及栅格框架

JQuery等待加载与库冲突

JQuery 选择器与过滤器（随手笔记）