博客园 首页 私信博主 显示目录 隐藏目录 管理 动画

博客园美化手记——CSS javascript html

写在前面：有时候可能改了一些代码以后并没有及时更新到此处，因此如果你发现我的实际博客园效果与代码有出入，你可以先试着在源代码里找找看，或者直接私信我获取最新代码。

 

论如何改变自己的博客园，变得好不好看我就不敢保证了。。。

 

我假设你是一个完全不懂网页相关的code小白。

①拥有自己的CSS代码

　　我自己是完全禁用掉了模板CSS（后期自己看情况禁不禁吧）。

　　然后会发现，blog干净得很，一点样式都没有。

　　对于我们这种小白来说，从头到尾自己写一份完整的CSS代码是不现实的，这时候我们需要一份代码模板，拿模板来改就比较容易了。

　　网上会有一些人把自己的CSS代码公开出来，当然实际上你浏览别人的blog的时候，（对于Chrome浏览器）轻按F12，你可以在style那个小栏里找到该网页的CSS代码链接（其他浏览器我就不知道了），然后就可以拿来试试水了。

　　窝的CSS代码：

 

#site_nav_under {
    display: none;
}
.c_ad_block, .ad_text_commentbox {
    display: none;
    margin: 0;
    padding: 0;
}
#ad_under_google {
    height: 0;
    overflow: hidden;
}
#ad_under_google a {
    display: none;
}


@charset "utf-8";
/* CSS Document */

/**************************************************
第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
如果不符合你皮肤的要求，你可以在后面通过更好的优先级覆盖着这些样式，但是
你不能删除这些样式。
**************************************************/
#EntryTag {
    margin-top: 20px;
    font-size: 9pt;
    color: gray;
}
.topicListFooter {
    text-align: right;
    margin-right: 10px;
    margin-top: 10px;
}
#divRefreshComments{
    text-align: right; 
    margin-right: 10px;
    margin-bottom: 5px;
    font-size: 9pt;
}
/*****第一部分结束*******************************/

/**************************************************
第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
模板所有页面的变化。因为它们是全局的。
**************************************************/
* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    background:url() no-repeat fixed;
    background-size:cover;
    color:#000;
    font-family: "微软雅黑","verdana","ms song","宋体","Arial", "Helvetica", "sans-serif";
    font-size: 15px;
    min-height: 101%;
    width:75em;
    margin-left:auto;
    margin-right:auto;
    z-index:0;
}
#Uleft, #Uright,#Dleft, #Dright{
    /* Firefox 4 */
    -moz-transition-property:top; 
    -moz-transition-duration:1s;

    /* Safari and Chrome */
    -webkit-transition-property:top; 
    -webkit-transition-duration:1s;

    /* Opera */
    -o-transition-property:top;
    -o-transition-duration:1s;
    position: fixed;
    width: 80px;
    height: 80px;
    line-height: 500px;
    text-align: center;
    z-index:1;
}
#Uleft{
    width: 80px;
    height: 80px;
    top:-60px;
    left: 50px;
}
#Uright{
    width: 110px;
    height: 110px;
    top: -75px;
    right: 50px;
}
#Dleft{
    bottom:10px;
    left: 10px;
    width: 200px;
    height: 200px;
}
#Dright{
    bottom:-50px;
    right: 0px;
    width: 200px;
    height: 250px;
}

#MagicArray{
    /* Firefox 4 */
    -moz-transition-property:width height bottom right; 
    -moz-transition-duration:0.5s;

    /* Safari and Chrome */
    -webkit-transition-property:width height bottom right; 
    -webkit-transition-duration:0.5s;

    /* Opera */
    -o-transition-property:width height bottom right;
    -o-transition-duration:0.5s;

    position: fixed;
    bottom:107px;
    right: 108px;
    width: 0px;
    height: 0px;
    text-align: center;
    z-index:2;
}
#Tab1{
    -moz-transition-property:fontSize width height; 
    -moz-transition-delay:0.4s;

    -webkit-transition-property:fontSize width height; 
    -webkit-transition-delay:0.4s;

    -o-transition-property:fontSize width height;
    -o-transition-delay:0.4s;

    color:#8B0A50;
    position: fixed;
    font-size: 0px;
    text-align: center;
    z-index:3;
    font-weight:500;
    text-shadow:
        -1px 0 #7A67EE,
        0 1px #7A67EE,
        1px 0 #7A67EE,
        0 -1px #7A67EE;
}

::selection{background:#698B22;color:#FFF;}
::-moz-selection{background#698B22;color:#FFF;}
body{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
input{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
wait{cursor:url('//fq.wc.lt//up/1499563659.cur'),auto;}
input{outline:medium;}
/*
//fq.wc.lt//up/1499566113.cur
//fq.wc.lt//up/1499565578.cur
//fq.wc.lt//up/1499564884.cur
*/
/*鼠标*/

table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
ul {
    word-break: break-all;
}
li {
    list-style: none;
}
h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}
a:link {
    color:black;
    text-decoration:none;
}
a:visited {
    color:#111;
    text-decoration: none;
}
a:hover {
    color: #7B68EE;
    -moz-border-radius: 9px;
    -khtml-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    transition: all 0.4s linear 0s;
}
a:active {
    color: black;
    text-decoration: none;
}
.clear {
    clear: both;
}
/*****第二部分结束*******************************/

/**************************************************
第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
**************************************************/
/*****home和头部开始**************************/
#home {
    margin: 0 auto;
    width:95%;
    min-width: 60em;
}
#header {
    padding-bottom: 0.4em;
    margin-top: 0.8em;
}
#blogTitle {
    height: 7em;
    clear: both;
    border:1px solid #000;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 12px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    text-shadow:1px 1px 1px #e9f3e8
}
#blogTitle h1 {
    font-size: 300%;
    font-weight: bold;
    margin-left: 1em;
    margin-top: 0.4em;
    width: 50%;
    float: left;
}
#blogTitle h2 {
    margin-left: 6em;
    line-height: 1.5em;
    width: 50%;
    float: left;
    text-shadow:-1px 0 #ddd,
                0 1px #ddd,
                1px 0 #ddd,
                0 -1px #ddd;
}
#blogLogo {
    float: right;
}
#navigator {
/*    background-color: black;
    height: 30px;
    clear: both;*/

    margin-top:0.3em;
    height: 2em;
    clear:both;
    border:1px solid #999;
    -moz-border-radius: 11px;
    -khtml-border-radius: 11px;
    -webkit-border-radius: 11px;
    border-radius: 11px;
    -webkit-box-shadow:5px 2px 6px #000;-moz-box-shadow:5px 2px 6px #000;padding:4px 10px;
    background:#FFF;
    opacity: 0.60;
}
#navList {
    min-height: 1.5em;
    float: left;
}
#navList li {
    float: left;
}
#navList a {
    display: block;
    padding-left:0.5em;
    padding-right:0.5em;
    line-height:2em;
    float: left;
    text-align: center;
    border-right: 1px solid #999;
}
#navList a:link, #navList a:visited, #navList a:active {
/*    color: #ccc;*/
}
#navList a:hover {
    color: #7B68EE;
    padding-left:0.8em;
    padding-right:0.8em;
}

.blogStats {
    float: right;
    font-size:0.8em;
    color: #000;
    margin-top: 0.9em;
    margin-right: 0.2em;
    text-align: right;
}
/*****home和头部结束**************************/

/*****主页文章列表开始**************************/
#main{
    width: 100%;
    min-width: 70em;
    text-align: left;
    background:#FFF5EE;
    opacity: 0.90;
}
#mainContent .forFlow{
    margin-left: 13em;
    float: none; 
    width: auto;
}

#mainContent {
    min-height: 18em;
    padding: 0px 0px 10px 0;
    *padding-top:10px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    
    float: right;
    margin-left: -26em;
    width: 100%
}
.day {
    min-height: 10px;
    _height: 10px;
    margin-bottom: 20px;
    padding-bottom: 5px;
}
.dayTitle {
    width: 100%;
    color: #666;

    font-weight: bold;
    line-height: 1.5em;
    font-size: 90%;
    margin-top: 3px;
    margin-bottom: 10px;
    clear:both;
    border-bottom: 2px solid #e9f3e8;
    text-align:center;

}
.postTitle {
    font-size: 150%;
    font-weight: bold;
    /*border-bottom: 1px solid #9DAAF4;*/
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    text-shadow:-3px 3px 3px #999
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #000;
    transition: all 0.4s linear 0s;
}
.postTitle a:hover {
    margin-left: 10px;
    color: #7B68EE;
    text-decoration: none;
    text-shadow:-13px 3px 3px #999
}
.postCon {
    float: right;
    line-height: 1.5em;
    width: 100%;
    clear:both;
    padding: 10px 0;
}
.postDesc {
    float: right;
    width: 100%;
    clear:both;
    text-align: right;
    padding-right: 5px;
    color: #666;
    margin-top: 5px;
}
.postDesc a:link, .postDesc a:visited, .postDesc a:active {
    color: #666;
    padding-right: 10px;
}
.postDesc a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.postSeparator {
    clear: both;
    height: 1px;
    border-top: 1px dotted #666;
    width: 100%;
    clear:both;
    float: right;
    margin: 0 auto 15px auto;
}
/*.diggit{
    text-align: center;
    width:50px;
    height:40px;
    background:url(//fq.wc.lt//up/1503755899.png);
    background-size:100% 100%;
}*/
.buryit{
    font-size:0px;
    width:0;
    height:0;
}
.burynum{
    font-size:0px;
    width:0;
    height:0;
}
/*****主页文章列表结束**************************/

