Javascript – 吾学网

5月 15, 2023

js实现图片轮播效果支持IE6

作者 5xue 在 Javascript

js实现图片轮播效果支持IE6

水平方向

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>吾学网 &#8211; 5xue.cc &#8211; JS实现图片水平方向轮播</title>
<style>
body,div,ul,li{margin:0;padding:0}
ul{list-style-type:none}
body{background:#333;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:3000px;height:170px;overflow:hidden;}
#box .list img{float:left;position:relative;display:inline-block}

#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
</style>
<script type="text/javascript">
window.onload = function () {
	var oBox = document.getElementById("box");
	var oList = document.getElementById("imgList");
	var aImg = oBox.getElementsByTagName("img");
	var timer = playTimer = null;
	var index = i = 0;
	var bOrder = true;
	var aTmp = [];
	var aBtn = null;
	
	//生成数字按钮
	for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

	//插入元素
	var oCount = document.createElement("ul");
	oCount.className = "count";
	oCount.innerHTML = aTmp.join("");
	oBox.appendChild(oCount);	
	aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
	
	//初始化状态
	cutover();
	
	//按钮点击切换
	for (i = 0; i < aBtn.length; i++) {
		aBtn[i].index = i;
		aBtn[i].onmouseover = function () {
			index = this.index;
			cutover()
		}
	}
	
	function cutover() {
		for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
		aBtn[index].className = "current";			
		startMove(-(index * aImg[0].offsetWidth))
	}
	
	function next() {
		bOrder ? index++ : index--;
		index <= 0 && (index = 0, bOrder = true);
		index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
		cutover()
	}
	
	playTimer = setInterval(next, 3000);
	
	//鼠标移入展示区停止自动播放
	oBox.onmouseover = function () {
		clearInterval(playTimer)
	};
	
	//鼠标离开展示区开始自动播放
	oBox.onmouseout = function () {
		playTimer = setInterval(next, 3000)
	};
	function startMove(iTarget) {
		clearInterval(timer);
		timer = setInterval(function () {
			doMove(iTarget)
		}, 30)	
	}
	function doMove (iTarget) {		
		var iSpeed = (iTarget - oList.offsetLeft) / 10;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		
		oList.offsetLeft == iTarget ? clearInterval(timer) : oList.style.left = oList.offsetLeft + iSpeed + "px"
	}
}
</script>
</head>
<body>
<div id="box">
	<div id="imgList" class="list">
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/1.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/2.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/3.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/4.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/5.jpg" />
	</div>
</div>
</body>
</html>

100

101

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>吾学网 – 5xue.cc – JS实现图片水平方向轮播</title>

<style>

body,div,ul,li{margin:0;padding:0}

ul{list-style-type:none}

body{background:#333;text-align:center;font:12px/20px Arial;}

#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:3000px;height:170px;overflow:hidden;}

#box .list img{float:left;position:relative;display:inline-block}

#box .count{position:absolute;right:0;bottom:5px;}

#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}

</style>

window.onload = function () {

var oBox = document.getElementById("box");

var oList = document.getElementById("imgList");

var aImg = oBox.getElementsByTagName("img");

var timer = playTimer = null;

var index = i = 0;

var bOrder = true;

var aTmp = [];

var aBtn = null;

//生成数字按钮

for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

//插入元素

var oCount = document.createElement("ul");

oCount.className = "count";

oCount.innerHTML = aTmp.join("");

oBox.appendChild(oCount);

aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");

//初始化状态

cutover();

//按钮点击切换

for (i = 0; i < aBtn.length; i++) {

aBtn[i].index = i;

aBtn[i].onmouseover = function () {

index = this.index;

cutover()

}

function cutover() {

for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";

aBtn[index].className = "current";

startMove(-(index * aImg[0].offsetWidth))

}

function next() {

bOrder ? index++ : index--;

index <= 0 && (index = 0, bOrder = true);

index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)

cutover()

}

playTimer = setInterval(next, 3000);

//鼠标移入展示区停止自动播放

oBox.onmouseover = function () {

clearInterval(playTimer)

};

//鼠标离开展示区开始自动播放

oBox.onmouseout = function () {

playTimer = setInterval(next, 3000)

};

function startMove(iTarget) {

clearInterval(timer);

timer = setInterval(function () {

doMove(iTarget)

}, 30)

}

function doMove (iTarget) {

var iSpeed = (iTarget - oList.offsetLeft) / 10;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

oList.offsetLeft == iTarget ? clearInterval(timer) : oList.style.left = oList.offsetLeft + iSpeed + "px"

}

</script>

</head>

<body>

</div>

</body>

</html>

浏览样例

竖直方向

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>吾学网 &#8211; 5xue.cc &#8211; JS实现图片竖直方向轮播</title>
<style>
body,div,ul,li{margin:0;padding:0}
ul{list-style-type:none}
body{background:#333;text-align:center;font:12px/20px Arial;}
#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:600px;height:1275px;overflow:hidden;}

#box .count{position:absolute;right:0;bottom:5px;}
#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}
#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}
</style>
<script type="text/javascript">
window.onload = function ()
{
	var oBox = document.getElementById("box");
	var oList = document.getElementById("imgList");
	var aImg = oBox.getElementsByTagName("img");
	var timer = playTimer = null;
	var index = i = 0;
	var bOrder = true;
	var aTmp = [];
	var aBtn = null;
	
	//生成数字按钮
	for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

	//插入元素
	var oCount = document.createElement("ul");
	oCount.className = "count";
	oCount.innerHTML = aTmp.join("");
	oBox.appendChild(oCount);	
	aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
	
	//初始化状态
	cutover();
	
	//按钮点击切换
	for (i = 0; i < aBtn.length; i++)
	{
		aBtn[i].index = i;
		aBtn[i].onmouseover = function ()
		{
			index = this.index;
			cutover()
		}
	}
	
	function cutover()
	{
		for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
		aBtn[index].className = "current";			
		startMove(-(index * aImg[0].offsetHeight))
	}
	
	function next()
	{
		bOrder ? index++ : index--;
		index <= 0 && (index = 0, bOrder = true);
		index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)
		cutover()
	}
	
	playTimer = setInterval(next, 3000);
	
	//鼠标移入展示区停止自动播放
	oBox.onmouseover = function ()
	{
		clearInterval(playTimer)
	};
	
	//鼠标离开展示区开始自动播放
	oBox.onmouseout = function ()
	{
		playTimer = setInterval(next, 3000)
	};
	function startMove(iTarget)
	{
		clearInterval(timer);
		timer = setInterval(function ()
		{
			doMove(iTarget)
		}, 30)	
	}
	function doMove (iTarget)
	{		
		var iSpeed = (iTarget - oList.offsetTop) / 10;
		iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);		
		oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"
	}
};
</script>
</head>
<body>
<div id="box">
	<div id="imgList" class="list">
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/1.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/2.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/3.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/4.jpg" />
		<img src="http://5xue.cc/wp-content/uploads/2023/05/15/5.jpg" />
	</div>
</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>吾学网 – 5xue.cc – JS实现图片竖直方向轮播</title>

<style>

body,div,ul,li{margin:0;padding:0}

ul{list-style-type:none}

body{background:#333;text-align:center;font:12px/20px Arial;}

#box{position:relative;width:600px;height:255px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;overflow:hidden;}

#box .list{position:relative;width:600px;height:1275px;overflow:hidden;}

#box .count{position:absolute;right:0;bottom:5px;}

#box .count li{color:#fff;float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;}

#box .count li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60;}

</style>

window.onload = function ()

{

var oBox = document.getElementById("box");

var oList = document.getElementById("imgList");

var aImg = oBox.getElementsByTagName("img");

var timer = playTimer = null;

var index = i = 0;

var bOrder = true;

var aTmp = [];

var aBtn = null;

//生成数字按钮

for (i = 0; i < aImg.length; i++) aTmp.push("<li>" + (i + 1) + "</li>");

//插入元素

var oCount = document.createElement("ul");

oCount.className = "count";

oCount.innerHTML = aTmp.join("");

oBox.appendChild(oCount);

aBtn = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");

//初始化状态

cutover();

//按钮点击切换

for (i = 0; i < aBtn.length; i++)

{

aBtn[i].index = i;

aBtn[i].onmouseover = function ()

{

index = this.index;

cutover()

}

function cutover()

{

for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";

aBtn[index].className = "current";

startMove(-(index * aImg[0].offsetHeight))

}

function next()

{

bOrder ? index++ : index--;

index <= 0 && (index = 0, bOrder = true);

index >= aBtn.length - 1 && (index = aBtn.length - 1, bOrder = false)

cutover()

}

playTimer = setInterval(next, 3000);

//鼠标移入展示区停止自动播放

oBox.onmouseover = function ()

{

clearInterval(playTimer)

};

//鼠标离开展示区开始自动播放

oBox.onmouseout = function ()

{

playTimer = setInterval(next, 3000)

};

function startMove(iTarget)

{

clearInterval(timer);

timer = setInterval(function ()

{

doMove(iTarget)

}, 30)

}

function doMove (iTarget)

{

var iSpeed = (iTarget - oList.offsetTop) / 10;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

oList.offsetTop == iTarget ? clearInterval(timer) : oList.style.top = oList.offsetTop + iSpeed + "px"

}

};

</script>

</head>

<body>

</div>

</body>

</html>

浏览样例

5月 12, 2023

js实现ECharts图表的下载

作者 5xue 在 Javascript

方法一：
ECharts自带的方法，在toolbox配置项，feature里面有一个saveAsImage方法：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			toolbox: {
				show: true,
				feature: {saveAsImage: {}}
			},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – js实现ECharts图表的下载</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

tooltip: {},

legend: {

data:['销量']

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

toolbox: {

show: true,

feature: {saveAsImage: {}}

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option, true);

</script>

</body>

</html>

查看样例

方法二：
Echarts提供一个接口getDataURL，通过它可以导出图表图片，返回一个 base64 的 URL。实现思路：

通过getDataURL()获取图片的base64编码字符；
字符解码，并转换成Blob对象；
通过Blob对象创建URL对象；
利用触发下载操作；

代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; js实现ECharts图表的下载</title>
	<!--引入echarts.js -->
	<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<input type="button" value="下载图表" onclick="saveImage()" />
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option, true);

		function base64ToBlob(code) {
			let parts = code.split(';base64,');
			let contentType = parts[0].split(':')[1];
			let raw = window.atob(parts[1]);
			let rawLength = raw.length;
			let uInt8Array = new Uint8Array(rawLength);
			for (let i = 0; i < rawLength; ++i) {
				uInt8Array[i] = raw.charCodeAt(i);
			}
			return new Blob([uInt8Array], { type: contentType });
		}
		
		function saveImage() {
			let content = myChart.getDataURL();
			let aLink = document.createElement('a');
			let blob = this.base64ToBlob(content);
			let evt = document.createEvent("HTMLEvents");
			evt.initEvent("click", true, true);
			aLink.download = "ECharts报表.png";
			aLink.href = URL.createObjectURL(blob);
			aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window}));
		}
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – js实现ECharts图表的下载</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option, true);

