js教程及实例（通过JS如何实现抛物线运动（详细教程））

本文目录

• 通过JS如何实现抛物线运动（详细教程）
• 在Node.js中如何使用DNS模块（详细教程）
• 在JS中如何实现运动缓冲效果（详细教程）
• js中如何往cookie中放值和取值（图文教程）

通过JS如何实现抛物线运动（详细教程）

这篇文章主要介绍了JS实现的抛物线运动效果,结合实例形式分析了javascript抛物线运动的相关运算与元素动态操作实现技巧,需要的朋友可以参考下
本文实例讲述了JS实现的抛物线运动效果。分享给大家供大家参考，具体如下：
先来看看运行效果：
具体代码如下：
《!doctype html 》
《html》
《head》
《meta charset="utf-8"/》
《title》抛物线运动《/title》
《style》
.pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;}
.pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;}
《/style》
《script》
test = function(){
var rect = document.getElementById("rect");
pwx(rect,60,5); //参数2：抛物线角度，参数3：横向速度每次增加5
}
function pwx(rect,radian,step){
var animate = function(opt){
var cos = Math.cos(opt.radian*Math.PI/180);//邻边比斜边,60度的话等于1/2
var sin = Math.sin(opt.radian*Math.PI/180);//对边比斜边,30度的话等于1/2
var left = opt.rect.offsetLeft;
var top = opt.rect.offsetTop;
if(opt.radian》0){
left+=opt.step;
opt.radian-=1; //角度递减1
var a = left - opt.initLeft;
var c = (a/cos);
var b = (sin*c);
opt.rect.style.left = opt.initLeft+a+"px";
opt.rect.style.top = opt.initTop-b+"px";
setTimeout(function(){
animate(opt);
},10);
}else{
opt.rect.style.left = left+opt.step+"px";
opt.rect.style.top = opt.initTop+"px";
}
}
animate({
step : step,
rect : rect,
radian : radian,
initTop : rect.offsetTop,
initLeft : rect.offsetLeft
});
}
《/script》
《/head》
《body》
www.gxlcms.com
《input type="button" value="抛物线" onclick="test()"/》
《p class="pwx_rect" id="rect"》《/p》
《p class="pwx_hr"》《/p》
《/body》
《/html》实现思路：
X方向的边长每次递增5，角度每次递减1，根据这两个已知条件，通过三角函数就可以计算出Y方向的长度是多少
从而得出每次运动的X和Y方向的坐标值，达到抛物线的效果
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在webpack中如何使用iconfont字体图标
在微信小程序中如何实现圆形进度条
在webpack中实现动态引入文件

在Node.js中如何使用DNS模块（详细教程）