/*****侧边栏开始********************************/
#sideBar {
    width: 14em;
    min-height: 14em;
    padding: 0px 0px 0px 5px;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size:0.7em;
    opacity:0.85;
}
.counter{
}
.notice{
    font-size:xx-small;
}
.btn_my_zzk{
  display: inline-block;
  font-size: 24px;
  cursor: pointer;
  text-align: center;   
  text-decoration: none;
  outline: none;
  color: #fff;
  background-color: #a55b97;
  border: none;
  border-radius: 15px;
  box-shadow: 0 4px #999;
}
.newsItem .catListTitle {
    display: none;
}
.newsItem {
    padding: 15px 0 5px 0px;
    font-weight:bold;
    font-size:14px;
    margin-bottom: 8px;
}
/**日历控件样式开始**/
#calendar {
    width: 14em;
}
#calendar .Cal {
    width: 100%;
    line-height: 1.5em;
}
.Cal {/**日历容器table**/
    border: none;
    color: #111;
}
#calendar table a:link, #calendar table a:visited, #calendar table a:active {
    font-weight: bold;
}
#calendar table a:hover {
    color: #7B68EE;
    text-decoration: none;
    background-color: #7B68EE;
}
.CalTodayDay{/**今天日期样式**/
    color: #EE82EE;
}
#calendar .CalNextPrev a:link,#calendar  .CalNextPrev a:visited, #calendar .CalNextPrev a:active {/**上个月、下个月箭头样式**/
    font-weight: bold;
    background-color: #7B68EE;
}
.CalDayHeader{
    border-bottom:1px solid #ccc;    
}
.CalTitle{/**日历年月头部样式**/
    width:100%;
    background:#FFF;
    color:black;
    border-bottom:1px solid #666;    
}
/**日历控件样式结束**/
.catListTitle {
    font-weight: bolder;
    font-family:STCaiyun;
    color:     #B03060;
    line-height: 2em;
    font-size: 150%;
    margin-top: 50px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e9f3e8;
    text-align: center;
}
.catListComment {
    line-height: 1.5em;
}
.divRecentComment {
    color: #666;
    margin-bottom:1em;
}
.c_b_p_link_desc{
    color: #666;
    font-size: 30%;
    margin-bottom:1.5em;
}
#sideBarMain ul {
    line-height: 1.5em;
}
.catListEssay{
    font-weight: bolder;
}
.catListTag{
    font-weight: bolder;
}
.catList{
    font-weight: bolder;
}
.catListFeedback{
    font-weight: bolder;
}
.catListView{
    font-weight: bolder;
}
.recent_comment_title{
    font-weight: bolder;
}
.recent_comment_body{
    font-size: 30%;
}
.recent_comment_author{
    color:#666;
    font-size: 30%;
}
/*****侧边栏结束********************************/


/****查看文章页面开始*************************/
#topics {
    width: 100%;
    min-height: 18em;
    padding: 0px 0px 10px 0;
    float: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
}
#topics .postTitle {
    font-size: 200%;
    font-weight: bold;
    border-bottom: 1px solid #999;
    float: left;
    line-height: 1.5em;
    width: 100%;
    text-align: center;
}
.postBody {
    padding: 5px 2px 5px 5px;
    line-height: 1.5em;
    color: #000;
    border-bottom: 1px solid #8686FF;
}
#EntryTag {
    color: #000;
}
#EntryTag a {
    margin-left: 5px;
}
#EntryTag a:link, #EntryTag a:visited, #EntryTag a:active {
    color: #000;
}
#EntryTag a:hover {
    color: #7B68EE;
}
#topics .postDesc {
    float: right;
    width: 100%;
    font-size:0.9em;
    text-align: right;
    padding-right: 5px;
    color: #000;
    margin-top: 5px;
}
.feedback_area_title {
    font-weight: bold;
    margin-top: 20px;
    border-bottom: 1px solid #8686FF;
    margin-bottom: 10px;
    padding-left: 8px;
}
.louzhu {
    background:transparent url('/images/icoLouZhu.gif') no-repeat scroll right top;
    padding-right:16px;
}
.layer{
    font-family:STFangsong;
    font-size:15px;
    padding-left: 8px;
}
.feedbackListSubtitle {
    margin-left: 10px;
    color: #666;
    font-size:0.9em;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
    font-weight:bold;
    color: #666;
    font-weight: normal;
}
.feedbackListSubtitle a:hover {
    color: #7B68EE;
    text-decoration: none;
}
.feedbackManage {
    width: 160px;
    text-align: right;
    float: right;
}
.feedbackCon {
    font-weight:bold;
    border-bottom: 1px solid #ccc;
    padding: 15px 18px 20px 50px;
    min-height: 35px;
    _height: 35px;
    margin-bottom: 1em;
    line-height: 1.5em;
    width:80%;
}
#divRefreshComments {
    text-align: right;
    margin-bottom: 10px;
}
.commenttb {
    width: 320px;
}
.cnblogs_code{
}
.comment_actions{
    margin-right:30px;
    font-size:16px;
    font-family:STFangsong;
}
.comment_digg{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
.comment_bury{
    font-weight:bold;
    margin-right:10px;
    font-size:15px;
    font-family:STXinwei;
}
/****查看文章页面结束************************

/****列表页面开始******************************/
.entrylistTitle,.PostListTitle,.thumbTitle{/**几个分类列表的标题样式**/
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #8686FF;
    text-align: right;
    padding-bottom: 3px;
    padding-right: 10px;
}

.entrylistDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
.entrylistItem {
    min-height: 20px;
    _height: 20px;
    margin-bottom: 30px;
    padding-bottom: 5px;
    width: 100%;
}
.entrylistPosttitle {
    font-size: 110%;
    font-weight: bold;
    border-bottom: 1px solid #666;
    line-height: 1.5em;
    width: 100%;
    padding-left: 5px;
}
.entrylistPosttitle a:hover {
    text-decoration: none;
}
.entrylistPostSummary {
    margin-top: 5px;
    padding-left: 5px;
    margin-bottom: 5px;
}
.entrylistItemPostDesc {
    padding-left: 50px;
    text-align: right;
    color: #666;
}
.entrylistItemPostDesc a:link, .entrylistItemPostDesc a:visited, .entrylistItemPostDesc a:active {
    color: #666;
}
.entrylistItemPostDesc a:hover {
    color: #7B68EE;
}
.entrylist .postSeparator {
    clear: both;
    width: 100%;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
    height: 0;
    border: none;
}

.pager {
    text-align: right;
    margin-right: 10px;
}
.PostList {
    border-bottom: 1px solid #ccc;
    clear: both;
    min-height: 1.5em;
    _height: 1.5em;
    padding-top: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 5px;
}
.postTitl2 {
    float: left;
    font-size:0.9em;
    color: #666;
}
.postDesc2 {
    color: #666;
    float: right;
    margin-right: ;
    font-size:0.9em;
}
.postText2 {
    clear: both;
    
}
.pfl_feedback_area_title {
    text-align: right;
    line-height: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid #666;
    margin-bottom: 10px;
}
.pfl_feedbackItem {
    border-bottom: 1px solid black;
    margin-bottom: 20px;
}
.pfl_feedbacksubtitle {
    width: 100%;
    border-bottom: 1px dotted #666;
    height: 1.5em;
}
.pfl_feedbackname {
    float: left;
}
.pfl_feedbackManage {
    float: right;
}
.pfl_feedbackCon {
    color: black;
    padding-top: 5px;
    padding-bottom: 5px;
}
.pfl_feedbackAnswer {
    color: #F40;
    text-indent: 2em;
}
.tdSentMessage {
    text-align: right;
}
.errorMessage {
    width: 300px;
    float: left;
}

/****列表页面结束******************************/*/
/****相册页面开始******************************/
.divPhoto {
    border: 1px solid #ccc;
    padding: 2px;
    margin-right: 10px;
}

.thumbDescription {
    color: #666;
    text-align: right;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 10px;
    margin-bottom: 10px;
}
/****相册页面结束******************************/


/*****留言页面开始*****************************/
#footer {
    text-align: center;
    min-height: 15px;
    _height: 15px;
    border-top: 1px solid black;
    margin-top: 10px;
    padding-top: 10px;
    margin-bottom: 10px;
}
/*留言查看页面的个人信息*/
.personInfo {
    margin-bottom: 20px;
}
/*留言分页区域*/
.pages {
    text-align: right;
}
/*****留言页面结束*****************************/
/*****第三部分结束*******************************/

