希望本文所述对大家的javascript程序设计有所帮助

2019-07-19 作者:小鱼儿主页高手论坛   |   浏览(58)

1.小鱼儿主页高手论坛,

一 动态脚本

本文实例讲述了JavaScript实现拖拽网页内元素的方法。分享给大家供大家参考。具体如下:

无意中看到window.prompt()方法,之前真没有使用过,孤陋寡闻。不过现在学习下吧。

var name = "The Window";
var object = {
name : "My Object",
getName: function(){
return this.name;
}
};

当网站需求变大,脚本的需求也逐步变大;我们不得不引入太多的JS脚本而降低了整站的性能;
所以就出现了动态脚本的概念,在适时的时候加载相应的脚本;

这段代码详细讲述了JS拖拽的原理和方法,值得学习和借鉴。

在网页中,有时需要弹出一个提示框,而且在提示框中还需要用户输入一些内容,这就可以用prompt对象,具体实现用法如下。

这里的getName()方法只简单地返回this.name 的值。以下是几种调用object.getName()的
方式以及各自的结果。
object.getName(); //"My Object"
(object.getName)(); //"My Object"
(object.getName = object.getName)(); //"The Window",在非严格模式下

1.动态引入js文件

/**
* 跨平台的事件监听函数
* @param {Node} node 需要监听事件的DOM节点
* @param {String} eventType 需要监听的事件类型
* @param {Function} callback 事件监听回调函数
* @type Function 返回值为函数类型
* @return 返回监听回调函数的引用,用于释放监听
*/
function bindEvent(node, eventType, callback) {
 if (node.attachEvent) {
  if (eventType.indexOf('on')) { eventType = 'on'   eventType;}
  node.attachEvent(eventType, callback);
 } else {
  if (!eventType.indexOf('on'))
   eventType = eventType.substring(2, eventType.length);
  node.addEventListener(eventType, callback, false);
 }
 return callback;
}
/**
* 跨平台的事件监听卸载函数
* @param {Node} node 需要卸载监听事件的DOM节点
* @param {String} eventType 需要卸载监听的事件类型
* @param {Function} callback 卸载事件监听回调函数
*/
function removeEvent(node, eventType, callback) {
 if (node.detachEvent) {
  if (eventType.indexOf('on')) { eventType = 'on'   eventType;}
  node.detachEvent(eventType, callback);
 } else {
  if (!eventType.indexOf('on'))
   eventType = eventType.substring(2, eventType.length);
  node.removeEventListener(eventType, callback, false);
 }
}
/**
* 兼容不同定位方式的通用拖动接口
* @param {Node} dragger 需要被拖动的元素
*/
//必须告诉系统,哪些元素是可以进行交互,而哪些是不行
function canDrag(dragger) {
 var drag = bindEvent(dragger,'onmousedown',function(e){
  //兼容事件对象
  e = e || event;
  //兼容坐标属性
  var pageX = e.clientX || e.pageX;
  var pageY = e.clientY || e.pageY;
  //兼容样式对象
  var style = dragger.currentStyle || window.getComputedStyle(dragger,null);
  //当没有设置left和top属性时,IE下默认值为auto
  var offX = parseInt(style.left) || 0;
  var offY = parseInt(style.top) || 0;
  //获取鼠标相对于元素的间距
  var offXL = pageX - offX;
  var offYL = pageY - offY;
  //为dragger增加onDrag属性,用来存储拖动事件
  if (!dragger.onDrag) {
   //监听拖动事件
   dragger.onDrag = bindEvent(document,'onmousemove',function(e){
    e = e || event;
    var x = e.clientX || e.pageX;
    var y = e.clientY || e.pageY
    //设置X坐标
    dragger.style.left = x - offXL   'px';
    //设置Y坐标
    dragger.style.top = y - offYL   'px';
   });
   //监听拖动结束事件
   dragger.onDragEnd = bindEvent(document,'onmouseup',function(e){
    //释放前读取事件对象
    var x = e.clientX || e.pageX;
    var y = e.clientY || e.pageY
    //释放拖动监听和结束监听
    removeEvent(document, 'onmousemove', dragger.onDrag);
    removeEvent(document, 'onmouseup', dragger.onDragEnd);
    try {
     //删除拖动时所用的属性,兼容FF使用
     delete dragger.onDrag;
     delete dragger.onDragEnd;
    } catch (e) {
     //删除拖动时所用的属性,兼容IE6使用
     dragger.removeAttribute('onDrag');
     dragger.removeAttribute('onDragEnd');
    }
   });
  }
 });
 return function() {
  //返回一个可以取消拖动功能的函数引用
  //释放拖动监听和结束监听
  removeEvent(document, 'onmousemove', dragger.onDrag);
  removeEvent(document, 'onmouseup', dragger.onDragEnd);
  try {
   //删除拖动时所用的属性,兼容FF使用
   delete dragger.onDrag;
   delete dragger.onDragEnd;
  } catch (e) {
   //删除拖动时所用的属性,兼容IE6使用
   dragger.removeAttribute('onDrag');
   dragger.removeAttribute('onDragEnd');
  }
 }
}
<!DOCTYPE html>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script>
   var _saytext = decodeURI("我真笨");

   var _text;

   var err_list = new Array("别乱填!!","快填,别试了!!");

   _text = prompt("在下面输入框填“"   _saytext  "”");

   for ( i = 0; _text != _saytext;   i) {
     if ( i == err_list.length) {
      i = 0;
     }
     alert(err_list[i]);
     _text = prompt("在下面输入框填“"   _saytext  "”");
   }

   alert("嗯,这就对了!");
 </script>
 </head>
 </html>

第三种情况下(object.getName=object.getName);等价于var fn=(object.getName=object.getName);fn();

  var flag = true;
  if(flag){  
    loadScript('browserdetect.js');          // 调用函数,引入路径;
  }
  function loadScript(url){
    var script = document.createElement('script');   // 创建script标签;
    script.type = 'text/javascript';          // 设置type属性;
    script.src = url;                 // 引入url;
    document.getElementsByTagName('head')[0].appendChild(script);  // 将script引入<head>中;
  }

希望本文所述对大家的javascript程序设计有所帮助。

以上所述就是本文的全部内容了,希望大家能够喜欢。

2.

2.动态执行js代码

您可能感兴趣的文章:

  • 利用JavaScript实现拖拽改变元素大小
  • jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
  • JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
  • javascript实现拖拽并替换网页块元素
  • vuejs2.0运用原生js实现简单的拖拽元素功能示例
  • JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
  • js实现拖拽效果
  • 使用js实现的简单拖拽效果
  • javascript实现移动端上的触屏拖拽功能
  • js完美的div拖拽实例代码
  • JS实现基于拖拽改变物体大小的方法

您可能感兴趣的文章:

  • Prompt、Restore命令使用说明
  • JS中confirm,alert,prompt函数使用区别分析
  • JS中confirm,alert,prompt函数区别分析
  • javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
  • javascript中常见的3种信息提示框(alert,prompt,confirm)
  • PowerShell中prompt函数的妙用
  • js获取会话框prompt的返回值的方法

本文由小鱼儿玄机30码发布于小鱼儿主页高手论坛,转载请注明出处:希望本文所述对大家的javascript程序设计有所帮助

关键词: 小鱼儿玄机30码