ThinkPHP模板引擎之导入资源文件方法详解,JavaScript实现反转字符串的方法详解

一般而言,网页传统方式的导入外部JS和CSS等资源文件的方法是直接在模板文件使用:

本文实例讲述了JavaScript实现反转字符串的方法。分享给大家供大家参考,具体如下:

关于canvas的定义:

<script type='text/javascript' src='/Public/Js/Util/Array.js'>
<link rel="stylesheet" type="text/css" href="/App/Tpl/default/Public/css/style.css" />
<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
    <title>JavaScript 实现反转字符串</title> 
  </head> 

  <body> 
    <script language="javascript"> 
      var str = "abcdefg"; 
      document.write(str.split("").reverse().join("")); 
    </script> 
  </body> 
</html> 

     HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

ThinkPHP的模板引擎提供了专门的标签来简化上面的导入。

下面对例子中使用到的 JS 方法进行说明:

     画布是一个矩形区域,您可以控制其每一像素。

1.import标签

1、join():返回字符串值,其中包含了连接到一起的数组的所有元素,元素由指定的分隔符分隔开来。

     canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

第一个是import标签
,导入方式采用类似ThinkPHP的import函数的命名空间方式,例如:

格式:arrayObj.join(separator)

html代码:

<import type='js' file="Js.Util.Array" />

arrayObj 必选项,Array 对象;
separator 必选项。是一个 String
对象,作为最终的 String
对象中对数组元素之间的分隔符。如果省略了这个参数,那么数组元素之间就用一个逗号来分隔。

<div class="container">

 <canvas id="canvas" width="200" height="50"></canvas>

 <div class="content">hello world</div>

</div> 

Type属性默认是js, 所以下面的效果是相同的:

注:Array.join() 等价于 Array.toString()

设置一个父容器,里面包括canvas标签,用于遮罩,content用于显示擦除遮罩层之后的内容

<import file="Js.Util.Array" />

2、split():将一个字符串分割为子字符串,然后将结果作为字符串数组返回。

ps:设置canvas元素需要加上width和height属性,这样绘制的图形才能按照正常尺寸显示,否则在css里面设置宽高,虽然canvas标签的大小会正常显示,绘制的图形则会按照缺省宽高比例放大缩小,缺省的高度是300px,宽度是150px。

还可以支持多个文件批量导入,例如:

格式:stringObj.split([separator[, limit]])

创建context对象,getContext("2d")对象是内建的 HTML5
对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法

<import file="Js.Util.Array,Js.Util.Date" />

stringObj 必选项,要被分解的 String
对象或文字。
separator 可选项。字符串或
正则表达式
对象,它标识了分隔字符串时使用的是一个还是多个字符。如果忽略该选项,返回包含整个字符串的单一元素数组。
limit
可选项。该值用来限制返回数组中的元素个数。

var canvas = document.getElementById(id);

var ctx=canvas.getContext('2d'); 

导入外部CSS文件必须指定type属性的值,例如:

3、reverse():返回一个元素顺序被反转的 Array 对象。

绘制一个能覆盖容器的矩形,rect()
方法创建矩形,fill()绘制图像,默认颜色为黑色,可以使用fillStyle属性设置其他颜色

<import type='css' file="Css.common" />

格式:arrayObj.reverse()

ctx.rect(0,0,canvas.width,canvas.height);

ctx.fill(); 

上面的方式默认的import的起始路径是网站根目录下的Public目录,如果需要指定其他的目录,可以使用basepath属性,例如:

arrayObj 必选项,Array 对象。

图像绘制完成,下面是事件绑定,要实现擦除效果,pc上主要绑定鼠标事件,鼠标按下,启动擦除,鼠标松开,关闭擦除

<import file="Js.Util.Array" basepath="./Common" />

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数学运算用法总结》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript遍历算法与技巧总结》

canvas.addEventListener('mousedown', eventDown);

canvas.addEventListener('mouseup', eventUp);

canvas.addEventListener('mousemove', eventMove); 

如果导入的文件中含有“.”号,则可以采用:

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

这里先设置一个变量,用以表示,鼠标是否处于按下的状态

<import file="Js.Util.Array#min" />

您可能感兴趣的文章:

  • JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
  • javascript基础练习之翻转字符串与回文
  • javascript
    实现字符串反转的三种方法
  • javascript
    不用reverse实现字符串反转的代码
  • 一个JavaScript递归实现反转数组字符串的实例
  • 字符串反转_JavaScript
  • javascript实现字符串反转的方法
  • JS遍历Json字符串中键值对先转成JSON对象再遍历
  • JS字符串统计操作示例【遍历,截取,输出,计算】
  • Java遍历json字符串取值的实例
  • JS实现字符串翻转的方法分析
var mousedown = false;

表示导入 /Public/Js/Util/Array.min.js 资源文件。

鼠标按下松开的事件比较简单,主要是设置状态参数

还支持资源文件的版本号导入,例如:

function eventDown(e){

 e.preventDefault();

 mousedown=true;

}



function eventUp(e){

 e.preventDefault();

 mousedown=false;

} 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图