/**************************************************
第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
的".postBody"明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
并不能保证所有的文章都适合。
**************************************************/
/*文章内部常用标签格式*/
.postBody {
    line-height: 1.5em;
}
.postBody p,.postCon  p{
    text-indent: 2em;
    margin: 0 auto 1em auto;
}
.postBody h2{
    font-size: 150%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h3 {
    font-size: 120%;
    margin: 15px auto 2px auto;
    font-weight:bold;
}
.postBody h4{
    font-size:110%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody h5{
    font-size:100%;
    margin:15px auto 2px auto;
    font-weight:bold;
    color:#333;
}

.postBody a:link,.postBody a:visited,.postBody a:active{
    text-decoration:none;
}
.postCon a:link,.postCon a:visited,.postCon a:active{
    text-decoration:none;
}
.postBody ul,.postCon ul{
    margin-left:2em;    
}

.postBody li,.postCon li{
    list-style-type:disc;
    margin-bottom:1em;
}

.postBody blockquote{
    background:url('/images/comment.gif') no-repeat 25px 0px;
    padding:10px 60px 5px 60px;
    min-height:35px;
    _height:35px;
    line-height:1.6em;
    color:#333;
}
/*****第四部分结束*******************************/
View Code

 

　　当初我也是拿别人代码当模板来改的，不过现在可能有点面目全非了。

　　那么现在，我们可以把这份别人的模板改成自己的风格，基本上CSS代码里参数的命名都是按元素的英文命名的，挺好认的，或者你可以把这个参数改改，看看哪里发生了变化就知道这个参数在说啥了。当你想定向寻找一个元素在CSS中各项参数的位置时，你可以寻找一下这个元素在html代码里面的位置（在Chrome浏览器中可以借助Ctrl+Shift+C来寻找元素），看一下这个元素的id和class的名字是啥，在CSS代码里找找就行了。

　　界面的颜色除了有black、white这类设定好的颜色之外，你可以找一个RGB颜色对照表，想要啥就丢啥。

　　遇到有啥不会调的参数，基本搜一下“CSS+参数名字”就有详细介绍，毕竟这东西网上教程很多。

　　比方说延迟变换可以用transition-property来做，而文字阴影效果是text-shadow，这些都是我自己在做的时候折腾了好一会的。

　　Chrome（我不知道其他浏览器能不能）有个好处是你修改了个参数，他会立刻应用变换，这样就可以调到舒心再贴进自定义CSS代码里。

　　还有就是你最好把CSS代码备份一下，不然要是误删了就GG，博主亲身体验T_T。

　　这期间你可能需要一些好看的图片什么的，我自己资源是P站找的（Pixiv），一些比较普通的就百度图片吧，然后开个画图，开个Photoshop自己改改就能用了，图床直接用博客园就行了（开个不发布的随笔就能存图了，图片上右键可以获得图片链接地址）。

　　这时候自己的blog已经比较好看了是不是啊？

②修改鼠标图案

　　把这个放在第二是我按自己的操作顺序来的。

　　没啥特别要说的，就是如果你需要存储的是cur之类的放不进图床的文件可以找个直链网站，这里推荐小白的文件床（http://fq.wc.lt/），不知道是哪位大神弄的，太良心了。

　　upd：小白文件床貌似不支持cur文件了，只能另找了

body{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
A{cursor:url('http://fq.wc.lt//up/1499563659.cur'),auto;}
View Code

③JS什么的

　　折腾了一段时间以后应该对html也有了一定的了解，首先在博客园管理的设置页中把JS代码权限申请了，批准挺快的，然后就可以为所欲为了（雾）……

　　首先你可以在侧边栏加点计数器，加点flash动画什么的，这些一般是找别人做好的，链过来或者抄过来就行。

　　要搞js的话建议在网上找个教程看看，看它个把小时就基本能拿来用用了（其实跟c++挺像的，应该说java跟c++比较像吧），以后遇到不会的回去查查就行。

　　我拿js做的大概就是加了一些小挂件，比方说左上角的西瓜是获取main元素之后把opacity（透明度）调到0就行，结合一下onmouseover、onmouseout什么的就能做出浮动效果，还是很赞的。

　　尝试着做个推荐按钮，一直做不成，估计是被过滤了。发邮件去问博客园那边也是这是禁止的。

　　目录我是改自sakuraph的，感谢dalao。

以后还有什么再补吧。

我的侧边栏：

<!DOCTYPE html>
<html>
<body>

<div class="counter" align="center"><a href="http://www.amazingcounters.com/"><img border="0" src="http://cc.amazingcounters.com/counter.php?i=3213924&amp;c=9642085" alt="AmazingCounters.com"></a></div>

<div class="head_img"><img width="120" height="120" alt="我的头像" src="http:\\pic.cnblogs.com/avatar/841250/20170528221640.png" class="img_avatar"><div>

<div class="notice">
做题做得心累的时候<br>
就看看背景吧<br>
想看背景的时候<br>
请点击左上角西瓜一枚<br>
右上角月亮有彩蛋
</div>


</body>
</html>
View Code

我的页首：

<!DOCTYPE html>
<html>
<body>

<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>

<input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">

<input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">

<input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">

<input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">

<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/Enceladus/" style="right:150px;bottom:130px;">首页</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/swm_sxt" style="right:10px;bottom:130px;">私信博主</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>

<script>
function GetRandomNum(Min,Max){
    var Range=Max-Min;
    var Rand=Math.random();
    return(Min+Math.round(Rand * Range));
}
function ShowTab(){
    x=document.getElementById("MagicArray");
    if (x.style.width=="200px"){
        x.style.width="0px";
        x.style.height="0px";
        x.style.bottom="100px";
        x.style.right="100px";
        x.style.transform="rotate(0deg)";
    }else{
        x.style.width="200px";
        x.style.height="200px";
        x.style.bottom="0px";
        x.style.right="0px";
        x.style.transform="rotate(180deg)";
    }
    
    y=document.getElementsByName("Tab");
    for (var i=0;i<y.length;i++){
        x=y[i];
        if (x.style.fontSize=="15px"){
            x.style.fontSize="0px";
            x.style.transitionDelay="0s";
        }else{
            x.style.fontSize="15px";
            x.style.transitionDelay="0.8s";
        }
    }
}
function ShowPicture(){
    x=document.getElementById("main");
    x.style.opacity=0.9-x.style.opacity;
}
function ChangePicture(){
    x=document.body;
    y=GetRandomNum(0,14);
    if (y==0){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==1){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==2){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==3){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==4){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==5){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==6){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==7){
        x.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==8){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==9){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==10){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==11){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==12){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==13){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }else if (y==14){
        x.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
        x.style.backgroundSize="cover";
    }
}

</script>


</body>
</html>
View Code

我的页尾：

<div class="fixedIndexs" style="position: fixed;opacity:0.5;bottom:300px;display: none"></div>
<script language="javascript" type="text/javascript">
var fixedIndexs=$('.fixedIndexs');
var hs = $('#cnblogs_post_body h2');
function openorclose(a) {
    $("#indexs").slideToggle("fast");
    var text=$(a).text();
    if(text=='[-]'){
        $(a).text("[+]");
        return;
    }
    $(a).text("[-]");
}
function createIndexs(){
    var indexs_container=$('<div style="border:solid 1px #ccc; background:#CD6889;width:200px;padding:4px 10px;"></div>');
    var indexs_controller=$('<p style="text-align:right;margin:10;"><span style="float:left;">目录<a onclick="javascript:openorclose(this);" style="cursor: pointer">[-]</a></span><a href="#top" style="text-align: right;color: #444">返回顶部</a></p>');
    var indexs=$('<ol id="indexs" style="margin-left: 14px; padding-left: 14px; line-height: 160%; display: block;"></ol>');
    indexs_container.append(indexs_controller).append(indexs);
    $.each(hs,function(i,h){
        $(h).before('<a name="index_'+i+'"></a>');
        indexs.append('<li style="list-style:decimal"><a href="#index_'+i+'" id="active_'+i+'">'+$(h).text()+'</a></li>');
    });
    if(hs.length!=0){
        fixedIndexs.append(indexs_container);
        //get home div right offset
        fixedIndexs.css('right',30+'px');
    }
}
createIndexs();
fixedIndexs.hide();
</script>
View Code

 

 

upd at 2017/9/9:

④用Canvas和requestAnimFrame做动画特效

　　指的是背景里面跑来跑去的星星什么的……

　　这东西也不难学的，就是requestAnimFrame会自动帮你定时调用一段函数，然后你在函数里面用canvas写写绘图就行了，写得再丑最后效果好像都是挺平滑的，好像是浏览器会自动优化。

　　我大概就是让每一帧画面都有一定概率生成一个星星（图什么的自己拿PS画画就行了），然后给一个下落速度和角度什么的。本来用了一些弹性碰撞公式来做碰撞的，但最后效果并不好，索性忽略质量差别的问题，碰撞了就交换速度和角度。

　　至于侧边栏那个就也是这样简单地写一个物理模型而已。

　　学习使用requestAnimFrame的时候感觉最大的难点就是网上的代码大多加了很多效果，而导致代码很长，研读起来找不到自己真正想要的部分，其实只需要像下面这么写。　　

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/60);};
    function work(timestamp){
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
</script>
View Code

　　这时work函数你就想干啥干啥了，超舒服的。感觉学了这么多年OI终于在此时派上用场。

　　下面是加了新特效后，我的页首HTML代码：

<!DOCTYPE html>
<html>
<body>


<style>
#Canvas{
    position:fixed;
    top:0px;
    left:0px;
}
</style>

<canvas id="Canvas"></canvas>


<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>

<input type="image" id="Uleft" src="http://fq.wc.lt//up/1503755860.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503755899.png' " onmouseout="this.style.top='-60px'; this.src='http://fq.wc.lt//up/1503755860.png' " onclick="ShowPicture()">

<input type="image" id="Uright" src="http://fq.wc.lt//up/1503754720.png" onmouseover="this.style.top='10px'; this.src='http://fq.wc.lt//up/1503754624.png' " onmouseout="this.style.top='-55px'; this.src='http://fq.wc.lt//up/1503754720.png' " onclick="ChangePicture()" style="top: -55px;">

<input type="image" id="Dright" src="http://fq.wc.lt//up/1504337868.png" onclick="ShowTab()">

<input type="image" id="MagicArray" src="http://fq.wc.lt//up/1504338509.png" onclick="ShowTab()">

<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/Enceladus/" style="right:150px;bottom:130px;">首页</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/swm_sxt" style="right:10px;bottom:130px;">私信博主</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
<a name="Tab" id="Tab1" style="right:85px;bottom:88px;" onclick="control()">动画</a>

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/10);};
    var W=document.body.scrollWidth,H=document.body.scrollHeight;
    var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
    var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
    var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
    var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
    ca.width=W;ca.height=H;
    img1.src="http://fq.wc.lt//up/1504690030.png";
    img2.src="http://fq.wc.lt//up/1504690047.png";
    img3.src="http://fq.wc.lt//up/1504690062.png";
    img4.src="http://fq.wc.lt//up/1504690077.png";
    
    function RandomNum(Min,Max){
        var Range=Max-Min;
        var Rand=Math.random();
        return(Min+Math.round(Rand * Range));
    }
    function RandomReal(Min,Max){
        return Min+(Max-Min)*Math.random();
    }
    function abs(W){return W<=0?-W:W;}
    function drawtail(px,py,an){
        an=Math.atan(an);
        for (var i=0;i<10;i++){
            var X,Y;
            Y=Math.sqrt(RandomReal(0,lline*lline));
            X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
            Y=lline-Y;
            X+=10;
            el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
        }
    }
    function drawstar(px,py,ti){
        if (ti==1) el.drawImage(img1,px,py,20,20);else
        if (ti==2) el.drawImage(img2,px,py,20,20);else
        if (ti==3) el.drawImage(img3,px,py,20,20);else
        if (ti==4) el.drawImage(img4,px,py,20,20);
    }
    function drawline(sx,sy,px,py){
        el.beginPath();
        el.moveTo(sx,sy);
        el.lineTo(px,py);
        el.stroke();
        el.closePath();
    }
    function dis(sx,sy,px,py){
        return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
    }
    function work(timestamp){
        if (RandomNum(0,5)==0){
            x.push(RandomNum(0,W));
            y.push(RandomNum(0,H));
            t.push(0);
            TT.push(RandomNum(3,10));
            speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
            angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
            for (;;){
                if (Math.random()<=0.7) y[num]=0;else{
                    y[num]%=200;
                    if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
                }
                var i;
                for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
                if (i==num) break;
                x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
            }
            num++;
        }
        el.clearRect(0,0,W,H);
        el.fillStyle="#7B68EE";
        var tmp;
        for (var i=0;i<num;i++)
        for (var j=i+1;j<num;j++)
        if (dis(x[i],y[i],x[j],y[j])<20){
            tmp=speed[i];
            speed[i]=speed[j];
            speed[j]=tmp;
            
            tmp=angle[i];
            angle[i]=angle[j];
            angle[j]=tmp;
        }
        for (var i=0;i<num;i++){
            //el.fillRect(x[i],y[i],10,10);
            drawtail(x[i],y[i],angle[i]);
            drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
            y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
            t[i]++;
            if (y[i]>=H||x[i]<0||x[i]>=W){
                num--;
                x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
                x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
                i--;
            }
        }
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
    var sta=1;
    function control(){
        if (sta==1){
            cancelAnimationFrame(timer);
            ca.style.opacity="0";
            sta=0;
        }else{
            timer=requestAnimationFrame(work);
            ca.style.opacity="1";
            sta=1;
        }
    }
    
    
    function ShowTab(){
        dx=document.getElementById("MagicArray");
        if (dx.style.width=="200px"){
            dx.style.width="0px";
            dx.style.height="0px";
            dx.style.bottom="100px";
            dx.style.right="100px";
            dx.style.transform="rotate(0deg)";
        }else{
            dx.style.width="200px";
            dx.style.height="200px";
            dx.style.bottom="0px";
            dx.style.right="0px";
            dx.style.transform="rotate(180deg)";
        }
    
        dy=document.getElementsByName("Tab");
        for (var i=0;i<y.length;i++){
            dx=dy[i];
            if (dx.style.fontSize=="15px"){
                dx.style.fontSize="0px";
                dx.style.transitionDelay="0s";
            }else{
                dx.style.fontSize="15px";
                dx.style.transitionDelay="0.8s";
            }
        }
    }
    function ShowPicture(){
        dx=document.getElementById("main");
        if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
    }
    function ChangePicture(){
        dx=document.body;
        dy=RandomNum(0,14);
        if (dy==0){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202329872-1998585524.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==1){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201704/841250-20170409090749785-323228483.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==2){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174023882-274298407.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==3){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174051757-1191896358.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==4){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201705/841250-20170505174129773-2085975677.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==5){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170604142640446-727563678.png) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==6){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202111434-1989193791.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==7){
            dx.style.background="url(http://images2015.cnblogs.com/blog/841250/201706/841250-20170611202419872-817092701.png) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==8){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902151832593-2122003193.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==9){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152019140-1762402367.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==10){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152127562-2119838736.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==11){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152205765-1481629031.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==12){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152237077-878421384.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==13){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152325140-1207335922.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==14){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170902152342718-1503887682.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }
    }
    ChangePicture();
</script>


</body>
</html>
View Code

　　还有物理模型部分代码：

<canvas id="Canvas2" onmousedown="cg()"></canvas>
<button type="button" onclick="ADDnumlimit()">Add ball!</button><br>
<a onclick="_control()">一个完全不成熟的物理模型</a>
<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/60);};
    var cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame;
    var _W=150,_H=150;
    var _ca=document.getElementById("Canvas2"),_el=_ca.getContext("2d");
    var _num=0,G=0.01,Wi=0.01,Ff=0.99,R=5,NUMlimit=1;
    var _x=new Array(),_y=new Array(),speedx=new Array(),speedy=new Array(),m=new Array(),_timer;
    _ca.width=_W;_ca.height=_H;
    /*_ca.addEventListener("mousedown",function(event){
    },false);*/
    function cg(){
        for (var i=0;i<num;i++)
        speedx[i]+=RandomReal(-5,5),speedy[i]+=RandomReal(-5,5);
    }
    var sta=0;
    function ADDnumlimit(){if(sta==1&&NUMlimit<20)NUMlimit++;}
    function max(A,B){return A>B?A:B;}
    function ADDball(){
        _x.push(RandomNum(0,_W-R*2));
        _y.push(0);
        m.push(RandomReal(3,100));
        speedx.push(RandomReal(0,4));speedy.push(RandomReal(0,4));
        for (;;){
            var i;
            for (i=0;i<_num;i++) if (dis(_x[i],_y[i],_x[_num],_y[_num])<R*2) break;
            if (i==_num) break;
            _x[_num]=RandomNum(0,_W-R*2);
        }
        _num++;
    }
    function _work(timestamp){
        if (_num<NUMlimit) ADDball();
        _el.clearRect(0,0,_W,_H);
        for (var i=0;i<_num;i++)
        for (var j=i+1;j<_num;j++)
        if ((SS=dis(_x[i]+speedx[i],_y[i]+speedy[i],_x[j]+speedx[j],_y[j]+speedy[j]))<=R*2){
            var dx=_x[i]-_x[j],dy=_y[i]-_y[j],vx,vy;
            var F=2*(dx*(speedx[j]-speedx[i])+dy*(speedy[j]-speedy[i]))/(dx*dx+dy*dy)/(1/m[i]+1/m[j]);
            //F*=(R*2-SS)*(R*2-SS)*(R*2-SS)*0.000005+1;
            var E=m[i]*(speedx[i]*speedx[i]+speedy[i]*speedy[i])+m[j]*(speedx[j]*speedx[j]+speedy[j]*speedy[j]);
            var Wx=m[i]*speedx[i]+m[j]*speedx[j];
            var Wy=m[i]*speedy[i]+m[j]*speedy[j];
            speedx[i]+=F*dx/m[i];
            speedy[i]+=F*dy/m[i];
            speedx[j]-=F*dx/m[j];
            speedy[j]-=F*dy/m[j];
        }
        for (var i=0;i<_num;i++){
            speedx[i]*=Ff;speedy[i]*=Ff;
            _x[i]+=speedx[i];
            _y[i]+=speedy[i];
            speedy[i]+=G;
            speedx[i]+=Wi/m[i];
            if (_y[i]+speedy[i]+2*R>=_H&&speedy[i]>=0) speedy[i]*=-Ff,speedy[i]-=0;
            if (_y[i]+speedy[i]<0&&speedy[i]<=0) speedy[i]*=-Ff,speedy[i]+=0;
            if (_x[i]+speedx[i]+2*R>=_W&&speedx[i]>=0) speedx[i]*=-Ff,speedx[i]-=0;
            if (_x[i]+speedx[i]<0&&speedx[i]<=0) speedx[i]*=-Ff,speedx[i]+=0;
        }
        _el.fillStyle="black";
        for (var i=0;i<_num;i++){
            _el.beginPath();
            _el.arc(_x[i]+R,_y[i]+R,R,0,Math.PI*2);
            _el.closePath();
            _el.fill();
        }
        _timer=requestAnimationFrame(_work);
    }
    function _control(){
        if (sta==1){
            cancelAnimationFrame(_timer);
            sta=0;
        }else{
            _timer=requestAnimationFrame(_work);
            sta=1;
        }
    }
