网页js实现音乐功能

2024-09-02

通过js实现在页面中添加音乐

代码如下!兼容IE // JavaScript Document function autoPlay(){//自动播放 var myAuto = document.getElementById('myaudio'); myAuto.src = '/media/v2/sss.mp3';//MP3路径 myAuto.play(); } function pausePlay(){//暂停播放 var myAuto = document.getElementById('myaudio'); myAuto

JS实现音乐播放器

JS实现音乐播放器前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所

JS实现注销功能

JS实现注销功能,代码如下: <script> window.history.forward(1); </script> 这个代码的用法就是: 比如,我们此时有两个页面:Login.html 和 Index.html 我们要实现从 Login.html 登陆到 Index.html 注销的话,那么,就把代码放到 Index.html 页面简单来说,在那个页面注销,就将这个代码放到哪个页面,我在Index.html注销,所以,将代码放到Index.html .

JS全选功能代码优化

原文:JS全选功能代码优化 JS全选功能代码优化最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能来做个简单的demo,使用目前现在的编码方式来重新编码,当然以后会一直用这种方式来编写自己的代码.下面是如下代码: JS所有代码: /** * JS全选 * @class Checkall * @param {Object} cfg * @param {Element|selector} [cfg.

CI 结合 vue.js 的搜索功能模块

CI 结合 vue.js 的搜索功能模块最近在有优化公司后台的某个模块的搜索功能优化原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子是不是比以前好看了,虽然页面出了,单是功能却不是那么好做,我页面的请求是用ajax get 方式进行的,这里是vue 的前端页面 <div class="row"> <div class="col-sm-10 m-b-20"> <div class=&q

网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

JS实现打印功能(包括打印预览.打印设置等) 绪最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打控件)控件,而且有些环境下还不能使用.如有想使用此控件实现打印功能的盆友,可点击进行下载.但我强烈推荐下面的方法,即利用系统本身的打印属性实现打印功能.简单的一条系统调用命令即可实现. 前提条件: 进行的电脑必须连接有打印机,至于判断PC是否连接打印机的问题还未能解决,欢迎有解决方法的朋友留言,小生

C#和网页js互调代码

C#和网页js互调代码 1.先写个网页放在主程序目录下:test.html <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>测试网页</title> <script> function MyFun

js经常使用功能代码

js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class="baocun2" value="加入" onclick="changeDisplay()" /> <script type="text/javascript"> function changeDisplay() { var

转载【iOS开发】网页JS与OC交互（JavaScriptCore） OC ----->JS

目标本文介绍利用苹果在iOS7时发布的JavaScriptCore.framework框架进行js与OC的交互.我们想要达到的目标是: OC调用网页上的js方法网页js调用APP中的OC方法 JavaSciptCore.framework框架介绍 JavaScriptCore是webkit的一个重要组成部分,主要是对js进行解析和提供执行环境.具体介绍请看这篇简书的文章:JavaScriptCore 使用准备环境创建一个名为JS与OC交互Demo的iOS工程.然后在storyboar

C#设计模式总结 C#设计模式(22)——访问者模式（Vistor Pattern） C#设计模式总结 .NET Core launch.json 简介利用Bootstrap Paginator插件和knockout.js完成分页功能图片在线裁剪和图片上传总结循序渐进学.Net Core Web Api开发系列【2】：利用Swagger调试WebApi

C#设计模式总结一. 设计原则使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替原则.依赖倒置原则.接口隔离原则.合成复用原则和迪米特法则.下面就分别介绍了每种设计原则. 1.1 单一职责原则就一个类而言,应该只有一个引起它变化的原因.如果一个类承担的职责过多,就等于把这些职责耦合在一起,一个职责的变化可能会影响到其他的职责.另外,把多个职责耦合在一起,也会影响复用性. 1.

.NET混合开发解决方案12 网页JS调用C#方法访问WinForm或WPF窗体

系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NET混合开发解决方案2 WebView2与Edge浏览器的区别 .NET混合开发解决方案3 WebView2的进程模型 .NET混合开发解决方案4 WebView2的线程模型 .NET混合开发解决方案5 WebView2运行时与分发应用 .NET混合开发解决方案6 检测是否已安装合适的WebView2

【音乐爬虫】Python爬虫-selenium+browsermob-proxy 解决动态网页 js渲染问题

1.一般的python爬虫很简单,直接请求对应网址,解析返回的数据即可,但是有很多网站的数据的js动态渲染的,你直接请求是得不到对应的数据的这时就需要其它手段来处理了. 2.以一个例子来说明,整个过程,爬取一个音乐网站的对应歌手的歌曲. 目标网址http://tool.liumingye.cn/music/?page=searchPage,在搜索框输入歌手名字即可得到歌曲. 如果我们直接请求这个网址:http://tool.liumingye.cn/music/?page=audioPage&

Node.js+Express+MongoDB数据库实现网页注册登入功能

通过 Node.js + Express + MongoDB 实现网页注册账号和登入账号的功能项目准备: 1: 事先准备好项目的页面 (首页页面 index.html)(登入页面 login.html) (注册页面 register.html) 2: 安装好 Node.js 需要使用的第三方模板 3: 设计路径设计 4: 理清功能需求 5: 创建 app.js router.js mgdb.js 三个 js 文件和 public 和 views 文件夹作用: app

localstorage实现网页状态记录比如放音乐功能的实例

<div class="music"> <a href="javascript:;" onclick="playPause();"> <i class="icon-music open" num="1"></i> <i class="music-span"></i> <audio id="aud&qu

PC网页js调用本地应用程序

最近要现实一个在PC网页中实现点击按钮调用本地应用程序的功能其实实现原理也非常简单, 首先注册一个本地注册表文件,指向本地应用程序路径其次在网页中用js指向这个注册表文件,就可以实现网页调用本地应用程序 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\myprotocol] @="myprotocol Protocol" "URL Protocol"="" [HKEY_CLASS

原生JS实现音乐播放器！

前言最近在复习JS,觉得音乐播放器是个挺有意思的东西,今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能: 1.支持循环.随机播放 2.在播放的同时支持图片的旋转 3.支持点击进度条调整播放的位置,以及调整音量 4.显示音乐的播放时间 5.支持切歌:上一首.下一首.点击歌名切歌:暂停播放等~ 添加音乐有两种方式: ①可以用一个audo标签,这样应该把音乐的地址存放到一个数组中: ②第二种方式是,有几首歌就添加几个audo标签,然后获取所有的背景音乐(示例

HTML+纯JS制作音乐播放器

该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm...这样看起来有点单调. 我们把它加在网页上试试. 具体效果可以去我的个人网站查看http://tcxqq.top 好了,成品已经展示了接下来,开干吧! <!DOCTYPE html> <html lang="en"> <head> <meta c

js 复制粘贴功能记录

最近工作中需要在前端页面中使用代码完成剪贴板的读写,网上搜索了下相应的资料,记录下... 这个功能有两个办法一个是js方式,一个是使用flash 一.JS方法 1.复制首先复制的过程分为两步曲,无论是使用手工还是代码,先来看看手工的 a.使用光标选中内容 b.通过ctrl + c 进行复制其实在代码端也是一样,以此用这个步骤来,html代码如下 <html> <head> <title></title> </head> <body>

网页JS简繁体字转换

用法:非得加上html头 utf-8编码其它编码无测试 head 中引用 <script language='javascript' src='zh.js'></script> 再把以下代码放到合试的地方 <a href="javascript:zh_tran('s');" class="zh_click" id="zh_click_s">简体</a><a href="javasc

Node.js实战10：“流”是Node.js最强大的功能之一。

流是Nodejs的高级应用,掌握流的使用,才能真正胜任NodeJS开发. Nodejs中,流是基于事件的API,用于管理和处理数据,而且效率很好! 什么是流? 流是一个抽象接口,Node 中有很多对象实现了这个接口. 例如,对http 服务器发起请求的request 对象就是一个 Stream,还有stdout(标准输出)等. 流的四种类型 dable - 可读操作. Writable - 可写操作. Duplex - 可读可写操作. Transform - 操作被写入数据,然后读出结果. 流的

前端练手小项目——网页版qq音乐仿写

qq音乐网页版仿写一些步骤与注意事项一开始肯定就是html+css布局和页面了,这段特别耗时间,耐心写完就好了首先要说一下大致流程: 一定要先布局html!,所以一定要先分析页面布局情况,用不同的颜色把区位定好.html的大致框架出来才能办事,搭配比较简单的css,如宽度高度定位什么的: css在html布好大致的局基础上开始细化细节(你最终会发现,好像你的大部分时间都送给了css): js一直是最后,如图标点击有变化什么的(这部分代码是真不多...写起来也是真爽,不过一定要考虑到各种情况

网页js实现音乐功能

热门专题