以下是 jQuery阅读时间插件ReadingTime 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<title>Reading Time jQuery Plugin</title>
<meta name="description" content="A simple, lightweight jQuery plugin used to display an estimated time to read some text.">
<meta name="author" content="http://michaelynch.com">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- for pesentation only -->
<link rel="stylesheet" type="text/css" media="screen" href="../src/css/style.css">
</style>
</head>
<body lang="en">
<article class="article">
<h1>Dethroning King Coal</h1>
<p><em>By: Peter Singer</em></p>
<p><small><span class="eta"></span> (<span class="words"></span> words)</small></p>
<p>Earlier this year, the concentration of carbon dioxide in the atmosphere reached 400 parts per million (ppm). The last time there was that much CO2 in our atmosphere was
three million years ago, when sea levels were 24 meters higher than they are today. Now sea levels are rising again. Last September, Arctic sea ice covered the smallest area
ever recorded. All but one of the ten warmest years since 1880, when global records began to be kept, have occurred in the twenty-first century.</p>
<p>Some climate scientists believe that 400 ppm of CO2 in the atmosphere is already enough to take us past the tipping point at which we risk a climate catastrophe that will turn
billions of people into refugees. They say that we need to get the amount of atmospheric CO2 back down to 350 ppm. That figure lies behind the name taken by 350.org, a grassroots
movement with volunteers in 188 countries trying to solve the problem of climate change.</p>
<p>Other climate scientists are more optimistic: they argue that if we allow atmospheric CO2 to rise to 450 ppm, a level associated with a two-degree Celsius temperature rise, we
have a 66.6% chance of avoiding catastrophe. That still leaves a one-in-three chance of catastrophe – worse odds than playing Russian roulette. And we are forecast to surpass 450
ppm by 2038.</p>
<p>One thing is clear: if we are not to be totally reckless with our planet’s climate, we cannot burn all the coal, oil, and natural gas that we have already located. About 80%
of it – especially the coal, which emits the most CO2 when burned – will have to stay in the ground.</p>
<p>In June, US President Barack Obama told students at Georgetown University that he refused to condemn them and their children and grandchildren to “a planet that’s beyond fixing.”
Saying that climate change cannot wait for Congress to overcome its “partisan gridlock,” he announced measures using his executive power to limit CO2 emissions, first from new
fossil-fuel power plants, and then from existing ones.</p>
<p>Obama also called for an end to public financing of new coal plants overseas, unless they deploy carbon-capture technologies (which are not yet economically viable), or else
there is, he said, “no other viable way for the poorest countries to generate electricity.”</p>
<p>According to Daniel Schrag, Director of Harvard University’s Center for the Environment and a member of a presidential science panel that has helped to advise Obama on climate
change, “Politically, the White House is hesitant to say they’re having a war on coal. On the other hand, a war on coal is exactly what’s needed.”</p>
<p>Schrag is right. His university, like mine and many others, has a plan to reduce its greenhouse-gas emissions. Yet most of them, including Schrag’s and mine, continue to invest
part of their multi-billion-dollar endowments in companies that extract and sell coal.</p>
<p>But pressure on educational institutions to stop investing in fossil fuels is beginning to build. Student groups have formed on many campuses, and a handful of colleges and
universities have already pledged to end their investment in fossil fuels. Several US cities, including San Francisco and Seattle, have agreed to do the same.</p>
<p>Now financial institutions, too, are coming under fire for their involvement with fossil fuels. In June, I was part of a group of prominent Australians who signed an open
letter to the heads of the country’s biggest banks asking them to stop lending to new fossil-fuel extraction projects, and to sell their stakes in companies engaged in such activities.</p>
<p>Speaking at Harvard earlier this year, former US Vice President Al Gore praised a student group that was pushing the university to sell its investments in fossil-fuel
companies, and compared their activities to the divestment campaign in the 1980’s that helped to end South Africa’s racist apartheid policy.</p>
<p>How fair is that comparison? The dividing lines may be less sharp than they were with apartheid, but our continued high level of greenhouse-gas emissions protects the
interests of one group of humans – mainly affluent people who are alive today – at the cost of others. (Compared to most of the world’s population, even the American and
Australian coal miners who would lose their jobs if the industry shut down are affluent.) Our behavior disregards most of the world’s poor, and everyone who will live on this
planet in centuries to come.</p>
<p>Worldwide, the poor leave a very small carbon footprint, but they will suffer the most from climate change. Many live in hot places that are getting even hotter, and hundreds
of millions of them are subsistence farmers who depend on rainfall to grow their crops. Rainfall patterns will vary, and the Asian monsoon will become less reliable. Those who live
on this planet in future centuries will live in a hotter world, with higher sea levels, less arable land, and more extreme hurricanes, droughts, and floods.</p>
<p>In these circumstances, to develop new coal projects is unethical, and to invest in them is to be complicit in this unethical activity. While this applies, to some extent, to
all fossil fuels, the best way to begin to change our behavior is by reducing coal consumption. Replacing coal with natural gas does reduce greenhouse-gas emissions, even if
natural gas itself is not sustainable in the long term. Right now, ending investment in the coal industry is the right thing to do.</p>
</article>
<script src="../src/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='../src/lib/jquery.1.9.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script src="../src/readingTime.js"></script>
<script>
$(function() {
$('article').readingTime({
wordCountTarget: '.words',
});
});
</script>
</body>
</html>
JS代码(readingTime.js):
/*!Name:Reading TimeDependencies:jQueryAuthor:Michael LynchAuthor URL:http://michaelynch.comDate Created:August 14,2013Date Updated:January 24,2014Licensed under the MIT license*/
;
(function($){
$.fn.readingTime = function(options){
//return if no element was bound//so chained events can continueif(!this.length){
return this;
}
//define default parameters var defaults ={
readingTimeTarget:'.eta',wordCountTarget:null,wordsPerMinute:270,round:true,lang:'en',lessThanAMinuteString:'',prependTimeString:'',prependWordString:'',remotePath:null,remoteTarget:null}
//define plugin var plugin = this;
//define element var el = $(this);
//merge defaults and options plugin.settings = $.extend({
}
,defaults,options);
//define vars var readingTimeTarget = plugin.settings.readingTimeTarget;
var wordCountTarget = plugin.settings.wordCountTarget;
var wordsPerMinute = plugin.settings.wordsPerMinute;
var round = plugin.settings.round;
var lang = plugin.settings.lang;
var lessThanAMinuteString = plugin.settings.lessThanAMinuteString;
var prependTimeString = plugin.settings.prependTimeString;
var prependWordString = plugin.settings.prependWordString;
var remotePath = plugin.settings.remotePath;
var remoteTarget = plugin.settings.remoteTarget;
//if lang is set to french if(lang == 'fr'){
var lessThanAMinute = lessThanAMinuteString || "Moins d'une minute";
var minShortForm = '分钟';
//if lang is set to german}
else if(lang == 'de'){
var lessThanAMinute = lessThanAMinuteString || "Weniger als eine Minute";
var minShortForm = '分钟';
//if lang is set to spanish}
else if(lang == 'es'){
var lessThanAMinute = lessThanAMinuteString || "Menos de un minuto";
var minShortForm = '分钟';
//if lang is set to dutch}
else if(lang == 'nl'){
var lessThanAMinute = lessThanAMinuteString || "Minder dan een minuut";
var minShortForm = '分钟';
//default lang is english}
else{
var lessThanAMinute = lessThanAMinuteString || 'Less than a minute';
var minShortForm = '分钟';
}
var setTime = function(text){
//split text by spaces to define total wordsvar totalWords = text.split(' ').length;
//define words per second based on words per minute (wordsPerMinute)var wordsPerSecond = wordsPerMinute / 60;
//define total reading time in secondsvar totalReadingTimeSeconds = totalWords / wordsPerSecond;
//define reading time in minutesvar readingTimeMinutes = Math.round(totalReadingTimeSeconds / 60);
//define remaining reading time secondsvar readingTimeSeconds = Math.round(totalReadingTimeSeconds - readingTimeMinutes * 60);
//if round is set to trueif(round === true){
//if minutes are greater than 0if(readingTimeMinutes > 0){
//set reading time by the minuteel.find(readingTimeTarget).text(prependTimeString + readingTimeMinutes + ' ' + minShortForm);
}
else{
//set reading time as less than a minuteel.find(readingTimeTarget).text(prependTimeString + lessThanAMinute);
}
//if round is set to false}
else{
//format reading timevar readingTime = readingTimeMinutes + ':' + readingTimeSeconds;
//set reading time in minutes and secondsel.find(readingTimeTarget).text(prependTimeString + readingTime);
}
//if word count container isn't blank or undefinedif(wordCountTarget !== '' && wordCountTarget !== undefined){
//set word countel.find(wordCountTarget).text(prependWordString + totalWords);
}
}
;
//for each elementel.each(function(){
//if remotePath and remoteTarget aren't null if(remotePath != null && remoteTarget != null){
//get contents of remote file$.get(remotePath,function(data){
//set time using the remote target found in the remote filesetTime($('<div>').html(data).find(remoteTarget).text());
}
);
}
else{
//set time using the targeted element setTime(el.text());
}
}
);
}
}
)(jQuery);
CSS代码(style.css):
body{font:18px Georgia,Times,"Times New Roman",serif;line-height:28px;color:#333;margin:80px 10%;max-width:800px;width:80%;}
article{margin:0 0 40px 0;}
h1{font:36px "Gill Sans","Gill Sans MT",Calibri,sans-serif;margin:0;}
a{text-decoration:none;color:#333;}
a:hover{color:crimson;}
small{font:14px "Gill Sans","Gill Sans MT",Calibri,sans-serif;text-transform:uppercase;}
p{margin:0 0 15px 0;}
.btn{font:18px "Gill Sans","Gill Sans MT",Calibri,sans-serif;text-transform:uppercase;display:inline-block;background:gainsboro;margin:10px 0;padding:15px;}
.btn:hover{background:crimson;color:white;}
分享到QQ
分享到微博
微信扫一扫