</script>
View Code

　　后来由于小白文件床已挂，现换上新的页首代码（拿博客园做图床）：

<!DOCTYPE html>
<html>
<body>


<style>
#Canvas{
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.3;
}
</style>

<canvas id="Canvas"></canvas>


<style>
#nav { width:150px; height: 400px; border: 1px solid #D4CD49; position:fixed;left:0;top:30% }
</style>

<input type="image" id="Uleft" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132102016-280648354.png" onmouseover="this.style.top='10px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132110485-340298713.png' " onmouseout="this.style.top='-60px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132102016-280648354.png' " onclick="ShowPicture()">

<input type="image" id="Uright" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png" onmouseover="this.style.top='10px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132044282-1070510381.png' " onmouseout="this.style.top='-55px'; this.src='http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132057500-1294518696.png' " onclick="ChangePicture()" style="top: -55px;">

<input type="image" id="Dright" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132721735-572062833.png" onclick="ShowTab()">

<input type="image" id="MagicArray" src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132726032-1459872254.png" onclick="ShowTab()">

<a name="Tab" id="Tab1" href="http://www.cnblogs.com/" style="right:78px;bottom:165px;">博客园</a>
<a name="Tab" id="Tab1" href="http://www.cnblogs.com/Enceladus/" style="right:150px;bottom:130px;">首页</a>
<a name="Tab" id="Tab1" href="https://msg.cnblogs.com/send/swm_sxt" style="right:10px;bottom:130px;">私信博主</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.show()" style="right:120px;bottom:50px;">显示目录</a>
<a name="Tab" id="Tab1" onclick="fixedIndexs.hide()" style="right:20px;bottom:50px;">隐藏目录</a>
<a name="Tab" id="Tab1" href="https://i.cnblogs.com/" style="right:85px;bottom:10px;">管理</a>
<a name="Tab" id="Tab1" style="right:85px;bottom:88px;" onclick="control()">动画</a>

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/10);};
    var W=document.body.scrollWidth,H=document.body.scrollHeight;
    var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
    var num=0,SpeedBasic=3,SpeedRand=0.8,angleBasic=0.5,timer,lline=20;
    var x=new Array(),y=new Array(),speed=new Array(),angle=new Array(),t=new Array(),TT=new Array();
    var img1=new Image(),img2=new Image(),img3=new Image(),img4=new Image();
    ca.width=W;ca.height=H;
    img1.src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132729688-38554350.png";
    img2.src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132733563-1765368712.png";
    img3.src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132739141-33127178.png";
    img4.src="http://images2017.cnblogs.com/blog/841250/201709/841250-20170914132745860-1067567351.png";
    
    function RandomNum(Min,Max){
        var Range=Max-Min;
        var Rand=Math.random();
        return(Min+Math.round(Rand * Range));
    }
    function RandomReal(Min,Max){
        return Min+(Max-Min)*Math.random();
    }
    function abs(W){return W<=0?-W:W;}
    function drawtail(px,py,an){
        an=Math.atan(an);
        for (var i=0;i<10;i++){
            var X,Y;
            Y=Math.sqrt(RandomReal(0,lline*lline));
            X=RandomReal(-Y*5/lline,Y*5/lline)+RandomReal(-Y*5/lline,Y*5/lline);
            Y=lline-Y;
            X+=10;
            el.fillRect(px+(X*Math.cos(an)-Y*Math.sin(an)),py-(X*Math.sin(an)+Y*Math.cos(an)),2,2);
        }
    }
    function drawstar(px,py,ti){
        if (ti==1) el.drawImage(img1,px,py,20,20);else
        if (ti==2) el.drawImage(img2,px,py,20,20);else
        if (ti==3) el.drawImage(img3,px,py,20,20);else
        if (ti==4) el.drawImage(img4,px,py,20,20);
    }
    function drawline(sx,sy,px,py){
        el.beginPath();
        el.moveTo(sx,sy);
        el.lineTo(px,py);
        el.stroke();
        el.closePath();
    }
    function dis(sx,sy,px,py){
        return Math.sqrt((px-sx)*(px-sx)+(py-sy)*(py-sy));
    }
    function work(timestamp){
        if (RandomNum(0,5)==0){
            x.push(RandomNum(0,W));
            y.push(RandomNum(0,H));
            t.push(0);
            TT.push(RandomNum(3,10));
            speed.push(SpeedBasic+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand)+RandomReal(-SpeedRand,SpeedRand));
            angle.push(RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic)+RandomReal(-angleBasic,angleBasic));
            for (;;){
                if (Math.random()<=0.7) y[num]=0;else{
                    y[num]%=200;
                    if (Math.random()<=0.5) x[num]=0,angle[num]=abs(angle[num]);else x[num]=W-1,angle[num]=-abs(angle[num]);
                }
                var i;
                for (i=0;i<num;i++) if (dis(x[i],y[i],x[num],y[num])<20) break;
                if (i==num) break;
                x[num]=RandomNum(0,W);y[num]=RandomNum(0,H);
            }
            num++;
        }
        el.clearRect(0,0,W,H);
        el.fillStyle="#7B68EE";
        var tmp;
        for (var i=0;i<num;i++)
        for (var j=i+1;j<num;j++)
        if (dis(x[i],y[i],x[j],y[j])<20){
            tmp=speed[i];
            speed[i]=speed[j];
            speed[j]=tmp;
            
            tmp=angle[i];
            angle[i]=angle[j];
            angle[j]=tmp;
        }
        for (var i=0;i<num;i++){
            //el.fillRect(x[i],y[i],10,10);
            drawtail(x[i],y[i],angle[i]);
            drawstar(x[i],y[i],(parseInt(t[i]/TT[i])%4)+1);
            y[i]+=speed[i];x[i]+=(speed[i]*angle[i]);
            t[i]++;
            if (y[i]>=H||x[i]<0||x[i]>=W){
                num--;
                x[i]=x[num];y[i]=y[num];speed[i]=speed[num];angle[i]=angle[num];t[i]=t[num];TT[i]=TT[num];
                x.pop();y.pop();speed.pop();angle.pop();t.pop();TT.pop();
                i--;
            }
        }
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
    var sta=1;
    function control(){
        if (sta==1){
            cancelAnimationFrame(timer);
            ca.style.opacity="0";
            sta=0;
        }else{
            timer=requestAnimationFrame(work);
            ca.style.opacity="1";
            sta=1;
        }
    }
    
    
    function ShowTab(){
        dx=document.getElementById("MagicArray");
        if (dx.style.width=="200px"){
            dx.style.width="0px";
            dx.style.height="0px";
            dx.style.bottom="100px";
            dx.style.right="100px";
            dx.style.transform="rotate(0deg)";
        }else{
            dx.style.width="200px";
            dx.style.height="200px";
            dx.style.bottom="0px";
            dx.style.right="0px";
            dx.style.transform="rotate(180deg)";
        }
    
        dy=document.getElementsByName("Tab");
        for (var i=0;i<dy.length;i++){
            dx=dy[i];
            if (dx.style.fontSize=="15px"){
                dx.style.fontSize="0px";
                dx.style.transitionDelay="0s";
            }else{
                dx.style.fontSize="15px";
                dx.style.transitionDelay="0.8s";
            }
        }
    }
    function ShowPicture(){
        dx=document.getElementById("main");
        if (dx.style.opacity=="0") dx.style.opacity="0.9";else dx.style.opacity="0";
    }
    function ChangePicture(){
        dx=document.body;
        dy=RandomNum(0,23);
        if (dy==0){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174010688-1830584338.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==1){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174017360-1796590868.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==2){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174022047-853249916.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==3){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174029141-1608852048.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==4){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174035141-1267899028.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==5){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174040782-379920149.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==6){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174047860-2089092748.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==7){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174055110-760691979.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==8){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174104078-1668647264.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==9){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174123610-1330753439.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==10){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174128907-905693440.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==11){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174204485-2036992334.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==12){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174211563-1891350663.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==13){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174217813-1439526251.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==14){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174223313-1473348115.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==15){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174229063-639587638.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==16){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174235313-1682256911.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==17){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174243094-1382641129.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==18){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174249782-1878167894.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==19){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174256703-514964046.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==20){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174302813-2113078791.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==21){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174309203-1666245225.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==22){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174314782-1332659971.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }else if (dy==23){
            dx.style.background="url(http://images2017.cnblogs.com/blog/841250/201709/841250-20170913174320828-1435950696.jpg) no-repeat fixed";
            dx.style.backgroundSize="cover";
        }
    }
    ChangePicture();
