大晚上的,突然想到,我这么喜欢听歌的人,博客里怎么能少了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. XML解析之sax解析案例(一)读取contact.xml文件,完整输出文档内容

    一.新建Demo2类: import java.io.File; import javax.xml.parsers.SAXParser; import javax.xml.parsers.SAXPar ...

  2. javascript setinterval 正确的语法

    前几天我用setinterval 写了一个小程序,这个setinterval是用来干什么的我就不解释了. 写的方法在其它的浏览器里都能用,后来测试组的同事拿去一测就出了问题.因为她们爱用360,还有I ...

  3. 在go中使用json作为主要的配置格式

    最近在用go重构,在先前的代码中,我们使用的ini文件进行配置,但是因为很多历史遗留问题,导致配置混乱,维护困难,自然也需要考虑重构了. 通用配置格式 通用的配置格式有很多,常用的就有ini,json ...

  4. (NO.00003)iOS游戏简单的机器人投射游戏成形记(十七)

    现在玩家选择机器人后,可以在屏幕上或手臂上点击来移动robot's arm了. 但是玩家选择一个机器人后没有视觉效果来表明哪个机器人被选中.玩家做了一个操作后没有视觉反馈会惹恼强迫症用户滴 ;) 这篇 ...

  5. 什么是IOC

    什么是IOC         IOC:控制反转,控制权的转移,应用程序本身不负责对象的创建和维护,而是由外部容器负责创建和维护.        DI(依赖注入)是其一种实现方式        目的:创 ...

  6. 03_Android项目中读写文本文件的代码

    编写一下Android界面的项目 使用默认的Android清单文件 <?xml version="1.0" encoding="utf-8"?> & ...

  7. 【Java编程】Eclipse快捷键

    Alt+左箭头,右箭头        以在编辑窗口切换标签 Alt+上下箭头,                以自动选择鼠标所在行,并将其上下移动 Ctrl+f6                    ...

  8. Ubuntu14.04安装Matlab2013a

    source url: http://blog.sina.com.cn/s/blog_ec5021d60102v3ky.html 1. 为方便操作,把Matlab镜像文件(iso)重命名为'Matla ...

  9. ERP-非财务人员的财务培训教(一.二)------财务基础知识

    二.基本财务管理知识 第一节 财务管理基础知识(一) 财务与会计的关系 会计的基础知识 (一) 财务与会计的关系 财务与会计的内涵 1.会计 会计工作主要是解决三个环节的问题: 会计凭证 会计账簿 会 ...

  10. 史上最全Android Studio快捷键 -2016-02-28