第29天,蛇形字，进度条，右键点击，点名器.
代码
19年9月
发布日期:   2019-09-12
阅读次数:  

蛇形文字:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   
   
<style>
*{
    list-style: none;
}
li{
    float: left;
    width: 40px;
    height: 20px;
    color: red;
    line-height: 20px;
    position: absolute;
    font-size: 30px;
    top: -100px;

}
ul{
    position: absolute;
}

</style>
</head>
<body>
    <ul>
        <li>j</li>
        <li>a</li>
        <li>v</li>
        <li>a</li>
        <li>s</li>
        <li>c</li>
        <li>r</li>
        <li>i</li>
        <li>p</li>
        <li>t</li>
        <li>测</li>
        <li>试</li>
        <li>代</li>
        <li>码</li>
    </ul>
    <script>
        $(window).mousemove(function(e){
    var x = e.clientX;
    var y = e.clientY;
    var i = 0;
    var a = setInterval(function(){
        if(i >= $('li').length-1) {
            clearInterval(a);
        }
        $('li').eq(i).css({
            'left':x+20+(i*30)+"px",
            'top':y-20+"px"
        });
        i++;
    },50);
});
    </script>
</body>
</html>

进度条:

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>进度条</title>
		<style>
			#out{width:600px;height:30px;border:3px solid #888;border-radius:20px;margin-top:100px;text-align:right;}
			#in{float:left;width:0%;height:30px;background:#34FA24;border-radius:20px;font-size:20px;color:#fff;}

			.button1{background:none;border:none;width:80px;height:30px;background:#4DBF7D;margin-top:20px;border-radius:5px;color:#fff;font-size:20px;}
			.button2{background:none;border:none;width:100px;height:30px;background:#F79021;margin-top:20px;border-radius:5px;color:#fff;font-size:20px;}
			
			.button3{background:none;border:none;width:100px;height:30px;background:#5BC0DE;margin-top:20px;border-radius:5px;color:#fff;font-size:20px;}


		</style>
	</head>
	<body>
		<div style="width:600px;margin:100px auto">
			<div id="out">
				<div id="in"></div>
			</div>
			<button class="button1" onclick="start()">开始</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="bun" class="button2" onclick="text(this)">暂停</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="button3"  onclick="ttt()">重新下载</button>
		</div>
		<script>
			var div = document.getElementById('in');
			var bun = document.getElementById('bun');

			var m=0;
			var msg = true;
			var masg = true;
			function start(){
				if(msg){
					msg = false;
					test();
				}else{
					alert('nizii');
				}
				
			}
			
			function test(){
				if(m>100){
					msg = true;
					alert('下载已完成!');
					return;
				}
				div.style.width = m+"%";
				div.innerHTML = div.style.width;
				m++;
				a = setTimeout(test,100);
			}

			function text(aaa){
				if(masg){
					if(msg){return;}
					masg = false;
					aaa.innerHTML = '恢复下载';
					clearTimeout(a);
				}else{
					masg = true;
					clearTimeout(a);
					test();
					aaa.innerHTML = '暂停';
				}
			}

			function ttt(){
				clearTimeout(a);
				bun.innerHTML = '暂停';
				masg = true;
				m = 0;
				test();
			}
		</script>
	</body>
</html>

右键点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义右键菜单(百度)</title>
    <style>
    body {
        font-size: 16px;
        font-family: "KaiTi";
    }
    * {
        padding: 0;
        margin: 0;
    }
    ul {
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #333;
    }
    .contextmenu {
        width: 200px;
        border: 1px solid #999;
        box-shadow: 3px 3px 3px #ccc;
        background-color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        display: none;
    }
    .contextmenu li {
        height: 40px;
        line-height: 40px;
    }
    .contextmenu li a {
        display: block;
        padding: 0 30px;
    }
    .contextmenu li a:hover {
        background-color: #ccc;
        font-weight: bold;
        color: #fff;
    }
    </style>
</head>
<body>

<div class="contextmenu" id="context">
    <ul>
        <li><a href="javascript:;">复制</a></li>
        <li><a href="javascript:;">粘贴</a> </li>
        <li><a href="javascript:;">剪切</a></li>
        <li><a href="javascript:;">下载</a></li>
        <li><a href="javascript:;">上传</a></li>
    </ul>
</div>

</body>
<script>

        document.oncontextmenu = function(env){

            //env 表示event事件
            // 兼容event事件写法
            var e = env || window.event;

            // 获取菜单，让菜单显示出来
           var context = document.getElementById("context");
           context.style.display = "block";

           //  让菜单随着鼠标的移动而移动
           //  获取鼠标的坐标
           var x = e.clientX;
           var y = e.clientY;

           //  获取窗口的宽度和高度
           var w = window.innerWidth;
           var h = window.innerHeight;

           //  调整宽度和高度
           context.style.left = Math.min(w-202,x)+"px";
           context.style.top = Math.min(h-230,y)+"px";

          // return false可以关闭系统默认菜单
           return false;
        };

       //   当鼠标点击后关闭右键菜单
      document.onclick = function(){
          var contextmenu = document.getElementById("context");
          contextmenu.style.display = "none";

      };

</script>
</html>

点名器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>福利。</title>

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        
        a,
        img {
            border: 0;
        }
        
        body {
            font: 12px/180% "Microsoft YaHei", "微软雅黑", "宋体";
        }
        
        #bodybj {
            background: url(images.jpg) no-repeat center top;
        }
        
        #box {
            margin: auto;
            width: 660px;
            font-size: 66px;
            height: 350px;
            line-height: 94px;
            overflow: hidden;
            color: #138eee;
            text-align: center;
            padding: 0 30px;
            margin-top: 50px;
            border: 3px solid #60FF60
        }
        
        #bt {
            margin: auto;
            width: 200px;
            text-align: center;
            margin-top: 75px;
            color: #4AB048;
            font-size: 25px;
            line-height: 28px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        var namelist = [
            "前台", "前台", "六个核桃", "六个核桃", "六个核桃", "六个核桃", "六个核桃", "六个核桃", "加藤鹰", "前台", "前台", "前台", "前台", "前台", "六个核桃", "傻航", "傻航", "傻航", "傻航", "傻航", "傻航"
        ];
        var mytime = null;

        function doit() {
            var bt = window.document.getElementById("bt");
            if (mytime == null) {
                bt.innerHTML = "停止寻觅";
                show();
            } else {
                bt.innerHTML = "开始寻觅";
                clearTimeout(mytime);
                mytime = null;
            }
        }

        function show() {
            var box = window.document.getElementById("box");
            var num = Math.floor((Math.random() * 100000)) % namelist.length;
            box.innerHTML = namelist[num];
            mytime = setTimeout("show()", 1);
        }
    </script>
</head>

<body id="bodybj">
    <div id="box">今晚谁会陪你睡？？</div>
    <div id="bt" onClick="doit()">开始寻觅</div>
    <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
    </div>
</body>

</html>
赏
  目录