function base64ToBlob(code) {

let parts = code.split(';base64,');

let contentType = parts[0].split(':')[1];

let raw = window.atob(parts[1]);

let rawLength = raw.length;

let uInt8Array = new Uint8Array(rawLength);

for (let i = 0; i < rawLength; ++i) {

uInt8Array[i] = raw.charCodeAt(i);

}

return new Blob([uInt8Array], { type: contentType });

}

function saveImage() {

let content = myChart.getDataURL();

let aLink = document.createElement('a');

let blob = this.base64ToBlob(content);

let evt = document.createEvent("HTMLEvents");

evt.initEvent("click", true, true);

aLink.download = "ECharts报表.png";

aLink.href = URL.createObjectURL(blob);

aLink.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window}));

5月 12, 2023

ECharts的安装和实现

作者 5xue 在 Javascript

ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

ECharts可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts有下面几种定制：
完全版：echarts/dist/echarts.js，体积最大，包含所有的图表和组件。
常用版：echarts/dist/echarts.common.js，体积适中，包含常见的图表和组件。
精简版：echarts/dist/echarts.simple.js，体积较小，仅包含最常用的图表和组件。

下载地址
1. 官网下载
地址：https://echarts.apache.org/zh/builder.html

2. 其它下载地址
https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
https://cdn.jsdelivr.net/npm/echarts@4.3.0/dist/echarts.min.js。
https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