</script>


</body>
</html>
View Code

 　　由于种种原因（其实就是太丑）现在已经不自动打开了，可以在导航栏里的“动画"打开。

 

 

upd at 2017/9/13:

⑤未完成的3D渲染

想着拿canvas做3D渲染的，不用库函数那种。

然后发现由于自己几何水平太差，已经做不下去了。

反正这么作死的事应该没什么前途吧……先弃了，去搞搞PHP什么的再说。

当前的zz效果：

<a id="O_O">O_O</a>

<canvas id="Canvas"></canvas>

<script>
    window.requestAnimFrame=
        window.requestAnimationFrame||
        window.webkitRequestAnimationFrame||
        window.mozRequestAnimationFrame||
        window.oRequestAnimationFrame||
        window.msRequestAnimationFrame||
        function(callback){window.setTimeout(callback, 1000/10);};
    s=document.getElementById("O_O");
    s.innerHTML=">_<";
    var ca=document.getElementById("Canvas"),el=ca.getContext("2d");
    var R=100,C=100,H=30,Px=50,Py=50,Pz=1,Fx=0,Fy=1,Fz=0,
    Dx=0,Dy=0,Dz=-1,DDx=1,DDy=0,DDz=0;
    var color=new Array(H),pi=Math.atan(1.0)*4,timer,count=0,Dis=new Array(_W),Ro=0.01;
    var _W=750,_H=750;
    ca.width=_W;ca.height=_H;
    function dis(ax,ay,az,bx,by,bz){return Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)+(az-bz)*(az-bz));}
    function abs(x){return x<0?-x:x;}
    function rot(Rox,Roz){
        var a,b,c,u;
        a=Fx*Math.cos(Rox)-Fy*Math.sin(Rox);
        b=Fx*Math.sin(Rox)+Fy*Math.cos(Rox);
        Fx=a;Fy=b;
        
        a=DDx*Math.cos(Rox)-DDy*Math.sin(Rox);
        b=DDx*Math.sin(Rox)+DDy*Math.cos(Rox);
        DDx=a;DDy=b;
        
        /*
        u=Math.sqrt(Fx*Fx+Fy*Fy);
        a=Fz*Math.cos(Roz)-u*Math.sin(Roz);
        b=Fz*Math.sin(Roz)+u*Math.cos(Roz);
        Fz=a;Fx*=b/u;Fy*=b/u;
        
        u=Math.sqrt(Dx*Dx+Dy*Dy);
        a=Dz*Math.cos(Roz)-u*Math.sin(Roz);
        b=Dz*Math.sin(Roz)+u*Math.cos(Roz);
        Dz=a;Dx*=b/u;Dy*=b/u;
        */
        //alert(Fx+" "+Fy+" "+Fz);
    }
    document.onkeypress=function(ev){
        var oEvent=ev||event;
        var In=String.fromCharCode(oEvent.keyCode);
        
        //alert(In);
        
        if (In=="w"||In=="W"){
            Px++;
        }else if (In=="s"||In=="S"){
            Px--;
        }else if (In=="a"||In=="A"){
            Py--
        }else if (In=="d"||In=="D"){
            Py++;
        }else if (In==" "){
            Pz++;
        }else if (In=="z"||In=="Z"){
            Pz--;
        }else if (In=="1") rot(Ro,0);
        else if (In=="3") rot(-Ro,0);
        else if (In=="5") rot(0,Ro);
        else if (In=="2") rot(0,-Ro);
    };
    for (var i=0;i<H;i++){
        color[i]=new Array(R)
        for (var j=0;j<R;j++) color[i][j]=new Array(C);
    }
    for (var i=0;i<_W;i++) Dis[i]=new Array(_H);
    for (var i=0;i<H;i++)
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[i][j][k]="";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[0][j][k]="black";
    /*
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[parseInt(Math.sin(j/10)*30+30)][j][k]="red";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[parseInt((j-150)*(j-150)/300)][j][k]="blue";
    */
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[10][j][k]="red";
    
    for (var j=0;j<R;j++)
    for (var k=0;k<C;k++) color[20][j][k]="blue";
    
    
    //alert("O_O");
    function work(){
        el.clearRect(0,0,_W,_H);
        var SS;
        for (var i=0;i<_W;i++)
        for (var j=0;j<_H;j++) Dis[i][j]=1000000000;
        for (var i=0;i<H;i++)
        for (var j=0;j<R;j++)
        for (var k=0;k<C;k++)
        if (color[i][j][k]!=""){
            var L=Fx*(j-Px)+Fy*(k-Py)+Fz*(i-Pz);
            if (L<=0) continue;
            var fx=j-Px-Fx*L,fy=k-Py-Fy*L,fz=i-Pz-Fz*L;
            //alert(i+" "+j+" "+k+" "+fx+" "+fy+" "+fz);
            var X=parseInt((fx*DDx+fy*DDy+fz*DDz)/L*5+_W/2+0.5);
            var Y=parseInt((fx*Dx+fy*Dy+fz*Dz)/L*5+_H/2+0.5);
            if (X>=_W||Y>=_H||X<0||Y<0) continue;
            //if ((SS=dis(i,j,k,Px,Py,Pz))>=Dis[X][Y]) continue;
            //Dis[X][Y]=SS;
            //alert(i+" "+j+" "+k+"   "+fx+" "+fy+" "+fz);
            el.fillStyle=color[i][j][k];
            el.fillRect(X,Y,1,1);
        }
        timer=requestAnimationFrame(work);
    }
    timer=requestAnimationFrame(work);
