找到 598 篇文章 关于前端脚本

仅使用 CSS 动画 - 使用 border-radius 和透明背景绘制圆圈

Arjun Thakur
更新于 2020年6月25日 07:36:26

635 次浏览

要绘制一个具有透明背景和圆角的圆圈,请使用以下 CSS 代码:body {    background: repeating-linear-gradient(45deg, white 0px, green 100px);    height: 400px;    background-size: 400px 400px;    background-repeat: no-repeat; } html {    height: 100%; } #box {    position: absolute;    width: 400px;    height: 400px;    border: solid blue 2px;    animation: colors 5s infinite; } #demo {    width: 50%;    height: 100%;    right: 0px;    position: absolute;    overflow: hidden;    transform-origin: left center;    animation: cliprotate 18s steps(2) infinite;    -webkit-animation: cliprotate 18s steps(2) infinite; } .circlehalf {    box-sizing: border-box; ... 阅读更多

如何保存和恢复 HTML5 Canvas 状态?

Chandu yadav
更新于 2020年6月25日 07:37:05

597 次浏览

HTML5 canvas 提供了两种重要的保存和恢复 canvas 状态的方法。每次调用 save 方法时,canvas 状态都会存储到堆栈中,每次调用 restore 方法时,都会从堆栈中返回最后保存的状态。序号方法和描述1save()此方法将当前状态推入堆栈。2restore()此方法弹出堆栈顶部的状态,将上下文恢复到该状态。                                                                示例您可以尝试... 阅读更多

围绕当前原点旋转 HTML5 Canvas

Krantik Chavan
更新于 2020年6月25日 07:37:37

400 次浏览

HTML5 canvas 提供了 rotate(angle) 方法,用于围绕当前原点旋转 canvas。此方法只接受一个参数,即 canvas 旋转的角度。这是一个以弧度为单位测量的顺时针旋转。示例您可以尝试运行以下代码来旋转 HTML Canvas:                    #test {             width: 100px;             height:100px;             margin: 0px auto;          }             ... 阅读更多

随机播放 HTML5 音频

Nishtha Thakur
更新于 2020年6月25日 07:38:46

319 次浏览

要随机播放,请按如下方式添加歌曲:init ([    'http://demo.com/songs/song1.mp3,    'http://demo.com/songs/song2.mp3,    'http://demo.com/songs/song3.mp3 ]);使用以下代码使用 Math.random 随机播放:function displayRandom() {    var audio = Math.floor(Math.random() * (collection.length));    audio = collection[audio];    audio.play();    setTimeout(loop,audio.duration*1000); }

执行基本的 HTML5 Canvas 动画

Arjun Thakur
更新于 2020年6月25日 07:38:10

224 次浏览

HTML5 canvas 提供了绘制图像并将其完全擦除的必要方法。我们可以借助 JavaScript 在 HTML5 canvas 上模拟良好的动画。示例您可以尝试运行以下代码来执行基本的 HTML5 Canvas 动画:                    var pattern= new Image();          function animate(){             pattern.src = '/html5/images/pattern.jpg';             setInterval(drawShape, 100);          }          function drawShape(){             // 获取 canvas ... 阅读更多

cache.manifest 第一次有效,然后在 HTML 中失败

Smita Kapse
更新于 2020年6月25日 07:39:31

53 次浏览

在底部添加以下内容:NETWORK:*在带有路径的 URL 中设置清单的版本号。此外,设置:CACHE MANIFEST #rev ?v = 42 /css/style.css?v = 20 /js/myscript.js?v = 20

Safari 5 中的 HTML5 地理位置

George John
更新于 2020年6月25日 07:40:03

905 次浏览

HTML5 地理位置 API 允许您与您喜欢的网站共享您的位置。JavaScript 可以捕获您的纬度和经度,可以发送到后端 Web 服务器,并执行诸如查找本地企业或在地图上显示您的位置等精细的位置感知操作。示例让我们看看如何获取当前位置:                    function showLocation(position) {             var latitude = position.coords.latitude;             var longitude = position.coords.longitude;             alert("Latitude : " + latitude + " ... 阅读更多

类似于 BluePrint/960gs 的 HTML5+CSS3 框架?

Arjun Thakur
更新于 2020年6月25日 07:23:57

85 次浏览

您可以使用 BluePrint/960gs 框架或以下任何一个:52frameworkSusy        52framework (参考)提供以下功能的框架:CSS3 渐变、多重阴影和其他令人惊叹的属性。支持 IE 的 CSS3 选择器。具有类似 Vimeo 皮肤的新改进的 HTML5 视频支持全新的表单框架,具有 HTML5 验证(通过 javascript)Susy (参考)一个轻量级的 Sass 网格布局框架。旨在阐明响应式网格布局。将 Susy 与浮动、flexbox、表格等一起使用。

使用 HTML5 将坐标转换为地名

Anvi Jain
更新于 2020年6月25日 07:22:53

229 次浏览

为此,请使用 Google Maps API 执行反向地理编码。地理编码是指将人类可读的地址转换为地图上的位置。执行相反操作的过程,即将地图上的位置转换为人类可读的地址,称为反向地理编码。示例让我们来看一个设置纬度和经度的示例:function initMap() {    var map = new google.maps.Map(document.getElementById('map'), {       zoom: 8,       center: {lat: 20.502, lng: -22.765}    }); }反向地理编码器将匹配国家、省份、城市和街区、街道地址和邮政编码。

是否有任何浏览器支持 HTML5 的 checkValidity() 方法?

Nitya Raut
更新于 2020年6月25日 07:24:36

108 次浏览

是的,`checkValidity()` 方法在 Google Chrome 和 Opera 浏览器中也同样有效。以下是一个示例:

广告
© . All rights reserved.