Anoddguy的博客

原创 如何隐藏滚动条，兼容IE、谷歌、火狐、opera

兼容IE: -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-rails: none; -ms-content-zoom-limit-min: 100%; -ms-content-zoom-limit-ma...

原创 滚动一定距离实现标题悬浮（2种方法）

方法一：JS部分： var middle=document.getElementsByClassName('middle')[0]; window.onscroll=function(ev){ var e=window.event||ev; if(document.documentElement.scrollTop>400){ middle.st...

原创 on事件绑定和addEventListener的区别

原创 BOM-小结

原创 AJAX小结

原创 JS性能优化+闭包

原创 ES6-小结

原创 CSS小结

原创 SASS-用法小结

原创 SQL小结

原创 Vue-router小结

原创 VUE项目操作小结

原创 VUE-入门小结

原创 VUE-组件小结

原创 犀牛书第二章总结

原创 犀牛书第三章总结

原创 犀牛书第四章总结

原创 JS-事件小结

原创 JS-DOM小结

原创 JS组合键如何实现？

效果：只有ctrl+回车键才能将input里的值传到下边CSS部分： div{ background-color: red; margin-top: 5px; } HTML+JS部分： <input type="text" /> <script> var inp=document.getElementsByTag...

原创 JS事件监听的兼容写法

addEvent(goal,fn,'click',false); function addEvent(obj,fn,even,boolean){//封装一个自己的方法 if(obj.addEventListener){ obj.addEventListener(even,fn,boolean) } else{ ev='on'+even; ...

原创 JS键盘操作元素

效果：css部分： .recangle{ width: 100px; height: 100px; border-radius: 50%; background-color: red; position: absolute; }HTML部分：        <div class="recangle">...

原创 常见的IE兼容问题

  其它 兼容IE 事件委托 e.srcElement e.target 滚动条兼容 document.documentElement.scrollTop document.body.scrollTop ...

原创 JS-封装getClassName适应IE8

效果图：CSS部分： .active{ width: 100px; height: 100px; background-color: red; }HTML部分： <div class="goal" >DDDDDDD <div class="show">EEEEEEEEE <div c...

原创 JS-聊天框

效果图：  CSS部分： *{ margin:0; padding: 0; } .box{ width: 300px; height: 300px; border: 1px solid; }HTM...

原创 正则表达式小练-----筛选图片格式

正则只有两个方法，其它都是String的方法。正则两个方法是：A  reg.exec()        B  reg.test().JS部分： window.onload=function(){ var json1={ "country":"china", "place":[ {"name":"beijing","imag.

原创 JS-实现网页上的时钟

JS部分 window.onload=function(){ var body=document.getElementsByTagName('body')[0]; var go=setInterval(function(){ body.innerHTML=''; now= new Date(); year= now.getFullYear...

原创 JS完成硬币翻转效果

效果   鼠标上移，变成反面CSS部分 *{ margin: 0px; padding: 0px; } body{ background-color: blue; } .elbum{ width: 300px; height: 400px; margin: 100px auto; } ...

原创 JS实现对象或者JSON深拷贝

深拷贝的意思是能拷贝对象中的对象，而不会对原对象产生影响。方法一采用递归 var json={ 'name':'liming', 'age':'20', 'height':'160cm', 'friends':{ 'name':'jack', 'age':'21', 'height':'180cm' }, }...

原创 JS数组冒泡排序和去重

冒泡排序从大到小 function smaller(oArr){//冒泡排序，从大到小 for(var i=oArr.length-1;i>0;i--){//把最小的放在最后 for(var j=0;j<i;j++){//从第一个到到第i个都进行判断 var medium; if(oArr[j]<oArr[j+1]){/...

原创 JS抽奖系列2-转轮

效果图 CSS部分 *{ margin: 0px; padding: 0px; } table{ border:none; margin: 100px auto; } .similar{ width: 40px; line-height: 40px; text-align: center; b...

原创 JS抽奖系列1-生死簿

效果图CSS部分： ul{ list-style: none; width: 800px; margin: 0 auto; border: 1px solid; } li{ width: 80px; line-height: 80px; font-size: 30px; font-weight: bold...

原创 JS-递归-波费纳契数列实现

JS递归很好理解，将其转化成高中所学的函数表达式，return的即为函数右值，命名为函数左值。对于波费纳契数列，对应的函数为f(x)=f(x-1)+f(x-2) var num=prompt("请输入一个整数","例如10"); if(isNaN(num)||num==''||num<=0){ num=prompt("请重新输入一个整数","例如10"); ...

原创 JS猜数字游戏

猜数字游戏：猜4个0-9的数，判断和是否为目标值（随机产生）。 window.onload=function(){ var goal=Math.floor(Math.random()*37); var chance=0; var arr=[]; function start(){//游戏开始程序 do{ num_1=prompt(...

原创 JS-switch语句妙用

window.onload=function(){ var a=prompt("请输入你的成绩","60"); if(!isNaN(a)&&a>=0&&a<=100){ switch(true){ case a<60:alert("不及格");break; case a<7

原创 JS实现圣诞树效果

效果图JS部分 var p=prompt("请输入整数","10"); for(var i=1;i<=p;i++){ for(var j=0;j<p-i;j++){//循环使前边空格产生 document.write("  "); } for(var k=0;k<i;k++){//使星星...

原创 JS九九乘法表

效果图JS部分  window.onload=function(){ for(var i=1;i<=9;i++){ for(var j=1;j<=i;j++){ document.write(i*j+" = "+j+" * "+i+"    "); } ..

原创 JS 数7逻辑实现

效果                                          CSS部分 .outer{ width: 450px; height: 500px; margin: 50px auto; background-color: black; color:white; font-weight: bold; ...

原创 js判断周+天数

效果图                                                                          CSS部分 .outer{ width: 150px; text-align: center; line-height: 30px; margin: 50px auto; backgr...

原创 JS注册弹框效果

效果图CSS部分 *{ margin: 0px; padding: 0px; } .close{ float: right; background-color: black; color: white; font-weight: bold; padding: 0px 5px; } body{ ...