Giter VIP home page Giter VIP logo

tide's Introduction

潮汐

各种自然的声音

技术实现

  1. cookie
  2. 网格布局
  3. 元素虚化
  4. 影音媒体
  5. 背景渐变

cookie

  • 存取
  • 验证
  • 生命周期
function setCookie(){
  
  var d = new Date();
  var u = document.getElementById("signup-modal-input-email").value;
  var p = document.getElementById("signup-modal-input-password").value;
 
    if(u==""||p=="")
    {
      alert("请补全资料");
    }
    else {
      
      alert(u+" "+p);
      d.setTime(d.getTime()+(30*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = u+"="+p+"; "+expires;
      alert("注册成功");
      document.getElementById("signup-modal-input-email").value="";
      document.getElementById("signup-modal-input-password").value="";
      tlogIn();
    }


}
function getCookie(){

  var u = document.getElementById("email").value+"="+document.getElementById("password").value;

  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i].trim();
    if (c.indexOf(u)==0)

    { 
      var tname = c.split("=");
      username = tname[0];
      alert("欢迎回来"+tname[0]);logIn(); return 0; }
  }
  alert("验证失败");
}

网格布局

  • bootstrap
  <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"></div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 text-center">
  </div>
  <div class="col-lg-2 col-md-2 hidden-sm hidden-xs"></div>
  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-6 text-center">
  </div>
  <div class="col-lg-2 col-md-2 col-sm-2 hidden-xs"></div>
@media (max-width: 767px) {
.login-mobile{
    display: block;
    margin-top: 20px;
    margin-bottom: 23px;
}
.login-div{
    display: none;
}
}

元素虚化

  • opacity 点击调用js改变opacity属性的值

影音元素

  • audio
<audio id ="like_m" name = "mp3"  loop>
    <source src=""  >
    </audio>

audio有许多属性,但是浏览器不一定能实现

背景渐变

  • jquary插件jquery.color.js+animate+函数循环
    var chromotherapyIntervalID = null;
	var random_number;
	var colors;
	function chromotherapy() {
		colors = ["#1abc9c","#3498db","#ea5b4d","#9b59b6","#34495e","#16a085","#27ae60","#2980b9","#f1c40f","#e67e22",
		            "#e74c3c","#f39c12","#d35400","#c0392b","#06b3db","#e3b63d","#dc3d66","#bd3559","#0082c8","#16528e",
		            "#e54b4b","#a2c5bf","#167c80","#72616e","#72BDC2","#F99899","#2C9AB7","#52BAD5","#6DC5DC","#B1E0EC",
		            "#449A88","#72C1B0","#95D1C4","#C5E5DE","#FEBE12","#FED156","#DB3A1B","#E85C41","#EE836E","#66CC99",
		            "#8A9BB1","#CC89A2","#C26787","#64AE60","#27695E","#993366","#8E368B","#345773","#E8755C","#DB334E",
		            "#98AE60","#78AD45","#547B30","#527D5A","#D83944","#993366","#782344","#8ADCB3"];

		document.body.style.backgroundColor = "#8ADCB3";

		//backgroundColor 属性设置元素的背景颜色
		//setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
		//setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

		chromotherapyIntervalID = setInterval(function() {
		var random_number = Math.floor(Math.random() * colors.length);
		$(document.body).animate({ backgroundColor: colors[random_number] }, 2500);
		document.write(random_number);
		}, 5000);
	}

tide's People

Contributors

blusliu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.