一、原生JS实现ajax 第一步获得XMLHttpRequest对象 第二步：设置状态监听函数 第三步：open一个连接，true是异步请求 第四部：send一个请求，可以发送一个对象和字符串，不需要传递数据发送null 第五步：在监听函数中，判断readyState=4&&status=200表示请求成功 第六步：使用responseText、responseXML接受响应数据，并使用原生JS操作DOM进行显示 var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(){console...
mui内置有H5版本的透明渐变导航控件，教程参考mui官网；透明渐变导航是一种解决滚动条通顶的变通方案，相比双webview，具有更高的性能和更好的动画效果； 下面通过本文给大家分享基于原生JS实现 MUI导航栏透明渐变效果，具体内容详情如下所示： 首先声明：由于backgroundColor的值采用的是RGBA，IE8及以下不支持，所以此效果不支持IE8及以下的浏览器 css代码 body,p,h1{margin: 0;} .module-layer{width: 100%;position: fixed;top...
一、添加class function addClass(ele,cName) {var arr = ele.className.split( ).concat(cName.split(" "));for(var i=0;i<arr.length;i++){for(var k=arr.length-1;k>i;k--){(arr[k]==="")&&arr.splice(k,1);(arr[i]===arr[k])&&arr.splice(k,1);}}ele.className = arr.join(" "); }二、删除class function removeClass(ele,cName) {var arr1 = ele.className.split( );var arr2 = cName.split(" ");for(var i=0;i<arr2.length;i...
舞动的灵魂版js日历，完全采用js实现，故而实现了与语言无关，jsp、asp.net php asp均可使用.无论你是开发软件，还是网站，均是不可或缺的实用代码。 该日历主要实现了获取当前时间时分秒，年月日星期，动态生成选择年的select，月的select，然后根据你所选中的年月，显示该年月对应的这一个月的日期。点击上一个月，下一个月按钮，在下拉列表中显示对应的年月。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><ti...
本文实例为大家分享了JS编写简单选项卡的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>jquery选项卡</title><style type="text/css">#div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;}.active{background:#999;}</style><!-- 原生的JS --><script type="text/javascript">window.onload=function(){var oDiv=document.getElementById(div...
Ajax方法好，网站感觉跟高大上，但由于Js的局限，跨域Ajax无法实现，这里，讲一下解决办法，前提是需要能够自己可以控制flask端的响应。 主要技术： 修改服务器相应的相应头，使其可以相应任意域名。and设置响应头，使其能够相应POST方法。 实现代码： 这里先放flask代码： from flask import make_response @app.route(/test,methods=[get,post]) def Test():if request.method==GET:rst = make_response(aaa)rst.headers[Access-...
1、内高度、内宽度： 内边距 + 内容框 clientWidth clientHeight 2、外高度，外宽度： 边框 + 内边距 + 内容框 offsetWidth offsetHeight 3、上边框、左边框 clientTop clientLeft 4、元素的大小及其相对于视口的位置 getBoundingClientRect() //x\y:元素的左上角和父元素左上角的距离 //width/height:边框 + 内边距 + 内容框 //top:元素的上边界和父元素上边界的距离 //left:元素的左边界和父元素左边界的距离 //right:元素的右边...
前 言 最近在复习JS，觉得音乐播放器是个挺有意思的东西，今天就来用我们最原生的JS写一个小小的音乐播放器~ 主要功能： 1、支持循环、随机播放2、在播放的同时支持图片的旋转 3、支持点击进度条调整播放的位置，以及调整音量 4、显示音乐的播放时间 5、支持切歌：上一首、下一首、点击歌名切歌；暂停播放等~ 添加音乐有两种方式： ①可以用一个audo标签，这样应该把音乐的地址存放到一个数...
如下所示： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; top: 50px; border-radius: 50%; } </style> </head> <body> <button id="btn200">200</button> <button id="btn400">400</button> <div id="box"></div> </body> </html> <script> var btn200 = document.getElementById("btn200"...
昨天我们说了一下原生JS中常用的兼容性写法，今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件，这个东西不是一般人写出来的，因为里面涉及的运动效果都是经过一堆数学的函数运算出来的，我们平常人是写不出来的，所有我们就自己封装一个运动框架，有什么问题改起来也方便，下面我们就开始封装. 首先，我们先写一个div，设置一些简单的样式，我们就拿这个div举例子 如下代码： #div{width: ...
话说轮播图效果是前端er学习JS的必经之路啊，很多同学写的第一个JS效果应该就是它了，在各大网站我们都会经常见到，但是无缝滚动运动效果的轮播图，对于小白们来说还是有一定难度的。 我们来看看思路吧~ 首先我们要实现的效果有以下几点： 小圆点：点击小圆点显示与之对应的图片 向左和向右按钮：点击向左按钮图片向后运动，点击向右按钮图片向前运动 定时器：每隔 2s 自动播放 主要难点在于： 当图片运动到最后一张，点击向右的按...
封装运动框架 function getStyle(obj,name){if(obj.currentStyle){return obj.currentStyle[name];}else{return getComputedStyle(obj,false)[name];} } function move(obj,json,options){var options=options || {};var duration=options.duration || 800;var easing=options.easing || linear;var n=0;var start={};var dis={};var count=Math.ceil(duration/30);//{top:0,left:0}for(name in json){start[name]=parseFloat(getS...
主要方法：定时器的运用 setInterval(funnction(){},30);为了避免最后时刻速度即将停止时的误差，可以采用下面的方法： if（iSpeed<1）//速度足够小的时候，让速度直接为0，避免速度的波动 { iSpeed = 0; }绝对值的运用(主要运用于弹性运动等速度有正负的情况)： Math.abs(2.5)// 2弹性运动和摩擦力的组合： iSpeed+=(iTarget-obj.offsetLeft)/5; iSpeed*=0.7;模拟摩擦力： iSpeed*=0.95;//小数速度会越来越小减速运动： iSpeed--;...
想要实现的效果 点击日期选择框出现日历有个日期控制栏帮助选择日期， 包括年、月、日的选择和今天日历格子，初次点击日期选择框时显示此刻的日期，日历格子的日期应该包括这个月的所有天数，同时如果当月的1号不是周日，还应补全从周日到1号的天数。还要在这个月最后1号的后面补全到周六。日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的。实现思路 为了组件的可复用性，需要用面向对象的思想。每个日历组件都是一...
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function infoCheck(){var ename=...