大晚上的,突然想到,我这么喜欢听歌的人,博客里怎么能少了BGM呢,说干就干。

首先,给博客侧边栏加一个空div:<div id="music"></div>

然后就是js了,下面奉上js代码:

//500英里
var m1="http://win.web.rh03.sycdn.kuwo.cn/a350d16bcc9f510464e06e582c7a3a3e/5ab141af/resource/a1/20/25/1132448623.aac";
//我爱你
var m2="http://dl.stream.qqmusic.qq.com/C400001icZKT0tqWH5.m4a?vkey=6B4D43439347D32461B05BBD450DFD301A40F3AF3A71EED192BF286D033478A106CF6A757189F5DFA5F02FDFBF7EBF9B653C8F9DF8371358&guid=9228674034&uin=0&fromtag=66";
//my all(live)
var m3="http://m128.xiami.net/812/634530812/2102860445/1796788604_1505891215426.mp3?auth_key=1522119600-0-0-18fb001c1d285828e630347a4b5f0e16";
//let her go
var m4="http://dl.stream.qqmusic.qq.com/C400000Gb5s20okAGc.m4a?vkey=F310BDE485F643A1CDA95FAC57B4DF3750F62F08C9F3B4B4DBD1DBCBB0E0D85FF44CF083982EE30FD977AB527E918F3089C5CD58E1E3CA86&guid=9228674034&uin=0&fromtag=66";
//see you again
var m5="http://dl.stream.qqmusic.qq.com/C4000022R1L82mb8Hp.m4a?vkey=286FB65F8EE1C86310E39B4C343289DA2CBB1610886A1C161701915CCFCC759AB59265968DD993C34E269E96F21E600782EFC75FE4C2BC6E&guid=9228674034&uin=0&fromtag=66";
//try
var m6="http://dl.stream.qqmusic.qq.com/C400001jrqse2O46fv.m4a?vkey=691D221BB8E39B024D43E22FDB44BDD61B707522EF109E4806BFEA19D1DAF8C8FC2E5EB8B706A3A95BF7944307930F96585F25A269A4927D&guid=9228674034&uin=0&fromtag=66";
//stay here forever
var m7="http://dl.stream.qqmusic.qq.com/C400001Af4F71o2eWL.m4a?vkey=B85249D922AF51639FCBEB407E0C0BC862C5332EDD86553CF01F308DD23446B96348E904972D852D9AD456FEF5C0D5BFD5CB5209DC054C31&guid=9228674034&uin=0&fromtag=66";
//任意门
var m8="http://dl.stream.qqmusic.qq.com/C400001vpWmD4Bjl3l.m4a?vkey=0D778A482A2AB41F9CD681FF53ABBA3F3A727B7730582722D75DA0C304118F6E6F453C2A56A5BAE1F7A38FA0E9D1AADBEB01520358A0567A&guid=9228674034&uin=0&fromtag=66";
//晴天
var m9="http://dl.stream.qqmusic.qq.com/C4000039MnYb0qxYhV.m4a?vkey=91642C03D40616ACB115987FC15FAA3B8BB8B04E9C80130B9FD9EF2F8EFA6535D74BEDFCE813283A4929010D6810C95BDE86C8E5CF20DCD4&guid=9228674034&uin=0&fromtag=66";
//七里香
var m10="http://dl.stream.qqmusic.qq.com/C400004Z8Ihr0JIu5s.m4a?vkey=1E323D98E2CB5EAD98C937FE45EB6147D2F2CF96407F37853ABA0D14C75E35D3E94B9B0793E08A4EB86C7F8620110793EFDD49DA0DC913B2&guid=9228674034&uin=0&fromtag=66";
var x=Math.round(Math.random()*);
console.log(x);
if (x==) x=m1
else if (x==) x=m2
else if (x==) x=m3
else if (x==) x=m4
else if (x==) x=m5
else if (x==) x=m6
else if (x==) x=m7
else if (x==) x=m8
else if (x==) x=m9
else x=m10
var obj = document.getElementById("music");
obj.innerHTML='<audio src='+'"'+x+'"'+' '+'height="0"'+'autoplay="true"'+'loop="true"'+'>'+'</audio>';

如此,就实现了每次刷新页面的时候,随机播放上面10首歌里面的任意一首。

