怎样给网站加一些特效

Author：辰子
发布时间：August 15, 2019
2036views
8 comments
1984 words
Categories：技术交流

##鼠标神效
```javascript
    <script type="text/javascript">
        var a_idx = 0;
        jQuery(document).ready(function ($) {
            $("body").click(function (e) {
                var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善");
                var $i = $("<span/>").text(a[a_idx]);
                a_idx = (a_idx + 1) % a.length;
                var x = e.pageX,
                    y = e.pageY;
                $i.css({
                    "z-index": 99999999999999999999999999999,
                    "top": y - 20,
                    "left": x,
                    "position": "absolute",
                    "font-weight": "bold",
                    "color": "#ff6651"
                });
                $("body").append($i);
                $i.animate({
                    "top": y - 180,
                    "opacity": 0
                }, 1500, function () {
                    $i.remove();
                });
            });
        });
    </script>
```
##离开和进入html时改变title
```javascript
	<script type="javascript">
    var OriginTitile = document.title;
    var titleTime;
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            document.title = '(つェ⊂)人呢?快回来! ' + OriginTitile;
            clearTimeout(titleTime);
        }
        else {
            document.title = '(*´∇｀*) 你来啦~ ' + OriginTitile;
            titleTime = setTimeout(function() {
                document.title = OriginTitile;
            }, 2000);
        }
    });
	</script>
```
##显示网页运行时间
```javascript
    <script type="javascript">
		function show_runtime(){
		window.setTimeout("show_runtime()",1000);
		X=new Date("08/06/2019 16:22:00");
		Y=new Date();T=(Y.getTime()-X.getTime());M=24*60*60*1000;
		a=T/M;
		A=Math.floor(a);
		b=(a-A)*24;
		B=Math.floor(b);
		c=(b-B)*60;
		C=Math.floor((b-B)*60);
		D=Math.floor((c-C)*60);
		runtime_span.innerHTML="本站勉强运行: "+A+"天"+B+"小时"+C+"分"+D+"秒"}show_runtime();
	</script>
```
然后在需要显示运行时间的地方加上以下代码即可。
`<span id="runtime_span"></span>`

Last modification：September 20th, 2019 at 03:52 pm

如果觉得我的文章对你有用，请随意赞赏

8 comments

无主无名
2019-10-28 19:55:23

这个真的挺有趣的，点一下鼠标就会有提示٩(ˊᗜˋ*)و

Reply
混迹
2019-10-5 22:15:02

好多的干货

Reply
残舞
2019-10-1 04:26:00

离开和进入html时改变title 这个代码放在哪里我添加了没有显示

Reply
1. 辰子
  2019-10-1 06:47:48
  
  @残舞
  自定义JS里面，需要删除script标签
  
  Reply
AMZ
2019-9-14 00:07:14

受教了

Reply
stylle
2019-8-29 01:38:05

非常不错呢~

Reply
1. 辰子
  2019-8-29 18:36:16
  
  @stylle
  可以尝试一下吼
  
  Reply
fyh
2019-8-16 17:59:04

努力的亚子真帅

Reply