ECharts目前最新版本为5.1.2，发布于2021.6.9。

使用时建议下载到本地服务器。

ECharts 实例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>吾学网 &#8211; 5xue.cc &#8211; 第一个 ECharts 实例</title>
	<!--引入echarts.js -->
	<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个容器 -->
	<div id="container" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		//初始化echarts实例
		var myChart = echarts.init(document.getElementById('container'));
		//配置图表项和数据
		var option = {
			title: {
				text: '第一个 ECharts 实例'
			},
			tooltip: {},
			legend: {
				data:['销量']
			},
			xAxis: {
				data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis: {},
			series: [{
				name: '销量',
				type: 'bar',
				data: [5, 20, 36, 10, 10, 20]
			}]
		};
		//绘制图表
		myChart.setOption(option);
	</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>吾学网 – 5xue.cc – 第一个 ECharts 实例</title>

</head>

<body>

//初始化echarts实例

var myChart = echarts.init(document.getElementById('container'));

//配置图表项和数据

var option = {

title: {

text: '第一个 ECharts 实例'

tooltip: {},

legend: {

data:['销量']

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]

yAxis: {},

series: [{

type: 'bar',

data: [5, 20, 36, 10, 10, 20]

}]

};

//绘制图表

myChart.setOption(option);

</script>

</body>

</html>

浏览实例

4月 26, 2023

js实现单击英文文本取词

作者 5xue 在 Javascript

源代码：

<!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>单击英文文本取词</title>
</head>
<body>
<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>
<script>
var obj = document.querySelector('div');
var s1 = obj.innerHTML;
var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');
obj.innerHTML = s2;
var sps = document.querySelectorAll('.word');
sps.forEach((item, index) => {
	item.onclick = function(event) {alert(event.target.innerHTML)};
})
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>单击英文文本取词</title>

</head>

<body>

<div>If you visit the Great Smoky Mountains National Park, chances are you will remember the roadside or campground bears above all else. Bears are the most popular animals in a number of our national parks. In these mountains where the population of bears runs into the hundreds, opportunities to observe these large wild animals are plentiful during the summer. Since national parks are wildlife sanctuaries where no disturbance of the native animals is allowed, years of protection have served to break down the wild bears' fear of humans. Now, instead of depending on their own resources for a living, many bears patrol park roads and campgrounds.</div>

var obj = document.querySelector('div');

var s1 = obj.innerHTML;

var s2 = s1.replace(/\b(\w+?)\b/g, '<span class="word">$1</span>');

obj.innerHTML = s2;

var sps = document.querySelectorAll('.word');

sps.forEach((item, index) => {

item.onclick = function(event) {alert(event.target.innerHTML)};

})

</script>

</body>

</html>

样例：http://5xue.cc/wp-content/uploads/samples/20230426

分类目录Javascript