HTML5-开源网

网站首页 HTML5

html5实现九宫格抽奖可固定抽中某项奖品

原生js写的一个九宫格抽奖程序（周末在家闲着也是闲着）我写的这个抽奖是拿来整蛊我女朋友，因为每次抽奖的结果都是同一个。。哈哈哈哈哈哈哈哈哈哈哈哈哈我会附上正常抽奖的的代码和固定只能抽到某一个的代码；HTML代码如下⤵️...
2021-07-16 longtao100 HTML5 935 ℃ 0 评论
HTML5实现应用程序缓存(Application Cache)

为什么要使用ApplicationCache技术？在HTML5之前，我们需要接入网络才能访问，这毫无疑问是网站多次请求服务器，造成速度变慢，对于PC用户，网络相对比较稳定，载入速度也不会差太多。但是移动端呢？移动端依赖无线信号、依赖信...
2021-07-16 longtao100 HTML5 887 ℃ 0 评论
HTML5播放实现rtmp流直播

最近在做一个直播推流的功能，想自己写个网页进行直播尝试一下。然后网上试了各种教程都没成功，下面说下遇到的几个坑。1.首先通过obs进行推流，服务器是：rtmp://192.168.0.221/live，串流密钥：1234，然...
2021-07-16 longtao100 HTML5 741 ℃ 0 评论
Canvas 文本填充线性渐变的使用详解

前言在Canvas中对文本填充水平或垂直的线性渐变可以轻易实现，而带角度的渐变就复杂很多；就好像下面这样，假设文本矩形宽为W,高为H,左上角坐标为X,Y。猜想与答案给出两个答案：正确答案是图二，因为这...
2021-07-16 longtao100 HTML5 681 ℃ 0 评论
HTML5中在title标题标签里设置小图标的方法

一张网页，如果标题只有文字，那会显得特别单调；那么如何加入一个小图标呢，废话不说，代码展示。在html中的<head>标签里：<head><metacharset="UTF-8"&...
2021-07-16 longtao100 HTML5 741 ℃ 0 评论
HTML5图片层叠的实现示例

最近在跟的一个深圳屋祺项目，由于一些内部原因这次我们需要自己写静态页面。兵来将挡水来土掩，既然组织需要那就做呗。其中有一个页面布局如下所示，红色方框标注的部分是由三张图片组合而成，各部分图片如下：&n...
2021-07-16 longtao100 HTML5 690 ℃ 0 评论
HTML5 背景的显示区域实现

background-clip属性规定背景的绘制区域。默认值： border-box继承性： no版本： CSS3JavaScript语法： object.style.back...
2021-07-16 longtao100 HTML5 640 ℃ 0 评论
HTML5获取当前地理位置并在百度地图上展示的实例

1.HTML5获取当前地理位置HTML5GeolocationAPI（地理位置应用程序接口）可以获取当前地理位置，手机端使用GPS，电脑则根据网络定位检查浏览器是否支持HTML5GeolocationAPI&l...
2021-07-16 longtao100 HTML5 777 ℃ 0 评论
uniapp+Html5端实现PC端适配

前言：使用uniapp做的h5页面，在PC端显示时，发现由于upx单位计算基准值太大，导致页面排班布局错乱思路：刚开始发现使用px单位不会导致页面布局混乱，但这对刚开启的项目友好，对已经成型的项目修改成本太高，风险也大，而且px...
2021-07-16 longtao100 HTML5 818 ℃ 0 评论
HTML5跳转小程序wx-open-launch-weapp的示例代码

注意事项微信开放标签有最低的微信版本要求，以及最低的系统版本要求。微信版本要求为：7.0.12及以上。系统版本要求为：iOS10.3及以上、Android5.0及以上。绑定域名微信安全域名只能修改绑定3次/每月登录微信...
2021-07-16 longtao100 HTML5 830 ℃ 0 评论
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)

说起来挺简单的，可以直接去查询postMessage推送和window.addEventListener接收使用方式，能自己搞明白是最好的，本文章也只是记录一下自己的使用方式使用postMessage推送和window.addEventL...
2021-07-16 longtao100 HTML5 846 ℃ 0 评论
canvas实现图片镜像翻转的2种方式

1.通过canvas自带的画布方法进行翻转varimg=newImage();//这个就是img标签的dom对象img.src='./sy.png';img.onload=functi...
2021-07-16 longtao100 HTML5 722 ℃ 0 评论
HTML5 video进入全屏和退出全屏的实现方法

