大晚上的,突然想到,我这么喜欢听歌的人,博客里怎么能少了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. org/w3c/dom/ElementTraversal 错误解决办法

    org/w3c/dom/ElementTraversal 错误解决办法 不记得之前几天把什么maven依赖包删除了,今天利用htmlunit运行代码的时候报了下面的错误: Exception in t ...

  2. (NO.00001)iOS游戏SpeedBoy Lite成形记(九)

    我们回到matchRun方法中去尝试第一次修改,部分代码如下: CCActionMoveBy *moveBy = [CCActionMoveBy actionWithDuration:duration ...

  3. Java 与 C++ 不一样的地方(持续更新中...)

    本文仅以记录 Java 与 C++ 不同之处,以备随时查询. Java 程序运行机制 Java 是一门编译解释型的语言,即它在运行的过程中既需要编译也需要解释.如下图表示的是 Java 程序运行机制: ...

  4. Cocos2d中update与fixedUpdate的区别(六)

    它如何工作呢? update:和fixedUpdate:方法实际这样工作. Cocos2D将从iOS接口中取得时间间隔(delta)在你的游戏代码执行期间,并且检查fixedUpdate:方法在间隔期 ...

  5. linux内核代码的编写初步以及makefile的配置

    在linux内核代码开发中,头文件不能包含标准C头文件,只能采用GNC标准 而且内核开发中没有main函数,只有init 和 exit ,这是每个内核模块中必须要包含的函数模块. 在GNU C标准中, ...

  6. 【一天一道LeetCode】#27. Remove Element

    一天一道LeetCode系列 (一)题目 Given an array and a value, remove all instances of that value in place and ret ...

  7. 【资源分享】云计算 CRM 等网上搜集资料

    持续更新,作为抛砖引玉,如果您有更好.更新的资源,望大家分享.共同学习.详细信息尽在 华夏编程社区(HackProLabs)-------------------------------------- ...

  8. LeetCode之“链表”:Rotate List

    题目链接 题目要求: Given a list, rotate the list to the right by k places, where k is non-negative. For exam ...

  9. 43个优秀的Swift开源项目推荐

    "轮子" 工具类 项目 开发者 备注 SwiftyJSON tangplin, lingoer GitHub 上最为开发者认可的 JSON 解析类 Dollar.swift Ank ...

  10. 网站开发进阶(十六)错误提示:Multiple annotations found at this line:- basePath cannot be resolved to a variable

    错误提示:Multiple annotations found at this line: basePath cannot be resolved to a variable 出现以上错误,主要是由下 ...