當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端笔记

發布時間：2024/9/5 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了前端笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

/*輸入金額限制兩位小數*/ <input type="number" placeholder="其他金額" class="m_input" οnkeyup="clearNoNum(this)"/>function clearNoNum(obj){ if(! /^\d+(\.\d{1,2})?$/.test(obj.value) ){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除"數字"和"."以外的字符 obj.value = obj.value.replace(/^\./g,""); //驗證第一個字符是數字而不是 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一個. 清除多余的 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能輸入兩個小數 }}

/*菜單固定到屏幕上*/ window.onscroll=function(){//滾輪事件var top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;//滾輪滾動的距離var node=document.getElementById('top-menu');//變化的菜單模塊if(top>450){//就是滾動條滾動到440px位置，顯示菜單，并且可以修改它的樣式。node.style.position='fixed';node.style.width='100%';//node.style.background='#fff';node.style.left='0';node.style.top='0';node.style.zIndex="999";}else{//當鼠標滾動回初始位子樣式變回。node.style.position='static';//node.style.background='rgba(0, 0, 0, 0)';node.style.zIndex="0";style="position:fixed;left:0px;top:0px;"}}

/*獲取地理位置*/ <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></script>//獲取地理位置省份和城市 alert(remote_ip_info.province + remote_ip_info.city) /*跨域*/ //前端ajax請求 $.ajax({url: '',dataType: 'json',type: 'POST',xhrFields: {'withCredentials': true//跨域 },crossDomain: true});//php后端header('Access-Control-Allow-Origin:'.(isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN']: '*'));header('Access-Control-Allow-Methods:GET,POST,PUT,DELETE,OPTIONS');header('Access-Control-Allow-Headers:Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With, Process-Data');header('Access-Control-Allow-Credentials:true');

/*返回上次瀏覽位置*/ <script src="jquery-1.8.3.min.js" type="text/javascript"</script><script src="jquery.cookie.js" type="text/javascript"></script>$(function () {var str = window.location.href;str = str.substring(str.lastIndexOf("/") + 1);if ($.cookie(str)) {$("html,body").animate({ scrollTop: $.cookie(str) }, 1000);}else {}})$(window).scroll(function () {var str = window.location.href;str = str.substring(str.lastIndexOf("/") + 1);var top = $(document).scrollTop();$.cookie(str, top, { path: '/' });return $.cookie(str);})

/*判斷各個平臺*/ getUA = function() {var ua = navigator.userAgent.toLowerCase();var browser = {};if (ua.match(/iphone|nokia|sony|ericsson|mot|samsung|sgh|lg|philips|panasonic|alcatel|lenovo|cldc|midp|wap|mobile/i)) {browser.mobile = true; //判斷是否是手機訪問 }if (ua.match(/MicroMessenger/i)) {browser.weChat = true; //判斷是不是微信 }if (ua.match(/iphone|ipad/i)) {browser.ios = true; //判斷是不是ios系統 }if (ua.match(/android/i)) {browser.android = true; //判斷是不是安卓系統 }if (ua.match(/Windows Phone/i)) {browser.wp = true; //判斷是不是windows系統 }if (ua.match(/ipad/i)) {browser.ipad = true;}return browser; }

/*匹配行內style元素*/ function existdisplay() {$('body').find('.pop-box').each(function () {var block = new RegExp('display: block');var test = block.test($(this).attr("style"));if(test){exist = 1;return false;}else{exist = 0;}});return false; }

/*蘋果手機自動播放音頻*/ //一般情況下，這樣就可以自動播放了，但是一些奇葩iPhone機不可以 document.getElementById('audio').play(); //必須在微信Weixin JSAPI的WeixinJSBridgeReady才能生效 document.addEventListener("WeixinJSBridgeReady", function () { document.getElementById('audio').play(); }, false);

/*數字逗號分隔*/ function initNumber(){var num = $('.num').html(),num1 = $('.num1').html();//用原生函數，兼容不好$('.num').html(parseFloat(num).toLocaleString());$('.num1').html(parseFloat(num1).toLocaleString());var nums=$('.item_num').html();//number.toFixed(2).replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' );正則分隔$('.item_info ').each(function(){var num = $(this).find('.item_num span').text();console.log(num.replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' ));$(this).find('.item_num').html( num.replace(/\d(?=(\d{3})+(?!\d))/g, '$&,' ) );}); }

?*slider 觸摸滑動*/ //定義變量，用于記錄坐標和角度var startx,starty,movex,movey,endx,endy,nx,ny,angle;var subsidiary = document.getElementById('subsidiary'); //獲取DOM標簽//開始觸摸函數，event為觸摸對象function touchs(event){//阻止瀏覽器默認滾動事件event.preventDefault();//通過if語句判斷event.type執行了哪個觸摸事件if(event.type=="touchstart"){console.log('開始');//獲取開始的位置數組的第一個觸摸位置var touch = event.touches[0];//獲取第一個坐標的X軸startx = Math.floor(touch.pageX);//獲取第一個坐標的X軸starty = Math.floor(touch.pageY);}else if(event.type=="touchmove"){//觸摸中的坐標獲取// console.log('滑動中');var touch = event.touches[0];movex = Math.floor(touch.pageX);movey = Math.floor(touch.pageY);//當手指離開屏幕或系統取消觸摸事件的時候}else if(event.type == "touchend" || event.type == "touchcancel"){//獲取最后的坐標位置endx = Math.floor(event.changedTouches[0].pageX);endy = Math.floor(event.changedTouches[0].pageY);// console.log('結束');//獲取開始位置和離開位置的距離nx = endx-startx;ny = endy-starty;//通過坐標計算角度公式 Math.atan2(y,x)*180/Math.PIangle = Math.atan2(ny, nx) * 180 / Math.PI;// console.log(nx);if(Math.abs(nx)<=1 ||Math.abs(ny)<=1){// console.log('滑動距離太小');return false;}//通過滑動的角度判斷觸摸的方向if(angle<45 && angle>=-45){index-=1;if (index < 0) {// index = sliderNum - 1;index = 0;}if (index > moveSlidenum) {index = moveSlidenum;}console.log(index);// alert('右滑動'); selectSlider(index);return false;}else if((angle<=180 && angle>=135) || (angle>=-180 && angle<-135 )){index+=1;if (index > moveSlidenum) {index = moveSlidenum;}console.log(index);if (index <= moveSlidenum) {selectSlider(index);}// alert('左滑動');return false;}}}//添加觸摸事件的監聽，并直行自定義觸摸函數subsidiary.addEventListener('touchstart',touchs,false);subsidiary.addEventListener('touchmove',touchs,false);subsidiary.addEventListener('touchend',touchs,false);

//監聽鼠標滾輪翻頁var screen_height = $(window).height();var doScroll = true;var oDiv = document.querySelector('.main-wrapper');var footer = document.querySelector('#main-footer');function onMouseWheel(ev) {/*當鼠標滾輪事件發生時，執行一些操作*/var ev = ev || window.event;var down = true; // 定義一個標志，當滾輪向下滾時，執行一些操作down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;if (doScroll) {if (down) {if (page_index != 3) {doScroll = false;page_index++;vm.scrollTo(page_index * screen_height);//當響應向下滾動事件的時候，將doScroll設置成false，控制在這次響應過程中，不再響應其他滾輪事件，當這次事件執行結束后（500ms后），再講doScroll恢復成true，準備響應下次滾動。 setTimeout(function () {doScroll = true;}, 500);}} else {if (page_index != 0) {doScroll = false;page_index--;vm.scrollTo( page_index * screen_height);// $("#main-swiper").css('transition-duration', '.5s'); setTimeout(function () {doScroll = true;}, 500);}}if (ev.preventDefault) {/*FF 和 Chrome*/ev.preventDefault();// 阻止默認事件 }}return false;}addEvent(oDiv, 'mousewheel', onMouseWheel);addEvent(oDiv, 'DOMMouseScroll', onMouseWheel);//谷歌瀏覽器addEvent(footer, 'mousewheel', onMouseWheel);addEvent(footer, 'DOMMouseScroll', onMouseWheel);function addEvent(obj, xEvent, fn) {if (obj.attachEvent) {obj.attachEvent('on' + xEvent, fn);} else {obj.addEventListener(xEvent, fn, false);}}

待續......

轉載于:https://www.cnblogs.com/qiufang/p/8862716.html

總結

以上是生活随笔為你收集整理的前端笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

笔记

上一篇： nginx配置thinkphp5
下一篇： 2017年html5行业报告,云适配发布