大晚上的,突然想到,我这么喜欢听歌的人,博客里怎么能少了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. 精通mysql之精通EXPLAIN

    EXPLAIN列的解释: table:显示这一行的数据是关于哪张表的 type:这是重要的列,显示连接使用了何种类型.从最好到最差的连接类型为const.eq_reg.ref.range.indexh ...

  2. Eclipse下载GitHub源码

    1. 可以通过Eclipse->File->Import->Project from Git->URI来提取工程   2. 也可以通过打开git仓库视图(Eclipse 自带了 ...

  3. 【一天一道LeetCode】#42. Trapping Rain Water

    一天一道LeetCode系列 (一)题目 Given n non-negative integers representing an elevation map where the width of ...

  4. shell的字符串和数字的转化(数字自动做字符串处理,变量名做字符串输出用单引号)

    shell里面怎么样把字符串转换为数字? 例如:a="024" 1,用${{a}} 2,用let达到(()) 运算效果. let num=0123; echo $num; 83 3 ...

  5. libevent之event

    就如libevent官网上所写的“libevent - an event notification library”,libevent就是一个基于事件通知机制的库,可以看出event是整个库的核心.e ...

  6. 【一天一道LeetCode】#10. Regular Expression Matching

    一天一道LeetCode系列 (一)题目 Implement regular expression matching with support for '.' and '*'. '.' Matches ...

  7. 【Android 应用开发】AndroidUI设计 之 图片浏览器

    图片浏览器效果图 : 源码下载地址 : -- CSDN : http://download.csdn.net/detail/han1202012/6875083 -- GitHub : https:/ ...

  8. 浅谈C之精华---指针

    今天是2016年的第一天,祝大家元旦快乐!哎,今天有点倒霉,代码写到一半,突然机子就没电了,幸好有保存,否则今天没有这篇日志的出现. 好了,今天以我个人的角度来深度剖析一下C语言中关于指针的用法以及注 ...

  9. Linux进程管理 - PRI,nice,free,uname,netstat

    优先运行序 (priority, PRI) 这个 PRI 值越低代表越优先的意思.不过这个 PRI 值是由核心动态调整的, 使用者无法直接调整 PRI 值的. 由於 PRI 是核心动态调整的,我们使用 ...

  10. Linxu命令与文件的搜索 - which, whereis, locate, find

    which (寻找『运行档』) [root@www ~]# which [-a] command 选项或参数: -a :将所有由 PATH 目录中可以找到的命令均列出,而不止第一个被找到的命令名称 范 ...