</script>
View Code

 

 

 update at 2018/3/12

⑥修改博客园图标

 　　忽然想到还有这种东西可以修改。

　　正常在html里面加这句就可以了

<link rel="shortcut icon" href="图标地址" type="image/x-icon" />

　　但不知道是什么原因，好像没生效。

　　那就加个js来改好了。

<script type="text/javascript">
　　var x = document.createElement('link');
　　x.rel = "shortcut icon";
　　x.href = "图标地址";
　　document.getElementsByTagName("head")[0].appendChild(x);
</script>

 

 
 update at 2018/3/20

⑦图片水纹效果

　　这个效果学(chao)习自悠悠 ：http://uusama.com/643.html

　　最近考试蛮多的（这个借口不错）没什么时间捣鼓所以直接copy了dalao的主体代码。图片跨域的问题我是从自己服务器请求一个base64码过来。（也许会有点烧流量？

　　代码可以移步dalao的github

　　效果在侧边栏上方头像处

　　PS:如果你copy了我的代码，base64的请求可能只能用于博客园，因为服务器的跨域只放了博客园。

 

⑧ javascript自制函数图像绘制器

　　（现在的软件那么成熟，你捣鼓这玩意有什么意义？= =

　　写出来了顺便移植到blog侧边栏惹……

　　详见这篇文章javascript自制函数图像生成器

　　移植后代码：　　

