使用原生js自定义内置标签
使用原生js自定义内置标签
效果图
代码
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<article contenteditable="" id="textbox">
我是文字
</article> <p is="word-count"></p>
</body>
<script>
class WordCount extends HTMLParagraphElement {
constructor() {
super(); var wc = document.getElementById("textbox"); function countWords(node) {
var text = node.innerText || node.textContent
console.log(text, text.length)
return text.length;
}
var count = '字数: ' + countWords(wc); // 创建影子节点
var shadow = this.attachShadow({ mode: 'open' }); // 创建要给span标签,展示文字个数
var text = document.createElement('span');
text.setAttribute('class', 'text');
text.textContent = count; var style = document.createElement('style');
style.textContent =
`
.text{
color: green;
font-size: 25px;
}
` // 将文字添加到影子节点中
shadow.appendChild(style);
shadow.appendChild(text); // Update count when element content changes
setInterval(function () {
var count = '字数: ' + countWords(wc);
text.textContent = count;
}, 200) }
} // Define the new element
customElements.define('word-count', WordCount, { extends: 'p' }); </script> </html>
使用原生js自定义内置标签的更多相关文章
- 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签
学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签. jsp标签的分 ...
- JSP标签:jsp内置标签、jstl标签、自定义标签
一.jsp标签的分类: 1)内置标签(动作标签): 不需要在jsp页面导入标签 2)jstl标签: 需要在jsp页面中导入标签 3)自定义标签 : 开发者自行定义,需要在jsp页面导入标签 1 ...
- ThinkPHP中的内置标签
ThinkPHP中的内置标签 1.内置标签分类 闭合标签 <tag></tag> 开放标签 <tag /> 2.包含文件标签 主要功能:实现对文件的包含(类似于re ...
- thinkphp5内置标签
thinkphp5内置标签 知道内置标签怎么用,查手册的时候好查 却功能的时候在里面找着来用 内置标签一览 内置标签 变量输出使用普通标签就足够了,但是要完成其他的控制.循环和判断功能,就需要借助模板 ...
- Hexo 添加自定义的内置标签
灵感 想设计一个记录自已骑行的页面,显示时间.地点.路线图等信息.方便以后做一些留念.定位想实现下面类似的效果.参考:<特效> 实现方案也比较简单,反键查看源码.直接Copy,在 ...
- ThinkPHP 模版中的内置标签
内置标签就是模版引擎提供的一组可以完成控制.循环和判断功能的类似HTML语法的标签. 一.判断比较: 1.if标签进行条件判断 //if语句的完整格式 <if condition=&qu ...
- js中内置有对象
statpot:使用mongo+bootstrap+highcharts做统计报表 最近做了一个统计项目,这个统计项目大致的需求是统计接口的访问速度.客户端会调用一个接口来记录接口的访问情况,我的需求 ...
- django中模板变量与内置标签以及过滤器
本文参考 官方文档 . 一 模板变量 格式: {{ variable_name }} variable_name 命名规则与变量命名规则类似,允许字符数字下划线,不允许标点. variable_ ...
- thinkphp内置标签简单讲解
thinkphp内置标签简单讲解 1.volist循环 name 需要遍历的数据 id 类似于foreach中 value offset 截取数据起始位置 length 截取数据的个数 mod 奇偶数 ...
随机推荐
- CAD安装激活失败的原因
1.如何激活的流程我就不赘述了,直奔主题!当出现“未激活”界面时,点击激活,跳出如图所示的窗口.复制“申请号”. 2.“以管理员身份运行”CAD注册机(示例的注册机是CAD2013 32位).这就是注 ...
- C++多态、虚函数、纯虚函数、抽象类
多态 同一函数调用形式(调用形式形同)可以实现不同的操作(执行路径不同),就叫多态. 两种多态: (1)静态多态:分为函数重载和运算符重载,编译时系统就能决定调用哪个函数. (2)动态多态(简称多态) ...
- 28-THREE.JS 扇形圆形
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...
- LeetCode OJ:Lowest Common Ancestor of a Binary Tree(最近公共祖先)
Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...
- 不安装APK直接启动应用
相信这样一个问题,大家都不会陌生, “有什么的方法可以使Android的程序APK不用安装,而能够直接启动”. 发现最后的结局都是不能实现这个美好的愿望,而腾讯Android手机游戏平台却又能实现这个 ...
- json 和 table控件
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content= ...
- 基于Python和Tornado的WEB Terminal
https://github.com/liftoff/GateOne 亮点有以下: ↪ Clientless ↪ Multi-User and Multi-Session ↪ Multi-Auth a ...
- maven install时自动施行单元测试
maven install时自动执行单元测试 1.maven-surefire-plugin简介 Maven本身并不是一个单元测试框架,它只是在构建执行到特定生命周期阶段的时候,通过插件来执行JUni ...
- 类Flask实现前后端交互之代码聊天室
前言 框架 项目目录及各自功能 流程图 后端 server backend exector 前端 ajax 页面更新 演示 简易应答模式 代理模式处理外部请求 后台日志 总结 前言 这两天老是做梦,全 ...
- Friendly ARM linux交叉编译问题解决
ARM-LINUX-GCC 安装参考:(笔记)Ubuntu下安装arm-linux-gcc-4.4.3.tar.gz (交叉编译环境) 然而安装完成之后运行 arm-linux-gcc -v (注意g ...