js html模板函数,实现一个简单的 js 模板

2024-09-02

39行代码实现JS HTML模板（轻量+高效+易用）

otmpl 是一个轻量级前端模版(仅有39行无压缩代码,支持缓存),所用指令仅需[#...#]和{#...#},前者包含需要输出html语句,后者包含js变量. 支持javascript完整语法,你可以写for或者while或者其他任一javascript的语法.这个模板参考了YaYaTemplate,但我对其进行优化和改良,并缩短整体代码,提供更好的支持. jQuery.tmpl = function (str, data, helper) str:一个 jQuery 对象或字符串 data:

OpenCms JSP 模板开发——创建一个简单的JSP模板

OpenCms中的JSP模板就是一个普通的JSP页面,在特定的位置使用标签来包含内容,在这个的例子中,我们将要开发一个简单JSP模板,这个模板只是在内容(如<html>.<body>)周围添加了一些标记. 这个JSP模板位于模块下的templates子文件夹下,如/system/modules/org.opencms.test/templates/下,如图: 模板文件内容如下: <%@ taglib prefix="cms" uri="http:

一个简单地template模板

之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地template模板语法写法 */ !function () { "use strict"; /* *tpl为传入的模板内容,data为数据 */ function template(tpl, data) { /*如果传入的是元素,则获取他的innerHTML赋值给他本身*/ if (tpl

Html+css 一个简单的网页模板

一个简单的网页模板,有导航.子菜单.banner部分 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 2 "http://www.w3.org/TR/html4/loose.dtd"> 3 <html> 4 <head> 5 <title>网页</title> 6 <meta charset="UTF-8&qu

Node.js基于Express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js bootstrap express 以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本,因为express因为版本的不同使用的方式也不同,我这算是目前最新的了吧还没有装express的可以移步到这里看看express框架的获取安装 1.简单地项目初始化进入你的nodejs安装路径下边,如图,然后执行命令 express -e test (这里把项目名设置为test

一个简单的PHP模板引擎

PHP早期开发中通常是PHP代码和HTML代码混写,这也使代码中充斥着数据库操作,逻辑处理等.当项目不大时,这样的代码还可以接受,但是随着项目不断扩大,我们就会发现同一个文件中同时存在前端逻辑和后端处理,当逻辑越来越复杂时,代码的可读性和可维护性都会变得非常差,以至于后来不得不进行大规模的代码重构.所以后来就出现了代码分层的思想,尽量拆分开前端代码和后端代码. PHP模板引擎能解决这种混乱吗?当然可以.但是呢,即使你不用专门的模板引擎也可以写出逻辑清晰的代码,重点是要有分层的思想,有专门的脚本去

Chart.js: 一个简单的 JS Chart Library

Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图.柱形图.圆饼图等,这样很容易在html网页中实现动态图的效果: Line Chart Bar Chart Radar Chart Pie Chart Polar Area Chart Doughnut Chart 快速上手你可以到 github下载

判断js对象是否拥有某一个属性的js代码

js对象是否拥有某一个属性的判断方法有很多. 本文分享一个简单的方法,如下: <script> /** * 判断js对象是否具有某属性 * by www.jbxue.com */ var obj = {name:'jack'}; obj.hasOwnProperty('name'); // --> true obj.hasOwnProperty('toString'); // --> false </script>

一个简单的js实现倒计时函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

js钩子函数实现一个简单动画

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style> #ball { width: 20px; height: 20px; border-radius: 50%; background: pink; } </style> </head> <!-- vue动画的js钩子函数相当

一个简单的JS函数，用于判断文本是否数字

/****************************************************** 判断是否是数字(整数,小数均可,不包括负数)* 2014年10月10日22:38:19*****************************************************/function isNumber(str){ var re = /^([0-9]+)([.]?)([0-9]*)$/; return re.test(str);} 该函数脱胎于

js eval函数写一个简单的计算器

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><style>*{margin:2px;}#text #inputText{ width:150px; height:40px; border:#06C 1px sol

JS入门学习，写一个简单的图片库

<!DOCTYPE html> <html><head> <title>创建一个图片库</title> <meta charset="gb2312" /> <link rel="stylesheet"

一个简单的js面试题

在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求给一个数组的最后一个元素加1 结果大于10则给前一个元素加1 并设置当前元素值=0:前一个元素亦是如此,例如 var a=new Array(3,9); a[1]+1; a=[3,9]; 此题看似很简单,只要最后一个元素等于10 就给钱一个元素加1,设置当前元素为0就是了,但还有一种特殊一点的情况,就是当数组的所有

一个简单的JS倒计时

看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时),中间涉及到一些简单的数学运算和取整. 注:getDay()获取到星期的时候是0~6,0为星期天.所以声明一个数组来转换成大写的星期.在数组[getDay()]就得到星期格式. HTML内容: <span>显示当前时间:</span> <span id="show&qu

JS入门学习，写一个简单的选项卡

/* 经过昨天一整天的纠结和摸索.总结下学习初期我最致命的几个问题…… 1.var oDiv = document.getElementById(''); 一定要多输,熟悉后o u什么的字母别搞错了 .后不能有空格啥的, E大写这些都还好,Elements 如果是s,后面接的是 className 或者 TagName . 2.在js中,一定要区分清楚 class 和className ,前面很容易搞混…… 3.遍历 for循环后,操作的对象一般是标签或者class,这是很多个对象,所以

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

一个简单的 js 时间对象创建

JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试首先,先了解js的获取时间函数如下: var myDate = new Date(); //创建一个时间对象 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear(); // 获取当前完整的年份(4位,1970----???) myDate.getMonth(); //

Android中调用C++函数的一个简单Demo

这里我不想多解释什么,对于什么JNI和NDK的相关内容大家自己去百度或谷歌.我对Android的学习也只是个新手.废话少说直接进入正题. 一.在Eclipse中创建一个Android Application Project.相关参数如下: Application Name : HelloJni; Project Name: HelloJni; Package Name:com.example.hellojni 二.然后我们添加一个Jni类.相关参数如下: Source folder: Hello

高德js API moveAlong 函数的一个错误解决

使用覆盖物之一:点标记,让点标记沿着固定的路线移动. API 提供了现成的函数 moveAlong() 开始以为实现移动很简单:分两部 1.准备好经纬度数组 2.调用moveAlong()函数.按照这个思路做的话出现位置错误:a.Ga is not a function , 这个问题研究了半天,最后解决了: 单纯给出经纬度数组是不行的,还要生成路径. moveAlong(lnglatlist:Array,speed:Number,f:Function,circlable:Boolean) ln

PHP学习文件操作函数的应用--简单网络留言模板

<?php /** 网络留言板模式主要运用到的函数有 fopen fclose flock fwrite fread explode list */ ?> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <?php error_reporting(E_ALL && !E_NOTICE) ?> <html> <h

js html模板 函数,实现一个简单的 js 模板

热门专题

js html模板函数,实现一个简单的 js 模板