day48

day48代码整理

1.回到顶部和隐藏顶部

style  
    .top{
        height: 40px;
        width: 40px;
        background-color: yellow;
        /*// 先写位置  在写position*/
        top:400px;
        left:40px;
        position: fixed;
    }
    .hide{
        display :none;
    }
body
    <span class="top hide">
        回到顶部
    </span>
<script>
      $('.top').on('click',function () {       
            $(window).scrollTop(0);
      });
      $(window).scroll('change',function () {
        if ($(window).scrollTop()>400){$('.top').removeClass('hide')}
        else{$('.top').addClass('hide')}
        });

2.二级表单

style
      .pro{
            padding-bottom: 10px  ;
            padding-top: 10px  ;
        }
        .hide{
            display :none;
        }
body
        <div class="c1">
        <div class="menu1">
            <div class="using">手机</div>
            <div class="content hide">
                <div class="pro">小米9</div>
                <div class="pro">小米mix</div>
                <div class="pro">小米note</div>
            </div>
        </div>			//后面多个和这个格式相同，此处略
script
	$('.using').on('click',function ( ) {
  console.log($(this).next().toggleClass('hide').parent().siblings().children().next().addClass('hide'));
});

3.百度搜索同步的前端

缺数据库的导入'd'开头  和百度自己的更快的
body
    <input type="text" id="d1">
script
    $('#d1').on('input' , function () {
        console.log($(this).val());}) //打印出来

4.鼠标 键盘 定时器换色 输出键盘值 if判断

style
        .c1 {			//在mouseenter上有用 
            height: 200px;
            width: 200px;
            border: 1px solid deepskyblue;
        }
        .c2{
            width: 100px;
            height : 100px;
            background-color: blue;
        }			//toggleclass()  c2 c3 没区别 不必谢width 和 height 可以改一下 实现差别
        .c3{
            background-color: black;
        }
body
            <div class="c1">
            <div class="c2">

          	  </div>
       		 </div>
script						//每悬浮一次c2区域 就符合条件可以打印
      	$('.c2').mouseover(function () {
            console.log('进来了');
        });		;//hover  可以实现悬浮 over 的作用
							//出去	
	  $('.c2').mouseout(function () {
        console.log('出去了');
   		 });
						定时器显示淡入效果 键盘控制实现
	    $(window).keydown(function(event){     //keydown是window的属性吧
        // console.log(event.keyCode)         //记住,用到event了
        if (event.keyCode === 70){
            // $('.c2').toggleClass('c3')
            setInterval(function () {
            $('.c2').toggle('c3');
            },1000)
        }
   		 });
					鼠标点击实现计时器变色效果
		    $('.c2').mouseenter(function()
    {               // 计时器实现变色  悬浮触发事件 写多个只会像是第一个
        setInterval(function (){$('.c2').toggleClass('c3') },1500);}
        // $('.c2')[0].style.backgroundColor = 'red'; } 	 //直接添加
    );