博客園美化手記——CSS javascript html

時間 2019-11-11

標籤博客美化手記 css javascript html 欄目 CSS 简体版

原文原文鏈接

寫在前面：有時候可能改了一些代碼之後並無及時更新到此處，所以若是你發現個人實際博客園效果與代碼有出入，你能夠先試着在源代碼裏找找看，或者直接私信我獲取最新代碼。javascript

論如何改變本身的博客園，變得好很差看我就不敢保證了。。。php

我假設你是一個徹底不懂網頁相關的code小白。css

①擁有本身的CSS代碼

　　我本身是徹底禁用掉了模板CSS（後期本身看狀況禁不由吧）。html

　　而後會發現，blog乾淨得很，一點樣式都沒有。java

　　對於咱們這種小白來講，從頭至尾本身寫一份完整的CSS代碼是不現實的，這時候咱們須要一份代碼模板，拿模板來改就比較容易了。node

　　網上會有一些人把本身的CSS代碼公開出來，固然實際上你瀏覽別人的blog的時候，（對於Chrome瀏覽器）輕按F12，你能夠在style那個小欄裏找到該網頁的CSS代碼連接（其餘瀏覽器我就不知道了），而後就能夠拿來試試水了。c++

　　窩的CSS代碼：git

#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

　　當初我也是拿別人代碼當模板來改的，不過如今可能有點面目全非了。github

　　那麼如今，咱們能夠把這份別人的模板改爲本身的風格，基本上CSS代碼裏參數的命名都是按元素的英文命名的，挺好認的，或者你能夠把這個參數改改，看看哪裏發生了變化就知道這個參數在說啥了。當你想定向尋找一個元素在CSS中各項參數的位置時，你能夠尋找一下這個元素在html代碼裏面的位置（在Chrome瀏覽器中能夠藉助Ctrl+Shift+C來尋找元素），看一下這個元素的id和class的名字是啥，在CSS代碼裏找找就好了。web

　　界面的顏色除了有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;
}