大晚上的,突然想到,我这么喜欢听歌的人,博客里怎么能少了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. ios第三方数据请求 UI_15

    AppDelegate.m //指定根视图 self.window.rootViewController = [[[UINavigationController alloc]initWithRootV ...

  2. OpenCV空洞填充算法

    讨论帖: http://bbs.csdn.net/topics/391542633 在Matlab下,使用imfill可以很容易的完成孔洞填充操作,感觉这是一个极为常用的方法,然而不知道为什么Op ...

  3. 小强的HTML5移动开发之路(9)——坦克大战游戏3

    来自:http://blog.csdn.net/dawanganban/article/details/17754235 上一篇我们创建了敌人的坦克和自己的坦克,接下来就应该让坦克发子弹了,我们下面来 ...

  4. Css3盒子模型-css学习之旅(5)

    主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddinglef ...

  5. hadoop上C++开发两种方式的例子

    百度在使用Hadoop过程中同样发现了Hadoop因为Java语言带来的低效问题,并对Hadoop进行扩展. 而在此之前,百度也尝试了 Hadoop PIPES 和 Hadoop Streamming ...

  6. mysql进阶(六)模糊查询的四种用法介绍

    mysql中模糊查询的四种用法介绍 这篇文章主要介绍了mysql中模糊查询的四种用法,需要的朋友可以参考下. 下面介绍mysql中模糊查询的四种用法: 1 %: 表示任意0个或多个字符.可匹配任意类型 ...

  7. saiku显示不出新的cube(加载的cube,saiku会保存到缓存中,不重新加载)

    当用workbench 修改cube后,保存到saiku路径. saiku读取该cube时,如果以前加载过该cube(同路径,同名).则不会新加载,而是用缓存中的cube,这个cube是以前的cube ...

  8. [转]smail语法 详解

    大家都应该知道APK文件其实就是一个MIME为ZIP的压缩包,我们修改ZIP后缀名方式可以看到内部的文件结构,例如修改后缀后用RAR打开鳄鱼小顽皮APK能看到的是(Google Play下载的完整版版 ...

  9. 【一天一道LeetCode】#328 Odd Even Linked List

    一天一道LeetCode系列 (一)题目 Given a singly linked list, group all odd nodes together followed by the even n ...

  10. android 之ViewStub

    在开发应用程序的时候,经常会遇到这样的情况,会在运行时动态根据条件来决定显示哪个View或某个布局.那么最通常的想法就是把可能用到的View都写在上面,先把它们的可见性都设为View.GONE,然后在 ...