攻陷js原生（6大项目加身，锻炼能力,成就辉煌）

其他 2020-10-17 18:07:55 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;list-style: none;font-family: sans-serif;}
    html{
    
    
      font-size: 12px;
    }
    .keys
    {
    
    
      display: flex;
      min-height: 100vh;
      /*测轴center。主轴center.*/
      align-items: center;
      justify-content: center;
      flex: 1;
      /*太大了就会缩小,太小了就会放大,反正只有一个目的,合理的运用每一寸空间.*/
     }
    .key
    {
    
    
      border: 0.4rem solid black;
      border-radius: .5rem;
      font-size: 1.5rem;
      padding: 1rem .5rem;
      transition: all .07s ease;
      text-align: center;
      color: white;
      width: 10rem;
      background: rgba(0,0,0,0.4);
      text-shadow: 0 0 .5rem black;
    }
    .playing
  {
    
    
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 1rem #FFC600;
  }
  kbd
  {
    
    
    display: block;
    font-size: 4rem;
  }
  .sound
  {
    
    
    font-size: 1.2rem;
    letter-spacing: .1rem;
    color: #ffc600;
    text-transform: uppercase;
  }
	</style>
</head>
<body>
	<div class="keys">
		<div data-key="65" class="key">
			<kbd>A</kbd>
			<span class="sound">clap</span>
		</div>
		<div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">hihat</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">kick</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">openhat</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">boom</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">ride</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">snare</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">tom</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">tink</span>
    </div>
	</div>
	<audio data-key="65" src="sounds/clap.wav"></audio>
   <audio data-key="83" src="sounds/hihat.wav"></audio>
  <audio data-key="68" src="sounds/kick.wav"></audio>
  <audio data-key="70" src="sounds/openhat.wav"></audio>
  <audio data-key="71" src="sounds/boom.wav"></audio>
  <audio data-key="72" src="sounds/ride.wav"></audio>
  <audio data-key="74" src="sounds/snare.wav"></audio>
  <audio data-key="75" src="sounds/tom.wav"></audio>
  <audio data-key="76" src="sounds/tink.wav"></audio>
  <script type="text/javascript">
      //当按下键盘上的相对应的一个键的时候,就触发相对应的声音。
      window.addEventListener("keydown",playSound);
      function playSound(e)
      {
    
    
         const audio=document.querySelector(`audio[data-key="${
      
      e.keyCode}"]`);
         const key=document.querySelector(`div[data-key="${
      
      e.keyCode}"]`);
         //以上两句是${e.keycode}这里面的ascll码是否能在audio与div中找得到.
          if(!audio)return;
          //以上是找不到就结束。
          //否则添加到相对应的div的class列表中.
          key.classList.add("playing");
          //然后是播放的时候从0开始.
          audio.currentTime=0;
          audio.play();
          }
          //这里面有一个问题,就是声音播放完了就显示结束的状态,怎么恢复到原样?
          const keys=Array.from(document.querySelectorAll(".key"));
          //获取到key类.这个类是伸缩项的.
          keys.forEach(key=>key.addEventListener('transitionend',removeTransition));
          function removeTransition(e)
          {
    
    
           //这里有一个问题,就是伸缩项里面如果没有playing中的transform的话,就代表还没有按下。就结束.
           //就是代表按下的不是设置的这些键。
           if(e.propertyName!=="transform")return;
            //当动画结束的时候就移除掉显示效果的样式.
            e.target.classList.remove("playing");
          }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    :root
    {
    
    
      --success-color:#2ecc71;
      --error-color:#e74c3c;
    }
    *{
    
    padding: 0px;margin: 0px;}
    body
    {
    
    
        background-color: #f9fafb;
        font-family: sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
    }
    .container
    {
    
    
      background-color: #fff;
      border-radius: 5px;
      box-shadow: 0 20px 10px rgba(0,0,0,0.3);
      width: 400px;
    }
    h1
    {
    
    
      text-align: center;
      margin: 0 0 20px;
    }
    .form
    {
    
    
      padding: 30px 40px;
    }
    .form-control
    {
    
    
     margin-bottom: 10px;
     padding-bottom: 20px;
     position: relative;
    }
   .form-control label {
    
    
      color: #777;
     display: block;
      margin-bottom: 5px;
    }
    .form-control input {
    
    
      width: 100%;
      border: 2px solid #f0f0f0;
      border-radius: 4px;
      display: block;
      font-size: 14px;
      padding: 10px;

    }
    .form-control input:focus {
    
    
      border-color: #777;
      outline: 0;
    }
    .form-control.success input {
    
    
      border-color: var(--success-color);
    }
    .form-control.error input {
    
    
  border-color: var(--error-color);
}
.form-control small {
    
    
   color: var(--error-color);
   position: absolute;
   bottom: 0;
   left: 0;
   visibility: hidden;
}
.form-control.error small {
    
    
  visibility: visible;
}
.form button {
    
    
 cursor: pointer;
  background-color: #3498db;
  border: 2px solid #3498db;
  border-radius: 4px;
  color: #fff;
  display: block;
  font-size: 16px;
  padding: 10px;
  margin-top: 20px;
  width: 100%; 
  }
  </style>
