opacity到1到0；filter:blur()的参数设置为从30px到0px.body使用flex布局，将文字置于屏幕中央即可。100vw和100vh的话，在边界处会出现白色模糊区域(滤镜导致)。top和left属性，然后body设置overflow:hidden;，将白色模糊区域置于“屏幕”之外。opacity参数是从1到0，模糊滤镜的参数值是从30到0，不同的数值范围之间需要有一个映射关系。
| 变量名 | 意义 |
|---|---|
| $in\_min$ | 输入范围的起始值 |
| $in\_max$ | 输入范围的终止值 |
| $input$ | 输入的值 |
| $out\_min$ | 输出范围的起始值 |
| $out\_max$ | 输出范围的终止值 |
| $output$ | 输出的值，即映射得到的值 |
输入值在输入范围内占比：
输出值在输出范围内的占比：
又因为输入值在输入范围内的占比与输出值在输出范围中的占比应保持一致：
化简后，可得输出值output：
function scale(num, inMin, inMax, outMin, outMax) {
return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
该函数代码参考自StackOverflow?map a range of numbers to another range of numbers
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>blurry-loading</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
/* 使用flex布局，将文字设置在屏幕中间 */
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bg {
position: absolute;
background: url(https://images.unsplash.com/photo-1576161787924-01bb08dad4a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2104&q=80) no-repeat center center/cover;
filter: blur(0px);
z-index: -1;
/* blur滤镜会导致图片边界出现白色区域，将图片扩大可以改善 */
top:-30px;
left:-30px;
width: calc(100vw + 60px);
height: calc(100vh + 60px);
}
.load {
/* 文字样式 */
font-size: 2rem;
color: #fff;
font-weight: bold;
/* 设置为不可选中 */
user-select: none;
}
</style>
</head>
<body>
<section class="bg"></section>
<p class="load">0%</p>
</body>
<script>
// 获取文字和背景图片
const loadText = document.querySelector('.load');
const bg = document.querySelector('.bg');
//load表示当前进度的百分比数字
let load = 0;
// setInterval:进度不断增加，并渲染进度数字和背景模糊程度
const int = setInterval(loading, 20);
function loading() {
//进度增加
load++;
//如果进度到达100，表示进度完成，不用增加了。
if (load > 99) {
clearInterval(int);
}
//修改进度百分数
loadText.innerText = `${load}%`;
//修改数字的透明度：具体表现为文字逐渐隐形
loadText.style.opacity = scale(load, 0, 100, 1, 0);
//修改背景图片的模糊程度
bg.style.filter = `blur(${scale(load,0,100,30,0)}px)`;
}
//https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
//这个函数的作用是：获取 一个在某范围内的值 映射到 另一个范围时 对应的值。
function scale(num, inMin, inMax, outMin, outMax) {
return ((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
}
</script>
</html>
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende
我在我的Rails项目中使用Pow和powifygem。现在我尝试升级我的ruby版本(从1.9.3到2.0.0，我使用RVM)当我切换ruby版本、安装所有gem依赖项时，我通过运行railss并访问localhost:3000确保该应用程序正常运行以前，我通过使用pow访问http://my_app.dev来浏览我的应用程序。升级后，由于错误Bundler::RubyVersionMismatch:YourRubyversionis1.9.3,butyourGemfilespecified2.0.0，此url不起作用我尝试过的:重新创建pow应用程序重启pow服务器更新战俘
我已经像这样安装了一个新的Rails项目:$railsnewsite它执行并到达:bundleinstall但是当它似乎尝试安装依赖项时我得到了这个错误Gem::Ext::BuildError:ERROR:Failedtobuildgemnativeextension./System/Library/Frameworks/Ruby.framework/Versions/2.0/usr/bin/rubyextconf.rbcheckingforlibkern/OSAtomic.h...yescreatingMakefilemake"DESTDIR="cleanmake"DESTDIR="
我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样？我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用，需要1秒才能返回，我有100,000多个页面要访问，所以我试图运行多个线程来解决这个问题。有更好的方法吗？classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("
假设我有这个范围:("aaaaa".."zzzzz")如何在不事先/每次生成整个项目的情况下从范围中获取第N个项目？ 最佳答案 一种快速简便的方法:("aaaaa".."zzzzz").first(42).last#==>"aaabp"如果出于某种原因你不得不一遍又一遍地这样做，或者如果你需要避免为前N个元素构建中间数组，你可以这样写:moduleEnumerabledefskip(n)returnto_enum:skip,nunlessblock_given?each_with_indexdo|item,index|yieldit
我一直致力于让我们的Rails2.3.8应用程序在JRuby下正确运行。一切正常，直到我启用config.threadsafe!以实现JRuby提供的并发性。这导致lib/中的模块和类不再自动加载。使用config.threadsafe!启用:$rubyscript/runner-eproduction'pSim::Sim200Provisioner'/Users/amchale/.rvm/gems/jruby-1.5.1@web-services/gems/activesupport-2.3.8/lib/active_support/dependencies.rb:105:in`co
我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty
我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？ 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195
我的Rails站点使用了一个确实不是很好的gem。每次我需要做一些新的事情时，我最终不得不花费与向实际Rails项目添加代码一样多的时间来为gem添加功能。但我不介意，我将我的Gemfile设置为指向我的gem的GitHub分支(我尝试提交PR，但维护者似乎已经下台)。问题是我真的没有找到一种合理的方法来测试我添加到gem的新东西。在railsc中测试它会特别好，但我能想到的唯一方法是a)更改~/.rvm/gems/.../foo。rb，这看起来不对或者b)升级版本，推送到Github，然后运行bundleup，这除了耗时之外显然是一场灾难，因为我不确定我所做的promise是否正