本篇文章给大家详细介绍了Node.js中DNS模块的相关知识点，以及相关的实例代码做了分享，有兴趣的朋友参考下。
1. DNS
在Node.js中，提供DNS模块，以实现域名查找及域名解析的处理。
在DNS模块中，提供了三个主方法及一系列便捷方法。
resolve方法:用于将一个域名解析为一组DNS记录。
reverse方法: 用于将IP地址转换为一组域名。
lookup方法: 用于将一个域名转换成IP地址。
DNS模块中的其余便捷方法均为resolve方法的一种便捷形式。
2. 使用resolve方法将域名解析为DNS记录
`DNS.resolve(domain, , callback(err, address){...})`
domain参数为一个字符串，用于指定需要被解析的域名，可以包括子域名。
rrtypr参数为一个字符串，用于指定需要获取的记录类型，可指定的记录类型如下。
A,该参数值为默认值，当记录类型为A时，该记录将一个IPv4地址映射为一个域名。
AAAA,当记录类型为AAAA时，该记录将一个IPv6地址映射为一个域名。
CNAME,当记录类型为CNAME时，表示该记录为一个域名的别名记录，例如，一个www.example.com域名记录也许为一个example.com域名记录额别名记录。
MX,MX记录指向一个使用SMTP的域中的邮件服务器，例如，当你想person@domain.com邮件地址发送电子邮件时，domain.com域的MX记录中保存了发送该邮件时的邮件服务器地址。
TXT,TXT记录是为该域名附加的描述记录。
SRV,SRV记录用于为一个特定域中所有可用服务提供信息。
PTR,PTR记录用于反向地址解析，该记录将一个域名映射为一个IPv4地址。
NS,NS(Name Server)记录是域名服务器记录，用来指定该域名由哪个DNS服务器进行解析。
回调函数有两个参数，err是域名解析失败时触发的错误对象，addresses参数为一个数组，其中存放了所有获取到的DNS记录。
3. 为resolve方法定制的各种便捷方法
DNS.resolve4(domain, callback),获取IPv4地址
DNS.resolve6(domain, callback)，获取IPv6地址
DNS.resolveMx(domain, callback)，获取MX记录，邮件交换服务器记录
DNS.resolveTxt(domain, callback)，获取TXT记录，域名附加的描述记录
DNS.resolveSrv(domain, callback)，获取SRV记录，服务记录
DNS.resolveNs(domain, callback)，获取NS记录，域名服务器记录
DNS.resolveCname(domain, callback)，获取别名记录
4. 使用lookup方法查询IP地址
当使用resolve4方法或者resolve6方法时，由于callback参数值回调函数中的addresses参数值数组中存放着所有获取到的IPv4地址或IPv6地址。因此DNS模块中提供了一个获取第一个被发现的IPv4地址或者IPv6地址的lookup方法
`DNS.lookup(domain, , callback(err, addresses, family){...})`
domain参数为一个字符串，用于指定需要解析的域名
family参数值为一个整数值，用于指定需要获取的IP地址类型，可指定的参数值为4或6，默认参数值为null,表示既可以获取IPv4，又可以获取IPv6
回调函数err参数值为获取地址失败时触发的错误对象，当域名不存在或查询失败时该错误对象的code属性值为ENOENT
addresses参数值为一个字符串，为获取到的IP地址
family参数值为4时，表示为一个IPv4地址，为6时，表示为一个IPv6地址。
5. 使用reverse方法反向解析IP地址
在DNS模块中，使用reverse方法将一个IP地址反向解析为一组与该IP地址绑定的域名
`DNS.reverse(ip, callback(err, domains){...})`
ip参数值为一个字符串，用于指定需要解析的IP地址
回调函数的err为反向解析地址失败后的错误对象
domains参数值为一个数组，存放了所有获取到的域名
6. DNS模块中的各种错误代码
err参数值为执行各种解析或反向解析操作时触发的错误对象，可根据该错误对象的code属性值，即触发的错误代号判断出发了什么错误
ENODATA:DNS服务器返回一个没有数据的查询结果
EFORMERR:DNS服务器发现客户端请求查询时使用了格式错误的查询参数
ESERVFAIL:DNS服务器执行查询操作失败
ENOTFOUND:未发现任何域名
ENOTIMP:DNS服务器不能进行客户端所请求的查询操作
EREFUSED:DNS服务器拒绝进行查询操作
EBADQUERY:格式错误的DNS查询
EBADNAME:域名格式错误
EBADFAMILY:不支持的IP地址类型
EBADRESP:DNS答复的格式错误
ECONNREFUSED:不能建立与DNS服务器之间的连接
ETIMEOUT:与DNS服务器之间建立连接超时
EEOF:已到达文件底部
EFILE:读取文件失败
ENOMEM:没有足够的内存空间
EDESTRUCTION:通道已经被销毁
EBADSTR:字符串格式错误
EBADFLAGS:指定了错误的判断标志
ENONAME:指定的主机名不是数值格式的
EBADHINTS:指定的提示标志无效
ENOTINITIALIZED:c-ares类库初始化工作尚未完成
ELOADIPHLPAPI:加载iphlpapi.dll时触发了一个错误
EADDREGETNETWORKPARAMS:未发现GetNetworkParams函数
ECANCELLED:DNS查询操作被取消
7. DNS模块的基本使用
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue-router相关基础知识及工作原理
axios post提交formdata的实例
在vue组件中使用axios的方法