<div id="mask"></div>

      <div align="center" style="">
        <canvas id="graph"></canvas>
    </div>
      <div UnSelect="YES">
        <button class="ui green button" onclick="mask()">Control</button>
        <button class="ui green button" onclick="redraw()">Reflash</button>
        <!--<p id="map"></p>-->
    </div>
    <p>丑得不行的函数图像生成器</p>
    <a href="https://enceladus.cf/function.html">高端版入口</a><br><br>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function getRandomColor(){
            return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6); 
        }
        function ischar(c){return (c>='a'&&c<='z')||(c>='A'&&c<='Z');}
        function isdigit(c){return c>='0'&&c<='9';}
          function ChangeToPointX(x){return parseInt((x-FunLx)/(FunRx-FunLx)*FunW);}
          function ChangeToPointY(y){return FunH-1-parseInt((y-FunLy)/(FunRy-FunLy)*FunH);}
        function priority(c){
            switch(c){
                case '(':{return 0;break;}
                case '+':{return 1;break;}
                case '-':{return 1;break;}
                case '*':{return 2;break;}
                case '/':{return 2;break;}
                case '^':{return 3;break;}
                default:{return -1;break;}
            }
        }
          function isopt(c){return priority(c)!=-1;}
        function SingleCalc(c,a,b){
            if (c=='+') return a+b;else
            if (c=='-') return a-b;else
            if (c=='*') return a*b;else
            if (c=='/') return a/b;else
            if (c=='^') return Math.pow(a,b);else
            return NaN
        }
        function FunWork(f,x){
            switch(f){
                case "":{return x;break;}
                case "SIN":{return Math.sin(x);break;}
                case "COS":{return Math.cos(x);break;}
                case "TAN":{return Math.tan(x);break;}
                case "ABS":{return Math.abs(x);break;}
                case "SQRT":{return Math.sqrt(x);break;}
                case "LN":{return Math.log(x);break;}
                case "LOG":{return Math.log(x)/Math.LN2;break;}//2为底
                case "LG":{return Math.log(x)/Math.LN10;break;}//10为底
                case "FLOOR":{return Math.floor(x);break;}
                case "CEIL":{return Math.ceil(x);break;}
                case "INT":{return parseInt(x);break;}
                default:{return NaN;break;}
            }
        }
        function FunInit(F){
              F=F.replace(/sin/g,"SIN");
              F=F.replace(/cos/g,"COS");
              F=F.replace(/tan/g,"TAN");
              F=F.replace(/abs/g,"ABS");
              F=F.replace(/sqrt/g,"SQRT");
              F=F.replace(/ln/g,"LN");
              F=F.replace(/log/g,"LOG");
              F=F.replace(/lg/g,"LG");
              F=F.replace(/floor/g,"FLOOR");
              F=F.replace(/ceil/g,"CEIL");
              F=F.replace(/int/g,"INT");
              return F;
        }
        var Funca=$("graph"),Funel=Funca.getContext("2d"),fun=$("function"),eps=1e-12;
        var FunW=/*Funca.parentNode.clientWidth*/157,FunH=/*Funca.parentNode.clientHeight*/157,FunLx=-FunW/100,FunRx=FunW/100,FunLy=-FunH/100,FunRy=FunH/100,PR,tableX,tableY,tmp,countX,countY,Funstage=0,MoX,MoY,MIN=1e-4,MAX=1e8,FUN;
          var dir=[[0,1],[1,0],[0,-1],[-1,0],[1,1],[1,-1],[-1,1],[-1,-1]];
          var FontStyle="bold 12px Georgia";
        Funca.width=FunW;Funca.height=FunH;$("size").innerHTML="Size:"+FunW+"*"+FunH;
        function Calc(fun,X,Value){
            var number=new Array(),opt=new Array(),F=new Array(),now=0,f="",tmp,a,b,sign=1,base=0,j;
            for (var i=0;i<fun.length;i++){
                  for (j=0;j<X.length;j++)
                if (X[j]==fun[i]){
                      if (i==0||isopt(fun[i-1])) now=Value[j];else now*=Value[j];
                      break;
                }
                  if (j==X.length)
                if (fun[i]=='(') F.push(f),f="",opt.push('(');else
                if (fun[i]==')'){
                    number.push(now*sign);now=0;sign=1;base=0;
                    while ((tmp=opt.pop())!='('){
                        b=number.pop();a=number.pop();
                        tmp=SingleCalc(tmp,a,b);
                        number.push(tmp);
                    }
                    now=FunWork(F.pop(),number.pop());
                }else
                if (fun[i]=='.') base=1;else
                if (fun[i]=='+'&&(i==0||priority(fun[i-1])!=-1));else
                if (fun[i]=='-'&&(i==0||priority(fun[i-1])!=-1)) sign=-1;else
                if (fun[i]=='e') if (i==0||isopt(fun[i-1])) now=Math.E;else now*=Math.E;else
                if (fun[i]=='p'&&fun[i+1]=='i'){if (i==0||isopt(fun[i-1])) now=Math.PI;else now*=Math.PI;i+=1;}else
                if (isdigit(fun[i])) if (base==0) now=now*10+(fun[i]-'0');else base/=10,now+=base*(fun[i]-'0');else
                if (ischar(fun[i])) f+=fun[i];else if (isopt(fun[i])){
                    number.push(now*sign);now=0;sign=1;base=0;
                    var s=priority(fun[i]);
                    if (s==-1) return 0;
                    while (s<=priority(opt[opt.length-1])){
                        b=number.pop();a=number.pop();
                        tmp=SingleCalc(opt.pop(),a,b);
                        number.push(tmp);
                    }
                    opt.push(fun[i]);
                }
            }
            number.push(now*sign);
            while (opt.length>0){
                b=number.pop();a=number.pop();
                tmp=SingleCalc(opt.pop(),a,b);
                number.push(tmp);
            }
            return number.pop();
        }
          function drawarc(x,y,R){
            Funel.beginPath();
            Funel.arc(x,y,R,0,Math.PI*2);
            Funel.closePath();
            Funel.fill();
        }
          function drawline(lx,ly,px,py){
            Funel.beginPath();
            Funel.moveTo(lx,ly);
            Funel.lineTo(px,py);
            Funel.closePath();
            Funel.stroke();
        }
        function gettable(){
            tmp=(FunRx-FunLx+eps)/6;
            tableX=1;countX=0;countY=0;
            while(tableX<tmp) tableX*=10;
            while(tableX/10>tmp) tableX/=10,countX++;
            if (tableX>=1) countX=0;
            if (tableX/5>tmp) tableX/=5,countX++;else if (tableX/2>tmp) tableX/=2,countX++;
            for (var i=parseInt(FunLx/tableX)+(FunLx>0);i*tableX<FunRx;i++){
                Funel.fillStyle=i==0?"#000000":"#CDB7B5";
                tmp=(i*tableX-FunLx)/(FunRx-FunLx)*FunW;
                Funel.fillRect(tmp,0,1,FunH);
                
                Funel.fillStyle="#000000";
                Funel.font=FontStyle;
                Funel.fillText((i*tableX).toFixed(countX),tmp+2,10);
            }
            
            
            tmp=(FunRy-FunLy+eps)/10;
            tableY=1;
            
            while(tableY<tmp) tableY*=10;
            while(tableY/10>tmp) tableY/=10,countY++;
            if (tableY/5>tmp) tableY/=5,countY++;else if (tableY/2>tmp) tableY/=2,countY++;
            if (tableY>=1) countY=0;
            for (var i=parseInt(FunLy/tableY)+(FunLy>0);i*tableY<FunRy;i++){
                Funel.fillStyle=i==0?"#000000":"#CDB7B5";
                tmp=(i*tableY-FunLy)/(FunRy-FunLy)*FunH;
                Funel.fillRect(0,FunH-1-tmp,FunW,1);
                
                Funel.fillStyle="#000000";
                Funel.font=FontStyle;
                Funel.fillText((i*tableY).toFixed(countY),0,FunH-1-tmp);
            }
            //$("map").innerHTML=tableX+" "+tableY;
        }
          function PCalc(i,j){return Calc(FUN,['x','y'],[FunLx+(FunRx-FunLx)/FunW*i,FunRy-(FunRy-FunLy)/FunH*j]);}
          function ImpDraw(x,y,X,Y,jump){
              if (x+X>FunW) X=FunW-x;if (y+Y>FunH) Y=FunH-y;
              var Imp=new Array(),tmp;
              if (X>=jump)X=parseInt(X/jump);
        if (Y>=jump)Y=parseInt(Y/jump);
              for (var i=-1;i<=X;i+=1){
                  Imp[i+1]=new Array();
                for (var j=-1;j<=Y;j+=1) Imp[i+1].push(PCalc(i*jump+x,j*jump+y));
            }
              for (var i=0;i<X;i+=1)
            for (var j=0;j<Y;j+=1)
            for (var k=0;k<4;k++)
            if (Imp[i+1][j+1]*Imp[i+1+dir[k][0]][j+1+dir[k][1]]<0) {drawarc(i*jump+x,j*jump+y,PR);break;}
        }
        function getfunction(){
            var group=document.getElementsByName("Fun"),x,y,R,lax,lay,px,py,color,OutSide,type,ValueL,ValueR,ValueS,DLc,tmp,TMP;
              PR=$("PointRadii").value;
            for (var k=1;k<group.length;k++){
                var gf=group[k].parentNode.parentNode;
                  OutSide=1;type=gf.children[0].value;DLc=gf.children[4].children[0].checked;
                  FUN=FunInit((group[k].children[0].value).toLowerCase());
                  color=gf.children[1].value;
                Funel.fillStyle=Funel.strokeStyle=color;
                  switch (type){
                      case '0':{
                        for (var i=0;i<FunW;i++){
                            x=FunLx+(FunRx-FunLx)/FunW*i;
                            y=Calc(FUN,['x'],[x]);
                            if (isNaN(y)) continue;
                            px=i;py=ChangeToPointY(y);
                            if (y>=FunLy&&y<FunRy){
                                drawarc(px,py,PR);
                                  if (DLc) drawline(lax,lay,px,py);
                                OutSide=0;
                            }else{
                                  if (DLc) if (!OutSide) drawline(lax,lay,px,py);
                                OutSide=1;
                            }
                              lax=px;lay=py;
                        }
                          break;
                    }
                      case '1':{
                          ValueL=Calc(gf.children[5].children[1].children[0].value,[],[]);
                          ValueR=Calc(gf.children[5].children[3].children[0].value,[],[]);
                          ValueS=Calc(gf.children[5].children[5].children[0].value,[],[]);
                          for (var i=ValueL;i<ValueR+ValueS-eps;i+=ValueS){
                              if (i>ValueR) i=ValueR;
                              R=Calc(FUN,['t'],[i]);
                              x=R*Math.cos(i);y=R*Math.sin(i);
                              px=ChangeToPointX(x);py=ChangeToPointY(y);
                              if (FunLx<=x&&x<FunRx&&FunLy<=y&&y<FunRy){
                                drawarc(px,py,PR);
                                  if (DLc) drawline(lax,lay,px,py);
                                OutSide=0;
                            }else{
                                  if (DLc) if (!OutSide) drawline(lax,lay,px,py);
                                OutSide=1;
                            }
                              lax=px;lay=py;
                        }
                          break;
                    }
                      case '2':{
                          var SpaceW=Calc(gf.children[5].children[1].children[0].value,[],[]),
                            SpaceH=Calc(gf.children[5].children[3].children[0].value,[],[]),
                            jump=Calc(gf.children[5].children[5].children[0].value,[],[]),Imp=new Array();
                        for (var i=0;i*SpaceW<FunW;i+=1){
                              Imp[i]=new Array();
                              for (var j=0;j*SpaceH<FunH;j+=1) Imp[i].push(0);
                        }
                          for (var i=0,_i=0;i<FunW;i+=SpaceW,_i+=1)
                        for (var j=0,_j=0;j<FunH;j+=SpaceH,_j+=1){
                            //if (!Imp[_i][_j]||(!_i&&!Imp[_i-1][_j]))
                            {
                                  tmp=PCalc(i,j-1);
                                  for (var l=0;l<SpaceH&&j+l<FunH;l++)
                                   if (TMP=tmp,tmp=PCalc(i,j+l),TMP*tmp<0||Math.abs(tmp)<eps) {Imp[_i][_j]=1;if (_i) Imp[_i-1][_j]=1;break;}
                            }
                              //if (!Imp[_i][_j]||(!_j&&!Imp[_i][_j-1]))
                              {
                                tmp=PCalc(i-1,j);
                                  for (var l=0;l<SpaceW&&i+l<FunW;l++)
                                   if (TMP=tmp,tmp=PCalc(i+l,j),TMP*tmp<0||Math.abs(tmp)<eps) {Imp[_i][_j]=1;if (_j) Imp[_i][_j-1]=1;break;}
                            }
                        }
                          for (var i=0;i<Imp.length;i+=1)
                        for (var j=0;j<Imp[i].length;j+=1)
                        if (Imp[i][j]) ImpDraw(i*SpaceW,j*SpaceH,SpaceW,SpaceH,jump);
                          break;
                    }
                      case '3':{
                          ValueL=Calc(gf.children[5].children[1].children[0].value,[],[]);
                          ValueR=Calc(gf.children[5].children[3].children[0].value,[],[]);
                          ValueS=Calc(gf.children[5].children[5].children[0].value,[],[]);
                          _FUN=FunInit((group[k].parentNode.children[3].children[0].value).toLowerCase());
                          for (var i=ValueL;i<ValueR+ValueS-eps;i+=ValueS){
                              if (i>ValueR) i=ValueR;
                              x=Calc(FUN,['t'],[i]);y=Calc(_FUN,['t'],[i]);
                              px=ChangeToPointX(x);py=ChangeToPointY(y);
                              if (FunLx<=x&&x<FunRx&&FunLy<=y&&y<FunRy){
                                drawarc(px,py,PR);
                                  if (DLc) drawline(lax,lay,px,py);
                                OutSide=0;
                            }else{
                                  if (DLc) if (!OutSide) drawline(lax,lay,px,py);
                                OutSide=1;
                            }
                              lax=px;lay=py;
                        }
                          break;
                    }
                }
            }
        }
          function redraw(){
            Funel.clearRect(0,0,FunW,FunH);
            gettable();
            if (Funstage!=1||$("DrawMoving").checked) getfunction();
        }
        function change(){
            FunLx=parseFloat($("FunLx").value);
            FunRx=parseFloat($("FunRx").value);
            FunLy=parseFloat($("FunLy").value);
            FunRy=parseFloat($("FunRy").value);
              FontStyle=$("FontStyle").value;
            redraw();
        }
        function update(){
            $("FunLx").value=FunLx;
            $("FunRx").value=FunRx;
            $("FunLy").value=FunLy;
            $("FunRy").value=FunRy;
              $("FontStyle").value=FontStyle;
        }
        function Scale(x,y,times){
            if (x<0||x>=FunW||y<0||y>=FunH) return;
              if ($("sizelimit").checked){
                  if (times<1&&(FunRx-FunLx<MIN||FunRy-FunLy<MIN)) return;
                  if (times>1&&(FunRx-FunLx>MAX||FunRy-FunLy>MAX)) return;
            }
            x=FunLx+(FunRx-FunLx)/FunW*x;
            y=FunLy+(FunRy-FunLy)/FunH*y;
            FunLx=x-(x-FunLx)*times;FunRx=x+(FunRx-x)*times;
            FunLy=y-(y-FunLy)*times;FunRy=y+(FunRy-y)*times;
        }
        Funca.onmousedown=function(ob){
            MoX=ob.layerX;MoY=ob.layerY;
            Funstage=1;
        }
        Funca.onmousemove=function(ob){
            if (Funstage!=1) return;
            var NoX,NoY,det;
            NoX=ob.layerX;NoY=ob.layerY;
            det=(MoX-NoX)/FunW*(FunRx-FunLx);FunLx+=det;FunRx+=det;
            det=(NoY-MoY)/FunH*(FunRy-FunLy);FunLy+=det;FunRy+=det;
            MoX=NoX;MoY=NoY;
            redraw();update();
        }
        Funca.onmouseup=function(ob){
              if (Funstage==1){
                Funstage=0;
                  redraw();
            }
        }
        Funca.onmouseleave=function(ob){
              if (Funstage==1){
                Funstage=0;
                  redraw();
            }
        }
        Funca.onmousewheel=function(ob){
            ob=ob||window.event;ob.preventDefault();
              var ScaleRate=$("Scale").value;
            var detail;
            if(ob.wheelDelta)detail=ob.wheelDelta;else if(ob.detail)detail=ob.detail;
            if (detail>0) Scale(ob.layerX,FunH-1-ob.layerY,ScaleRate);else Scale(ob.layerX,FunH-1-ob.layerY,1/ScaleRate);
            redraw();update();
        }
        function Add(){
            var New=$("mod").cloneNode(true);
            New.style.display="block";
              New.children[1].value=getRandomColor();
            fun.appendChild(New);
        }
        function Delete(node){
            node.parentNode.removeChild(node);
        }
        function DrawLine(ob){
            //if (ob.className=="ui checkbox checked") ob.className="ui checkbox";else ob.className="ui checkbox checked";
            redraw();
        }
          function ShowOption(obj){
              obj=obj.children[0];
              if (obj.className=="Caret Right icon") obj.className="Caret Down icon",$("option").style.display="block";else obj.className="Caret Right icon",$("option").style.display="none";
        }
          function FunctionChange(obj){
              var fi=0,la=2,v=obj.value;
              obj=obj.parentNode;
            obj.children[5].style.display="none";
            obj.children[2].style.display="inline";
            obj.children[2].children[3].style.display="none";
              if (v==0){
                  obj.children[2].children[fi].innerHTML="y=";
                  obj.children[2].children[la].innerHTML="";
            }else if (v==1){
                  obj.children[2].children[fi].innerHTML="r=";
                  obj.children[2].children[la].innerHTML="";
                  obj.children[5].style.display="block";
                  obj.children[5].children[0].innerHTML="t:";
                  obj.children[5].children[1].children[0].value="0";
                  obj.children[5].children[2].innerHTML="~";
                  obj.children[5].children[3].children[0].value="2pi";
                  obj.children[5].children[4].innerHTML=" Space:";
                  obj.children[5].children[5].children[0].value="0.02";
            }else if (v==2){
                  obj.children[2].children[fi].innerHTML="";
                  obj.children[2].children[la].innerHTML="=0";
                  obj.children[5].style.display="block";
                  obj.children[5].children[0].innerHTML="SpaceW:";
                  obj.children[5].children[1].children[0].value="30";
                  obj.children[5].children[2].innerHTML=" SpaceH:";
                  obj.children[5].children[3].children[0].value="30";
                  obj.children[5].children[4].innerHTML=" Jump:";
                  obj.children[5].children[5].children[0].value="3";
            }else if (v==3){
                obj.children[2].style.display="block";
                obj.children[2].children[3].style.display="inline";
                  obj.children[2].children[fi].innerHTML="x=";
                  obj.children[2].children[la].innerHTML=" y=";
                  obj.children[5].style.display="block";
                  obj.children[5].children[0].innerHTML="t:";
                  obj.children[5].children[1].children[0].value="0";
                  obj.children[5].children[2].innerHTML="~";
                  obj.children[5].children[3].children[0].value="1";
                  obj.children[5].children[4].innerHTML=" Space:";
                  obj.children[5].children[5].children[0].value="0.1";
                  
            }
        }
        redraw();update();
        var maskobj=$("mask");
        var control=$("control");
        function mask(){
              if (maskobj.style.display=="block") control.style.display=maskobj.style.display="none";else control.style.display=maskobj.style.display="block";
        }
        maskobj.onclick=function(){
              mask();
        }
    </script>
html+JS部分
[UnSelect=YES]{
      -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
    -khtml-user-select: none; /* Konqueror */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
}
#mask{
    width:100%;
    height:100%;
    background:#000;
    opacity:0.5;
    position:fixed;
    top:0;
    left: 0;
    z-index: 100;
    display:none;
}
.notes{
    color:#FFFFFF;
    font-weight:800;
    font-size:20px;
}
CSS部分

　　（你你你怎么缩的进啊？随手copy的不管了

 

大家觉得有什么地方可以改进的记得告诉我哦 ^o^

posted @ 2017-09-02 19:56  swm_sxt  阅读(5311)  评论(45)  编辑  收藏  举报