当我们使用video标签的时候，有时候因为更多的需要，我们要自己自定义控制栏，而进入和退出全屏也是其中的一部分不同的浏览器有不同的实现方法//Webkitelement.webkitRequestFullScreen...
2021-07-16 longtao100 HTML5 517 ℃ 0 评论
Canvas 帧动画吃苹果小游戏

先看页面效果。下面四个按钮分别表示开始、结束、暂停、继续下面是帧动画图片素材：帧动画的实现，关键是CanvasAPIctx.drawImage()（9个参数）和setInterval定时器。设置图片的视图窗口，每...
2021-07-16 longtao100 HTML5 525 ℃ 0 评论
Html5饼图绘制实现统计图的方法

Html5提供了强大的绘图API，让我们能够使用javascript轻松绘制各种图形。本文将主要讲解使用HTML5绘制饼图（统计图）的方法。先看一下饼图效果：这个图是动态生成的，根据传入的比例参数（数组），来动态绘制饼图。饼图的大小...
2021-07-16 longtao100 HTML5 549 ℃ 0 评论
HTML5 通过Vedio标签实现视频循环播放的示例代码

要实现网页播放视频在HTML5以前是通过<embed>标签<embed>标签的作用是在HTML页面中嵌入多媒体元素<embedsrc="1.swf"width="400"><obj...
2021-07-16 longtao100 HTML5 505 ℃ 0 评论
html5 video全屏播放/自动播放的实现示例

近期开始开发公司新版官网，首页顶部（header）是一个全屏播放的小视频,现简单总结如下：页面代码<headerclass="header"style="width:100%;position:relati...
2021-07-16 longtao100 HTML5 543 ℃ 0 评论
HTML5 video循环播放多个视频的方法步骤

最近在开发中遇到的需求是：微信扫描课件二维码，播放其对应的课件视频设计流程1.扫描二维码时，将其视频列表存入model中，存入第一条是为了，不在html界面重新获取第一条视频model.addAttribute("...
2021-07-16 longtao100 HTML5 581 ℃ 0 评论
Html5 webview元素定位工具的实现

一、工具选择webview元素定位有三种方式：使用driver.page_source方法，将获取到的页面内容写入到一个html文件中，然后使用浏览器打开html文件，使用F12调试用具进行元素定位chrome浏览器自带...
2021-07-16 longtao100 HTML5 596 ℃ 0 评论
解决html5中的video标签ios系统中无法播放使用的问题

1.先是从前端的角度去考虑，如何让safari浏览器兼容video，并支持播放（未找到解决的方法）。2.经多次查找网上信息，发现使用后台能解决该问题，解决点在HTTP协议的响应头里面（Accept-Ranges）。3.safari浏...
2021-07-16 longtao100 HTML5 561 ℃ 0 评论
h5移动端调用支付宝、微信支付的实现

公司项目之前已有支付宝支付，现要求增加微信支付，第一次做，摸着石头过河！结果是满意的。废话就不说了直接上代码：varaliChannel=null;varwxChannel=null;...
2021-07-16 longtao100 HTML5 589 ℃ 0 评论
原生canvas制作画图小工具的踩坑和爬坑

最近在写一个类似截图里的简易画图的小工具，画线，画矩形，画圆，可以选择颜色，就像这样写的过程中遇到了一些坑，还好爬出来了，也得到几位大佬的指点，稍微接触了一下zrender，在这里记录一下。坑1，绘制过程的预览用...
2021-07-16 longtao100 HTML5 596 ℃ 0 评论
浅析图片上传及canvas压缩的流程

我们通常在做图片上传的时候都会遇上这样的情况，一是后端接口限制上传图片的大小，或者是即使后端没有限制大小，因为图片太大在前端渲染时太慢，造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。本文在gitthub做了收录：githu...
2021-07-16 longtao100 HTML5 582 ℃ 0 评论
Html5导航栏吸顶方案原理与对比实现

一.什么是吸顶?吸顶效果是web开发中一种常见的交互方式，常见的应用场景有导航、搜索框等等。能够做流量的横向分发，瞩目的吸顶效果和横滑切tab的手势，能够让用户快速发现更多商品。市场上享有H5导航栏吸顶效果展示1.淘宝聚划算吸...
2021-07-16 longtao100 HTML5 540 ℃ 0 评论
HTML5页面无缝闪开的问题及解决方案

在传统的web优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加速html返回，之前一篇h5秒开大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无法尽善...
2021-07-16 longtao100 HTML5 562 ℃ 0 评论

‹‹ 1 ››

最近发表

开源网归档