</head>
<body>
  <div class="container">
    <form action="
    " class="form" id="form">
      <h1>注册</h1>
      <div class="form-control">
        <label for="username">用户名</label>
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="email">邮箱</label>
        <input type="text" id="email" name="email" placeholder="请输入邮箱">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="password">密码</label>
        <input type="text" id="password" name="password" placeholder="请输入密码">
        <small>错误提示</small>
      </div>
      <div class="form-control">
        <label for="password2">确认密码</label>
        <input type="password" id="password2" name="password2" placeholder="请输入确认密码">
        <small>错误提示</small>
      </div>
      <button>提交</button>
    </form>
  </div>
  <script type="text/javascript">
    const form = document.getElementById("form");
    const username = document.getElementById("username");
    const email = document.getElementById("email");
    const password = document.getElementById("password");
    const password2 = document.getElementById("password2");
    //第一:先看看是否是按下了button,如果是就先去取消默认的事件,然后再
    form.addEventListener("submit",function(e)
    {
    
    
        e.preventDefault();
        //第二:再看看提交之前填写了吗?
        checkRequired([username,email,password,password2]);
        checkLength(username,3,15);
        checkLength(password,6,12);
        checkEmail(email);
        checkPasswordsMatch(password, password2);
    });
    function checkRequired(inputArr)//功能:遍历看是否input为空
    {
    
    
        inputArr.forEach(function(input)//遍历这些表单看看哪一个没写
        {
    
    
            if(input.value.trim()==="")//去除了空格,如果没值的话就
            {
    
    
                showError(input,`${
      
      getKeyWords(input)}为必填项`);
            }
            else
            {
    
    
                showSuccess(input);
            }
        });
    }
    function getKeyWords(input)//删除请输入这三个字
    {
    
    
      return input.placeholder.slice(3);
    }
    function showError(input,message)//到了这里的话,代表输入错误了,显示错的颜色,并且把.massage里面是错误的警告语句
    {
    
    
        const formControl=input.parentElement;
        formControl.className="form-control error";
        const small=formControl.querySelector("small");
        small.innerText=message;
    }
    function showSuccess(input)//显示出成果的颜色
    {
    
    
        const formControl=input.parentElement;
        formControl.className="form-control success";
    }
    function checkLength(input,min,max)
    {
    
    
        if(input.value.length<min)
        {
    
    
            showError(input,`${
      
      getKeyWords(input)}至少${
      
      min}个字符`);//因为input中自带了placeholder，所以去掉请输入这几个字
        }
        else if(input.value.length>max)
        {
    
    
            showError(input,`${
      
      getKeyWords(input)}少于${
      
      max}个字符`);
        }
        else
        {
    
    
          showSuccess(input);
        }
    }
    function  checkEmail(input)
    {
    
    
       const re = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;//匹配规则
       if(re.test(input.value.trim()))//输入的邮箱号清除空格如果符合re中的规则的话
       {
    
    
          showSuccess(input);
       }
       else
       {
    
    
           showError(input,"邮箱格式错误");//不匹配代表输入的邮箱错误
       }
    }
    function  checkPasswordsMatch(input1,input2)//两次输入的密码是否匹配
    {
    
    
        if(input1.value!==input2.value)
        {
    
    
             showError(input2, "密码不匹配");
        }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		:root
		{
    
    
			--base:#ffc600;
			--spacing:10px;
			--blur:10px;
		}
		span
		{
    
    
			color: var(--base);
		}
		img
		{
    
    
			width: 1125px;
			height: 549px;
			padding: var(--spacing);
			background: var(--base);
			filter: blur(var(--blur));/*模糊值:越大则越模糊,最小为0即可.*/
		}
		body
		{
    
    
			text-align: center;
			background: #193549;
			color: white;
			font-family:'helvetica neue',sans-serif;
			font-weight: 100;
			font-size: 30px;
		}
		.controls
		{
    
    
			margin-bottom: 50px;
		}
		input
		{
    
    
			width: 100px;
		}
		.result
		{
    
    
			display: flex;
			flex-direction: row;
			justify-content: center;
			color: var(--base);
		}
		.showText
		{
    
    
			margin: 0px 25px 50px 25px;
		}
	</style>
</head>
<body>
	<h1>Update CSS Variables with <span>JS</span></h1>
	<form class="controls">
		<label for="spacing">Spacing:</label>
		<input type="range" id="spacing" name="spacing" min="0" max="200" value="10" data-sizing="px">
		<label for="blur">Blur:</label>
		<input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
		<label for="base">Base Color</label>
		<input type="color" name="base" id="base" value="#ffc600">
	</form>
	<div class="result">
		<div class="showText">{
    
    spacing:<label id="lw_spacing">#ffc600</label>}</div>
		<div class="showText">{
    
    blur:<label id="lw_blur">10px</label>}</div>
		<div class="showText">{
    
    base:<label id="lw_base">10px</label>}</div>
	</div>
	<img src="./img1.jpg" alt="">
	<script type="text/javascript">
		const inputs=document.querySelectorAll(".controls input");
		inputs.forEach(input=>input.addEventListener("change",handleUpdate));
		inputs.forEach(input=>input.addEventListener("mousemove",handleUpdate));
		function handleUpdate()
		{
    
    
			//第一先判断一下是color的还是其余两个的
			const suffix=this.dataset.sizing||"";
			//然后这一句的意思是:修改:root里面的某一个css变量的值
			document.documentElement.style.setProperty(`--${
      
      this.name}`,this.value+suffix);
			//然后是动态的看到数据.注意一下_
			document.getElementById(`lw_${
      
      this.name}`).innerText=this.value+suffix;

		}
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>

	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		html
		{
    
    
			font-weight: 200;
		}

		.panels
		{
    
    
			display: flex;
		}
		.panel
		{
    
    

			min-height: 100vh;
			overflow: hidden;
			color: white;
			flex: 1;
			display: flex;
			flex-direction: column;
			text-align: center;
			line-height: 33.3vh;
			justify-content: center;
			background-position: center;
			 transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s; 


		}
	.panel1 {
    
     background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 {
    
     background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
    .panel3 {
    
     background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
    .panel4 {
    
     background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
    .panel5 {
    
     background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
    .panel>p
    {
    
    
    	/*border: 2px solid red;*/
    	flex: 1;/*每一个p占据三分之一的panel的空间.不然的话,你删除flex:1就知道了*/
    }
    .panel>p:first-child
    {
    
    
    	transform: translateY(-100%);
    }
    .panel.open-active>p:first-child
    {
    
    
    	transform: translateY(0);
    }
    .panel>p:last-child
    {
    
    
    	transform: translateY(100%);
    }
    .panel.open-active>p:last-child
    {
    
    
    	transform: translateY(0);
    }
     
    .panel p
    {
    
    
    	font-family:'Amatic SC', cursive;
    	text-transform: uppercase;
    	font-size: 2em;/*1em=16px*/


    }
    .panel p:nth-child(2)
    {
    
    
    	font-size: 4em;
    }
 .panel.open {
    
    
      flex: 5;/*放大至5倍*/
      font-size:40px;
    }


	</style>
</head>
<body>
	
  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
<script type="text/javascript">
	const panels = document.querySelectorAll('.panel');
	function toggleOpen() {
    
    //点击放大 还原
		this.classList.toggle("open");//toggle切换的功能
	}
	function  toggleActive(e)
	{
    
    //动画完毕后就是是哦展开后然后是文字的出来与进去.
		if(e.propertyName.includes("flex"))//属性如果包括flex的话.
		{
    
    
			this.classList.toggle("open-active");//toggle切换的功能
		}
	}//toggle事件完了之后是还原哦.
	panels.forEach(panel=>panel.addEventListener('click',toggleOpen));
	panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		body
		{
    
    
			overflow: hidden;
		}
	</style>
</head>
<body>
	<canvas id="draw" ></canvas>
	<script type="text/javascript">
		//获取canvas.
		const canvas=document.querySelector("#draw");
		if(canvas.getContext)
		{
    
    
			var ctx=canvas.getContext("2d");
		}
		else
		{
    
    
			console.log("不支持");
		}
		/*支持就执行余下的语句能够用起来,不支持的话,页面上会什么效果都没有。*/
		canvas.width=window.innerWidth;
		canvas.height=window.innerHeight;
		ctx.lineWidth=90;//线条的颜色.
		ctx.lineCap="round";/*线条结束时的形状*/
		ctx.lineJoin="round";/*当两条线条相交时.*/
		ctx.strokeStyle="red";
		let isDrawing=false;//还没开始画
		let x=0;let y=0;
		let lastX = 0;
    	let lastY = 0;
    	let hue = 0;
    	let direction = true;
		function draw(e)
		{
    
    
			if(!isDrawing)
			{
    
    
				return;
			}

			x=e.offsetX;//获取移动后停下的坐标点.
			y=e.offsetY;//获取移动后停下的坐标点.
			//彩虹效
			ctx.strokeStyle=`hsl(${
      
      hue},90%,50%)`;
			if(hue>360)hue=0;
			hue++;
			//		控制笔触大小
			if(ctx.lineWidth>120||ctx.lineWidth<10)
			{
    
    
				direction=!direction;
			}
			if(direction)
			{
    
    
				ctx.lineWidth++;
			}
			else
			{
    
    
				ctx.lineWidth--;
			}
			/*这段思路时:开始direction = true,++到大于120就direction=!direction;,为false,就else--到小于10时就	direction=!direction;,true,就++至此循环.*/
			ctx.beginPath();
			ctx.moveTo(lastX,lastY);//开始画了
			ctx.lineTo(x,y);
			ctx.stroke();
			[lastX,lastY]=[x,y]
		}
		canvas.addEventListener('mousedown',e=>
		{
    
    
			isDrawing=true;//开始画.
			[lastX,lastY]=[e.offsetX,e.offsetY];//获取按下的开始xy坐标点
		});
		canvas.addEventListener("mousemove",draw);
		canvas.addEventListener('mouseup',()=>isDrawing=false);//这两个都false
		canvas.addEventListener('mouseout',()=>isDrawing=false);
	</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		*{
    
    padding: 0px;margin: 0px;}
		html
		{
    
    
			background-color: rgb(145,182,195);
			  font-family: 'Kaiti', 'SimHei', 'Hiragino Sans GB ', 'helvetica neue';
			  font-weight: 200;
		}
		body
		{
    
    
			display: flex;
			justify-content: center;
		}
		.search-form {
    
    
			display: flex;
			flex-direction: column;/*主轴为y,垂直的*/
			align-items: center;/*测轴x居中*/
		}
		input.search
		{
    
    
			padding: 20px;
			font-family: 'Kaiti', 'helvetica neue';
			border: 10px solid #f7f7f7;
			font-size: 40px;
			text-align: center;
			border-radius: 5px;
			position: relative;
			top: 10px;
			left: 10px;
			box-shadow: 0 0 5px rgba(0,0,0,0.12),inset 0 0 2px rgba(0,0,0,0.19);
			width: 120%;


		}
		.suggestions
		{
    
    
			position: relative;
			top: 7px;
			width: 100%;
		}
		.suggestions li 
		{
    
    
			background: white;
			list-style: none;
			border-bottom: 1px solid #d8d8d8;
			padding: 20px;
			  box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);


		}
		span.title {
    
    
  margin-right: 20px;
  text-align: right;
  color: #7c8e94;
  margin-top: 5px;
}

span.hl {
    
    
  color: green;
}
.suggestions li:nth-child(even) {
    
    
  transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
  background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
}

/*奇数匹配*/
.suggestions li:nth-child(odd) {
    
    
  transform: perspective(100px) rotateX(-3deg) translateY(3px);
  background: linear-gradient(to top, #ffffff 0%, #efefef 100%);
}
	</style>
</head>
<body>
	<form action="
	" class="search-form">
		<input type="text" class="search"  placeholder="诗人名字,关键字">
		<ul  class="suggestions">
			<li>输入词句,找一首诗</li>
			<li></li>
		</ul>
	</form>
	<script type="text/javascript">
		const endpoint =
      		'https://gist.githubusercontent.com/liyuechun/f00bb31fb8f46ee0a283a4d182f691b4/raw/3ea4b427917048cdc596b38b67b5ed664605b76d/TangPoetry.json';
      			const poetrys=[];
      			//第一:下载数据,然后解析成json格式,然后是保存进数组中.
      			fetch(endpoint).then(responseData=>
      				{
    
    
      					return  responseData.json();
      				}).then(data=>
      				{
    
    
      					poetrys.push(...data);
      				});
      				function findMatches(wordToMatch, poetrys)//输入的文字与json数据
      				{
    
    
      					//正则找出匹配的数据.
      					return poetrys.filter(poet=>//正则的数据
      						{
    
    
      							const regex=new RegExp(wordToMatch,"gi");//不区分大小写,全局匹配(能找到的都找.)
      							const author=poet.detail_author.join("");//意思是: poetrys数组中的元素变成字符串.
      							return poet.detail_text.match(regex)||poet.title.match(regex)||author.match(regex);//找出诗句中某一段是否与输入的相匹配或者诗名与输入的相匹配.或者作者与输入的是否相匹配.
      							//因为作者是数组形式,所以要转换成字符串形式啊.
      						});
      				}
      				function displayMatches()
      				{
    
    
      					const matches=findMatches(this.value,poetrys);
      					const regex=new RegExp(this.value,"gi");
      					const html=matches.map(poet=>
      						{
    
    
      							const text=poet.detail_text.replace(regex, `<span class="h1">${
      
      this.value}</span>`);
      							   const title = poet.title.replace(regex, `<span class="hl">${
      
       this.value }</span>`);
        							const detail_author = poet.detail_author[0].replace(regex, `<span class="hl">${
      
       this.value }</span>`);
        							//这上面的是把匹配的换成亮亮的有颜色的字.
        								return `<li>
								 <span class="poet">${
      
       text }</span>
								        <span class="title">${
      
       title } - ${
      
       detail_author }</span>
        								</li>`;

      						}).join();//全部转换成字符串。
      					suggestions.innerHTML=html;
      				}
      				const search=document.querySelector(".search");
      				const suggestions=document.querySelector(".suggestions");
      				search.addEventListener("change",displayMatches);
      				  search.addEventListener('keyup', displayMatches);


	</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_37805832/article/details/109086556
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022