So easy!

给你的网页添加一个随机的BGM的更多相关文章

  1. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  2. 给定两个字符串 s 和 t,它们只包含小写字母。 字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母。 请找出在 t 中被添加的字母。

    给定两个字符串 s 和 t,它们只包含小写字母.字符串 t 由字符串 s 随机重排,然后在随机位置添加一个字母.请找出在 t 中被添加的字母. 示例: 输入: s = "abcd" ...

  3. CSS3属性 box-shadow 向框添加一个或多个阴影

    CSS3属性 利用box-shadow制作网页页眉背景 box-shadow 浏览器支持 IE9+.Firefox 4.Chrome.Opera 以及 Safari 5.1.1 支持 box-shad ...

  4. css008 给网页添加图片

    css008 给网页添加图片 1.            css和<img>标签       1.<img>标签是html的添加图片的标签,一般为: <img src=” ...

  5. CSS3-给网页添加图片

    给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...

  6. 使用 Google Fonts 为网页添加美观字体

    前言 文字是网页中很重要的组成部分.为文字选择一个合适的字体,能够更好的展现一个网站的个性,表达所要传递的信息,同时吸引用户来产生兴趣. 说到字体,我们首先会想到 CSS 里面的 font,例如: & ...

  7. linux采用模块方法,添加一个新的设备

    该文转载自:http://rangercyh.blog.51cto.com/1444712/521244 系统调用是操作系统内核和应用程序之间的接口,而设备驱动程序是操作系统内核和机器硬件之间的接口. ...

  8. 为树莓派添加一个强实时性前端[原创cnblogs.com/helesheng]

    树莓派是最近流行嵌入式平台,其自由的开源特性以及低廉的价格,吸引了来 自全球的大量极客和计算机大咖的关注.来自各大树莓派社区的幕后英雄,无私地在这个开源硬件平台上做了大量的工作,将其打造成了世界上通用 ...

  9. iOS-仿支付宝加载web网页添加进度条

    代码地址如下:http://www.demodashi.com/demo/11727.html 目前市场上APP常会嵌入不少的h5页面,参照支付宝显示web页面的方式, 做了一个导航栏下的加载进度条. ...

随机推荐

  1. Caffe框架,训练model并测试数据

    1. 训练model #!/usr/bin/env sh ./build/tools/caffe train --solver=examples/focal_length/focal_solver.p ...

  2. SQL备份所有数据库脚本

    技巧要点:使用游标循环读取所有数据库名,然后定义存放路径,最后备份所有数据库到指定存在的本地文件夹中 脚本如下: declare @fileName varchar(255) --定义备份文件名变量d ...

  3. 利用HTP工具包开发报表

    利用这种方式的优点是不需要跑请求就可以打印报表 工具包中常用程序说明 htp.print 语法   htp.print (cbuf | dbuf | nbuf); 作用   generates a l ...

  4. Linux/Android多点触摸协议

    链接点击打开链接 关于Linux多点触摸协议大家可以参考kernel中的文档:https://www.kernel.org/doc/Documentation/input/multi-touch-pr ...

  5. (六十二)纯代码搭建UI

    在Xcode6中,去掉了Empty Application的选项,因此可以通过先创建SingleView,再删除storyboard,并且把工程设置中的main Interface清空. 通过AppD ...

  6. 文件I/O实践(2) --文件stat

    功能:获取文件元数据 #include <sys/types.h> #include <sys/stat.h> #include <unistd.h> int st ...

  7. html详解(三)

    7.表格标签. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. 数据的压缩存储与解压缩算法实现(C语言)

    在一些嵌入式的项目设计中,空间是相当宝贵的,因为一个CPU的存储是有限的,所以此时我们在保存数据的时候,喜欢来进行压缩保存,著名的有哈夫曼树算法,专门用来做压缩的算法,当然,本节我们不讨论这些稍微高级 ...

  9. AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载

    AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...

  10. SpriteBuilder修改CCB文件中的子CCB文件需要注意的一个地方

    在SpriteBuilder中如果一个CCB(比如一个场景)中嵌入了另一个子CCB文件(比如一个player),那么当给该子CCB中的root对象添加若干属性的时候,必须注意到这个并没有应用到父CCB ...