写在前面：有时候可能改了一些代码以后并没有及时更新到此处，因此如果你发现我的实际博客园效果与代码有出入，你可以先试着在源代码里找找看，或者直接私信我获取最新代码。
论如何改变自己的博客园，变得好不好看我就不敢保证了。。。
我假设你是一个完全不懂网页相关的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%; 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; 80px; height: 80px; line-height: 500px; text-align: center; z-index:1; } #Uleft{ 80px; height: 80px; top:-60px; left: 50px; } #Uright{ 110px; height: 110px; top: -75px; right: 50px; } #Dleft{ bottom:10px; left: 10px; 200px; height: 200px; } #Dright{ bottom:-50px; right: 0px; 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; 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; 95%; min- 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; 50%; float: left; } #blogTitle h2 { margin-left: 6em; line-height: 1.5em; 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{ 100%; min- 70em; text-align: left; background:#FFF5EE; opacity: 0.90; } #mainContent .forFlow{ margin-left: 13em; float: none; 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; 100% } .day { min-height: 10px; _height: 10px; margin-bottom: 20px; padding-bottom: 5px; } .dayTitle { 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; 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; 100%; clear:both; padding: 10px 0; } .postDesc { float: right; 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; 100%; clear:both; float: right; margin: 0 auto 15px auto; } /*.diggit{ text-align: center; 50px; height:40px; background:url(//fq.wc.lt//up/1503755899.png); background-size:100% 100%; }*/ .buryit{ font-size:0px; 0; height:0; } .burynum{ font-size:0px; 0; height:0; } /*****主页文章列表结束**************************/ /*****侧边栏开始********************************/ #sideBar { 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 { 14em; } #calendar .Cal { 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{/**日历年月头部样式**/ 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 { 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; 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; 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 { 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; 80%; } #divRefreshComments { text-align: right; margin-bottom: 10px; } .commenttb { 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; 100%; } .entrylistPosttitle { font-size: 110%; font-weight: bold; border-bottom: 1px solid #666; line-height: 1.5em; 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; 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 { 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 { 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; } /*****第四部分结束*******************************/
当初我也是拿别人代码当模板来改的，不过现在可能有点面目全非了。
那么现在，我们可以把这份别人的模板改成自己的风格，基本上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;}
③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&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>
我的页首：
<!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>
我的页尾：
<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>
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>
这时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>
还有物理模型部分代码：
<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>
后来由于小白文件床已挂，现换上新的页首代码（拿博客园做图床）：
<!DOCTYPE html> <html> <body> <style> #Canvas{ position:fixed; top:0px; left:0px; opacity:0.3; } </style> <canvas id="Canvas"></canvas> <style> #nav { 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>
由于种种原因（其实就是太丑）现在已经不自动打开了，可以在导航栏里的“动画"打开。
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>
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>
[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; }
（你你你怎么缩的进啊？随手copy的不管了
大家觉得有什么地方可以改进的记得告诉我哦 ^o^