在JS中如何实现运动缓冲效果（详细教程）

这篇文章主要介绍了JS实现运动缓冲效果的封装函数,涉及JavaScript时间函数与数值运算相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现运动缓冲效果的封装函数。分享给大家供大家参考，具体如下：
之前经常写运动函数，要写好多好多，后来想办法封装起来。（运动缓冲）。
/*
物体多属性同时运动的函数
obj：运动的物体
oTarget：对象，属性名为运动的样式名，属性值为样式运动的终点值
ratio：速度的系数
*/
function bufferMove(obj, oTarget, fn,ratio = 8) {
clearInterval(obj.iTimer);
obj.iTimer = setInterval(function () {
// 此处设定开关bBtn，假设所有的属性均已运动完毕true
var bBtn = true;
for(var sAttr in oTarget){
// 获取当前值，此处兼容透明度的变化
if(sAttr === ’opacity’) {
var iCur = parseFloat(getStyle(obj, sAttr) * 100);
} else {
var iCur = parseInt(getStyle(obj, sAttr));
}
// 计算速度，此处可判定方向，如向左或向右，先透明后出现或先出现后透明等
var iSpeed = (oTarget - iCur) / ratio;
iSpeed = iSpeed 》 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
// 计算下一次的值
var iNext = iCur + iSpeed;
// 赋值给对应样式
if(sAttr ===’opacity’) {
obj.style.opacity = iNext / 100;
obj.style.filter = ’alpha(opacity=’ + iNext +’)’;
} else {
obj.style = iNext + ’px’;
}
// 清除定时器，当前的位置和终点值是否相等，相等则说明结束
if(iNext !== oTarget) {
bBtn = false;
}
}
// 如果bBtn的值为true，则说明所有的属性均已运动完毕，回调函数fn()
if(bBtn) {
clearInterval(obj.iTimer);
if(fn){
fn();
}
}
}, 50);
}以上封装函数也可以用于单个属性，多样式运动，比如：
bufferMove(obj,{"left":200,"width":400,"opacity":80},fn,8);上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
改变vue请求过来的数据中的某一项值的方法
JavaScript满天星导航栏实现方法
vue.js的computed,filter,get,set的用法及区别详解

js中如何往cookie中放值和取值（图文教程）

下面是我给大家整理的在js中如何往cookie中放值和取值，有兴趣的同学可以去看看。
首先这里有个最基本的概念需要了解，为什么往cookie中存放值。如果你的是jsp页面，那么没有必要，完全使用session对象可以实现你想要的存放的值，当然用cookie也不是不可以。
如果是移动端开发或者单纯的html页面想要存放值在下次打开页面还有效的时候，就得用到cookie了。我使用的前端js插件是jquery.cookie.js。这个可以在网上下载下来，最基本的用法也很简单
第一步：引入js
《script src="/XX/js/login/jquery-1.5.1.min.js"》《/script》
《script src="/XX/js/login/jquery.cookie.js"》《/script》第二步：存放值
$.cookie(’the_cookie’, ’the_value’, { expires: 7, path: ’/’ });
一步写到位，不要轻易把path去掉。不然只能在当前js使用，我吃过亏的
举个实例吧：
需求：城市定位，需要下次进入页面时记住上次自动定位的城市名字或者手动选择的城市名字
百度地图API功能
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var 城市名= r.address.city；（拿到的城市名字）
//往cookie里面放城市名称
$.cookie(’locateCity’, 城市名, { expires: 7 ,path:’/’});
}
else {
//alert(’failed’+this.getStatus());
mui.alert("城市定位失败");
}
},{enableHighAccuracy: true})第三步：取值
var locateCity = $.cookie(’locateCity’);上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
javascript实现上传文件到后台接收
a标签如何调用JavaScript
JavaScript中五大常见函数详解