ca88亚洲城官网https://www.baruike.com/HTML5/CSS3/Web前端/JS/JQuery/移动开发/页面性能优化等开发前端技术交流采用CSS的filter实现图像高斯模糊的效果https://www.baruike.com/article/gaosuj882309482309.html<p>采用CSS的filter实现图像高斯模糊的效果。在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。</p><p>语法:<br/></p><pre class="fy-prettyprint linenums">filter:&nbsp;blur()</pre><p><strong>属性值:</strong></p><p>blur():给图像设置高斯模糊,值越大越模糊。如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。</p><p><strong>示例1:使用filter: blur()来模糊图像</strong></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &nbsp;&nbsp;&nbsp; &lt;style&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-filter:&nbsp;blur(4px);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;blur(4px);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:green;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=&nbsp;&quot;/zb_users/upload/2019/09/201909211569051853369164.jpg&quot;&nbsp;width=&quot;300px&quot;&nbsp;alt=&quot;filter&nbsp;applied&quot;&nbsp;/&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp;&nbsp; &lt;/html&gt;</pre><p><strong>示例2:创建背景模糊图像</strong></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &nbsp;&nbsp;&nbsp; &lt;style&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-webkit-filter:&nbsp;blur(4px);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;blur(4px);&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;20px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;h1&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color:red;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.backgr-text&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;20%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;50%;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform:&nbsp;translate(-50%,&nbsp;-50%);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/style&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;src=&nbsp;&quot;/zb_users/upload/2019/09/201909211569051853369164.jpg&quot;&nbsp;width=&quot;300px&quot;&nbsp;alt=&quot;filter&nbsp;applied&quot;&nbsp;/&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&nbsp;class=&quot;backgr-text&quot;&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Hello&nbsp;World&lt;/h1&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;Blurred&nbsp;Background&nbsp;Image&lt;/h2&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/center&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp;&nbsp; &lt;/html&gt;</pre><p>预览看下效果吧!</p>Sat, 21 Sep 2019 16:18:13 +0800介绍4种用JavaScript将布尔值转换为整数数字的方法https://www.baruike.com/article/jsfuba20190921.html<p><img src="https://www.baruike.com/zb_users/upload/2019/09/201909211569051853369164.jpg" title="500.jpg" alt="500.jpg"/></p><p>周末学习学习,充电能量,下面来介绍4种用JavaScript将布尔值转换为整数数字的方法。</p><p>在JavaScript中,布尔值表示两个值之一:true或false。但如何将存储布尔值的变量转换为整数“0”或“1”?下面本篇文章就来给大家介绍一下将布尔值转换为整数“0”或“1”的方法,希望对大家有所帮助。</p><p>在JavaScript中,想要将存储布尔值的变量转换为整数“0”或“1”,可以使用多种方法进行转换。下面是一些流行的方法:</p><p>1、使用三元或条件“()? :”运算符。</p><p>2、使用一元+运算符。</p><p>3、使用按位和(&)或按位或(|)运算符。</p><p>4、使用Number()函数。它将数据类型转换为数字。</p><h3>使用三元或条件“()? :”运算符</h3><p>语法:</p><pre class="fy-prettyprint linenums">var&nbsp;i&nbsp;=&nbsp;value&nbsp;?&nbsp;1&nbsp;:&nbsp;0;</pre><p>来个实例玩玩吧。</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&nbsp;id=&quot;h&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;单击按钮,将布尔值更改为数字&lt;/h4&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunction()&quot;&gt;转换&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;变量的数值为:&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;result&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;将boolvalue初始化为true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;boolvalue&nbsp;=&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;h&quot;).innerHTML=&quot;变量boolvalue的值为:&quot;+boolvalue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunction()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;boolvalue&nbsp;?&nbsp;1&nbsp;:&nbsp;0;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;result&quot;).innerHTML&nbsp;=&nbsp;i;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&lt;/center&gt;&nbsp; &lt;/body&gt;&nbsp; &nbsp;&nbsp; &lt;/html&gt;</pre><h3>使用一元“+”运算符</h3><p>语法:</p><pre class="fy-prettyprint linenums">var&nbsp;i&nbsp;=&nbsp;+&nbsp;boolvalue;</pre><p>实例走一波。<br/></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&nbsp;id=&quot;h&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;单击按钮,将布尔值更改为数字&lt;/h4&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunction()&quot;&gt;转换&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;变量的数值为:&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;result&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;将boolvalue初始化为true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;boolvalue&nbsp;=&nbsp;true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;h&quot;).innerHTML=&quot;变量boolvalue的值为:&quot;+boolvalue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunction(){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;+&nbsp;boolvalue;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;result&quot;).innerHTML&nbsp;=&nbsp;i;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&lt;/center&gt;&nbsp; &lt;/body&gt;&nbsp; &nbsp;&nbsp; &lt;/html&gt;</pre><h3>使用按位和(&)或按位或(|)运算符</h3><p>语法:</p><pre class="fy-prettyprint linenums">var&nbsp;i&nbsp;=&nbsp;boolvalue&nbsp;&amp;&nbsp;1;&nbsp;//&nbsp;按位和(&) var&nbsp;j&nbsp;=&nbsp;boolvalue&nbsp;|&nbsp;0;&nbsp;//&nbsp;按位或(|)</pre><p>实例:<br/></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&nbsp;id=&quot;h&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&nbsp;id=&quot;h2&quot;&nbsp;style=&quot;color:green&quot;&gt;&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;单击按钮,将布尔值更改为数字&lt;/h4&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunction()&quot;&gt;转换&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;boolvalue的值现在为:&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;result&quot;&gt;&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;boolvalue2的值现在为:&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;result2&quot;&gt;&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;将boolvalue初始化为true &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;boolvalue&nbsp;=&nbsp;true;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;将boolvalue2初始化为false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;boolvalue2&nbsp;=&nbsp;false;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;h&quot;).innerHTML=&quot;变量boolvalue的值为:&quot;+boolvalue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;h2&quot;).innerHTML=&quot;变量boolvalue2的值为:&quot;+boolvalue2; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunction(){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;boolvalue&nbsp;&amp;&nbsp;1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;j&nbsp;=&nbsp;boolvalue2&nbsp;|&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;result&quot;).innerHTML&nbsp;=&nbsp;i; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;result2&quot;).innerHTML&nbsp;=&nbsp;j; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&lt;/center&gt;&nbsp; &lt;/body&gt;&nbsp; &lt;/html&gt;</pre><h3>使用Number()函数</h3><p>Number()函数将数据类型转换为数字,语法:</p><pre class="fy-prettyprint linenums">var&nbsp;i&nbsp;=&nbsp;Number(boolvalue);</pre><p>实例:<br/></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt;&nbsp; &lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;center&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;h2&nbsp;id=&quot;h&quot;&nbsp;style=&quot;color:red&quot;&gt;&lt;/h2&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h4&gt;单击按钮,将布尔值更改为数字&lt;/h4&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunction()&quot;&gt;转换&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;style=&quot;color:red&quot;&gt;变量boolvalue的数值现在为:&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&nbsp;id=&quot;result&quot;&nbsp;style=&quot;color:red&quot;&gt;&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;将boolvalue初始化为false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;boolvalue&nbsp;=&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;h&quot;).innerHTML=&quot;变量boolvalue的值为:&quot;+boolvalue; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunction(){&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;i&nbsp;=&nbsp;+&nbsp;boolvalue;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById(&quot;result&quot;).innerHTML&nbsp;=&nbsp;i;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&lt;/center&gt;&nbsp; &lt;/body&gt;&nbsp; &nbsp;&nbsp; &lt;/html&gt;</pre><h3>总结</h3><p>有问题可以留言或者加群咨询。</p>Sat, 21 Sep 2019 15:37:44 +0800玩转下用js只保留整数/向上取整/四舍五入/向下取整等函数https://www.baruike.com/article/js88odifpoipodi.html<p>玩转下用js只保留整数,向上取整,四舍五入,向下取整等函数。</p><p>1.丢弃小数部分,保留整数部分</p><p>parseInt(5/2)</p><p>2.向上取整,有小数就整数部分加1</p><p>Math.ceil(5/2)</p><p>3,四舍五入.</p><p>Math.round(5/2)</p><p>4,向下取整</p><p>Math.floor(5/2)</p><h3>Math 对象的方法</h3><table><tbody style="margin: 0px; padding: 0px;"><tr style="margin: 0px; padding: 0px;" class="firstRow"><th style="margin: 0px; padding: 8px 14px; background-color: rgb(250, 250, 250); border-color: rgb(192, 192, 192); border-collapse: collapse;">方法</th><th style="margin: 0px; padding: 8px 14px; background-color: rgb(250, 250, 250); border-color: rgb(192, 192, 192); border-collapse: collapse;">描述</th></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">abs(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的绝对值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">acos(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的反余弦值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">asin(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的反正弦值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">atan(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">atan2(y,x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回从 x 轴到点 (x,y) 的角度(介于 -PI/2 与 PI/2 弧度之间)</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">ceil(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">对一个数进行上舍入。</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">cos(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的余弦</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">exp(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回 e 的指数。</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">floor(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">对一个数进行下舍入。</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">log(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的自然对数(底为e)</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">max(x,y)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回 x 和 y 中的最高值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">min(x,y)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回 x 和 y 中的最低值</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">pow(x,y)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回 x 的 y 次幂</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">random()</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回 0 ~ 1 之间的随机数</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">round(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">把一个数四舍五入为最接近的整数</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">sin(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的正弦</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">sqrt(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回数的平方根</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">tan(x)</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回一个角的正切</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">toSource()</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">代表对象的源代码</td></tr><tr style="margin: 0px; padding: 0px;"><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">valueOf()</td><td style="margin: 0px; padding: 8px 14px; border-color: rgb(192, 192, 192); border-collapse: collapse;">返回一个 Math 对象的原始值</td></tr></tbody></table><p>js 四舍五入函数 toFixed(),里面的参数 就是保留小数的位数。</p>Sat, 21 Sep 2019 15:31:52 +0800教你如何用CSS更改PNG图像的颜色https://www.baruike.com/article/html9iit909.html<p>给定一个图像,如何使用CSS更改PNG图像的颜色?下面本篇文章就来给大家使用CSS更改PNG图像颜色的方法,希望对大家有所帮助。</p><p>在CSS中使用Filter属性,利用滤镜功能来更改png图像颜色;CSS的Filter属性主要用于设置图像的视觉效果。</p><p>Filter属性存在许多属性值:</p><pre class="fy-prettyprint linenums">filter:&nbsp;none|blur()|brightness()|contrast()|drop-shadow()|grayscale()&nbsp;|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();</pre><p><strong>示例1:</strong>使用灰度滤镜将彩色图像更改为灰度图像:</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;title&gt;转换为灰度图像&lt;/title&gt; &lt;style&gt; img&nbsp;{ filter:&nbsp;grayscale(10); } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;img&nbsp;src=&quot;https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg&quot;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;500px&quot;&nbsp;height=&quot;250px&quot;&nbsp;alt=&quot;filter&nbsp;applied&quot;&nbsp;/&gt; &lt;/body&gt; &lt;/body&gt; &lt;/html&gt;</pre><p><strong>示例2:</strong>此示例对图像使用许多过滤器。</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;title&gt;将图像转换为不同的颜色&lt;/title&gt; &lt;style&gt; img&nbsp;{&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;float:left;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.image1&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;invert(100%);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.image2&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;sepia(100%);&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;class&nbsp;=&nbsp;&quot;image1&quot;&nbsp;src=&quot;https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;500px&quot;&nbsp;height=&quot;250px&quot;&nbsp;alt=&quot;filter&nbsp;applied&quot;&nbsp;/&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img&nbsp;class&nbsp;=&nbsp;&quot;image2&quot;&nbsp;src=&quot;https://img.php.cn/upload/article/000/000/006/5d171d34606c9824.jpg&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width=&quot;500px&quot;&nbsp;height=&quot;250px&quot;&nbsp;alt=&quot;filter&nbsp;applied&quot;&nbsp;/&gt;&nbsp; &lt;/body&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>大家可以预览看下默认状态和过滤后的2种效果,对比下。</p>Sat, 21 Sep 2019 10:29:12 +0800Firefox 69默认阻拦第三方 Cookie、自动播放的视频和加密矿工https://www.baruike.com/article/huohu82348209384098.html<p>如果你使用的是 Mozilla Firefox 并且尚未更新到最新版本,那么你将错过许多新的重要功能。&nbsp;</p><h3>Firefox 69 版本中的一些新功能</h3><p>首先,Mozilla Firefox 69 会默认强制执行更强大的安全和隐私选项。以下是新版本的一些主要亮点。</p><h3>Firefox 69 阻拦视频自动播放</h3><p>现在很多网站都提供了自动播放视频。无论是弹出视频还是嵌入在文章中设置为自动播放的视频,默认情况下,Firefox 69 都会阻止它(或者可能会提示你)。</p><p>这个阻拦自动播放功能可让用户自动阻止任何视频播放。</p><h3>禁止第三方跟踪 cookie</h3><p>默认情况下,作为增强型跟踪保护Enhanced Tracking Protection功能的一部分,它现在将阻止第三方跟踪 Cookie 和加密矿工。这是 Mozilla Firefox 的增强隐私保护功能的非常有用的改变。</p><p>Cookie 有两种:第一方的和第三方的。第一方 cookie 由网站本身拥有。这些是“好的 cookie”,可以让你保持登录、记住你的密码或输入字段等来改善浏览体验。第三方 cookie 由你访问的网站以外的域所有。广告服务器使用这些 Cookie 来跟踪你,并在你访问的所有网站上跟踪广告。Firefox 69 旨在阻止这些。</p><p>当它发挥作用时,你将在地址栏中看到盾牌图标。你可以选择为特定网站禁用它。</p><h3>Firefox Blocking Tracking</h3><p>禁止加密矿工消耗你的 CPU</p><p>对加密货币的欲望一直困扰着这个世界。GPU 的价格已经高企,因为专业的加密矿工们使用它们来挖掘加密货币。</p><p>人们使用工作场所的计算机秘密挖掘加密货币。当我说工作场所时,我不一定是指 IT 公司。就在今年,人们在乌克兰的一家核电站抓住了偷挖加密货币的活动。</p><p>不仅如此。如果你访问某些网站,他们会运行脚本并使用你的计算机的 CPU 来挖掘加密货币。这在 IT 术语中被称为 挖矿攻击cryptojacking。</p><p>好消息是 Firefox 69 会自动阻止这些加密矿工脚本。因此,网站不再能利用你的系统资源进行挖矿攻击了。</p><h3>Firefox 69 带来的更强隐私保护</h3><p>如果你把隐私保护设置得更严格,那么它也会阻止指纹。因此,当你在 Firefox 69 中选择严格的隐私设置时,你不必担心通过指纹共享计算机的配置信息。</p><p>在关于这次发布的官方博客文章中,Mozilla 提到,在此版本中,他们希望默认情况下为 100% 的用户提供保护。</p><h3>性能改进</h3><p>尽管在更新日志中没有提及 Linux,但它提到了在 Windows 10/mac OS 上运行性能、UI 和电池寿命有所改进。如果你发现任何性能改进,请在评论中提及。</p><h3>总结</h3><p>除了所有这些之外,还有很多底层的改进。你可以查看发行说明中的详细信息。</p><p>Firefox 69 对于关注其隐私的用户来说是一个令人印象深刻的更新。与我们最近对某些安全电子邮件服务的建议类似,我们建议你更新浏览器以充分受益。新版本已在大多数 Linux 发行版中提供,你只需要更新你的系统即可。</p><p>如果你对阻止广告和跟踪 Cookie 的浏览器感兴趣,请尝试开源的 Brave 浏览器,他们甚至给你提供了加密货币以让你使用他们的浏览器,你可以使用这些加密货币来奖励你最喜爱的发布商。</p><p>你觉得这个版本怎么样?请在下面的评论中告诉我们你的想法。</p>Thu, 19 Sep 2019 15:27:56 +0800支付宝小程序宣布与微博合作搞事情了https://www.baruike.com/article/xiaochegxu2934-29340-9.html<p><img src="https://www.baruike.com/zb_users/upload/2019/09/201909171568705938564133.jpg" title="下载.jpg" alt="下载.jpg"/></p><p>在支付宝开放日活动中,支付宝小程序宣布将与新浪微博在场景、产品以及平台三大层面实现全面互通。</p><p>未来,新浪微博将利用社交关系链和内容扩散能力,帮助支付宝小程序商家把服务触达给用户;而支付宝小程序的服务场景,也将为新浪微博的内容消费带来服务闭环。</p><p>微博副总裁田利英表示,微博与支付宝小程序的互通将打造一个多端融合的生态,为平台的机构与商家提供一个“连接用户-内容-服务-社交的新契机”。在这个生态里,可以重新勾画用户内容消费服务场景,在完成资源整合的同时连接更多的服务与优质内容,实现流量更高效地变现。</p><p>支付宝开放生态事业部总经理管仲表示,支付宝小程序的核心思路就是在大数据驱动下,利用小程序即用即走的定位以及可以互相跳转的特性,采用生态联动的打法,把消费者的碎片时间有机拼接,帮助商家在对的时间、对的场景,向对的人群提供对的服务。</p><p>据支付宝公布的最新数据,正式上线一年来,支付宝小程序已累计上线100多万个小程序,月活跃用户数突破5亿。</p>Tue, 17 Sep 2019 15:36:00 +0800是否有发现www和https://又被Chrome地址栏屏蔽了?https://www.baruike.com/article/web82409382093840.html<p>Google Chrome 76 稳定版已于上周发布,对于已经安装的用户,不难发现在地址栏中少了一些内容,“www”子域。</p><p>据报道,早在 2018 年 9 月发布 Chrome 69 时,谷歌就从地址栏中的 URL 中隐藏“www”和“m” “无关紧要的子域”。例如,当用户访问 www.oschina.net 时,www 将被隐藏并显示为 oschina.net。</p><p>这些子域被认为是 trivial(无关紧要),因为谷歌认为这些不是大多数人要关注的信息。不过在当时,由于用户的抱怨,他们抗议说“www”是有价值的且是关键的信息,之后谷歌就放弃这一更改。谷歌当时表示,在以后的版本中,他们可能会再隐藏“www”子域,包括“m”子域。</p><p>而在这次的 Chrome 76 版本中,谷歌再次开始从地址栏的 URL 中隐藏“www”子域。</p><p>Chrome 的产品经理 Emily Schechter 说: 经过 Canary、Dev 和 Beta 几个月的测试,他们将开始从桌面版和 Android 版的第 76 版开始中隐藏。</p><p>Chrome 团队重视 UI 表面的简单性、可用性和安全性。为了使 URL 更容易阅读和理解,并消除注册域的干扰,我们将隐藏与大多数 Chrome 用户无关的 URL 内容。我们计划在桌面版的 Chrome 和 M76 的Android 中的地址栏隐藏链接 和 www。</p><p>Scheckhter 对新版本作了声明:<br/></p><p><img src="https://www.baruike.com/zb_users/upload/2019/09/201909171568690025142409.png" title="下载 (1).png" alt="下载 (1).png"/></p>Tue, 17 Sep 2019 11:10:48 +0800谷歌Chrome浏览器87%扩展插件安装数小于1000次https://www.baruike.com/article/infugj2834098234098.html<p>据外媒ZDNet报道,谷歌Chrome扩展插件的一份调查数据近日公布,Chrome浏览器扩展插件商店共包含了188620个扩展应用。其中大部分都很长时间没有更新,也鲜有人安装。</p><p>调查数据显示,谷歌Chrome浏览器月活跃用户达到10亿人次,其中87%的扩展插件安装量少于1000次,50%的扩展插件安装量少于16次,另外有近两万个扩展插件从来没有被安装过,25540个扩展插件仅被安装过一次 。</p><p><img src="https://www.baruike.com/zb_users/upload/2019/09/201909171568689810205389.jpg" title="下载.jpg" alt="下载.jpg"/></p>Tue, 17 Sep 2019 11:09:11 +0800介绍三种JavaScript重定向到另一个网页的方法https://www.baruike.com/article/chogndingxiang.html<p><img src="https://www.baruike.com/zb_users/upload/2019/09/201909121568256785485031.jpg" title="500.jpg" alt="500.jpg"/></p><p>在JavaScript中有好几种方法可以重定向到另一个网页,这个在项目开发中经常会用到,所以不熟悉的童鞋可以学下啦,首先我们介绍有哪些方法?</p><h3>如何使用JavaScript重定向到其他网页?</h3><p>使用JavaScript重定向到其他网页的一些方法:</p><p>● location.href</p><p>● location.replace()</p><p>● location.assign()</p><h4><strong>语法:</strong></h4><p><br/></p><pre class="fy-prettyprint linenums">location.href=&quot;URL&quot; //或者 location.replace(&quot;URL&quot;) //或者 location.assign(&quot;URL&quot;)</pre><h4><strong>参数:</strong></h4><p>接受单个参数的URL,这是必需的。用于指定新网页的引用。</p><h4><strong>返回值:</strong></h4><p>无返回值。</p><h4><strong>示例1:</strong></h4><p>使用location.href属性重定向到其他网页:</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;这是&lt;i&gt;location.href&lt;/i&gt;方式的示例&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunc()&quot;&gt;点击这里&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--重定向到其他网页的脚本--&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunc()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.location.href=&quot;https://www.baruike.com&quot;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp; &lt;/html&gt;</pre><h4><strong>示例2:</strong></h4><p>使用location.replace()方法重定向到其他网页:</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;这是&lt;i&gt;location.replace()&lt;/i&gt;方式的示例&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunc()&quot;&gt;点击这里&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--重定向到其他网页的脚本--&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunc()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.replace(&quot;https://www.baruike.com&quot;);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp; &lt;/html&gt;</pre><h4><strong>示例3:</strong></h4><p>使用location.assign()方法重定向到其他网页:</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;这是&lt;i&gt;location.assign()&lt;/i&gt;方式的示例&lt;/p&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;button&nbsp;onclick=&quot;myFunc()&quot;&gt;点击这里&lt;/button&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--重定向到其他网页的脚本--&gt;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;myFunc()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.assign(&quot;https://www.baruike.com&quot;);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp; &nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp; &lt;/html&gt;</pre><h4><strong>注意:</strong></h4><p>所有方法的输出都相同,但location.replace()方法从文档历史记录中删除当前文档的URL。因此,如果希望选项导航回原始文档,最好使用location.assign()方法。</p><h3>浏览器支持</h3><p>上述方法的浏览器支持列表:</p><p>● Google Chrome</p><p>● Apple Safari</p><p>● Firefox</p><p>● Opera</p><p>● Edge</p><h3>总结</h3><p>location.href、location.replace() ,location.assign(),是不是觉得很简单呢?希望对大家有所帮助吧。</p>Thu, 12 Sep 2019 10:47:57 +0800JavaScript之getElementById()方法https://www.baruike.com/article/html8082304823048.html<p>getElementById()方法返回传递给函数的具有给定ID的元素。该方法广泛应用于网页设计中,用于改变任何特定元素的值或获取特定元素。如果传递给函数的ID不存在,则返回null。</p><h3>getElementById()方法的使用<br/></h3><p><strong>语法:</strong></p><pre class="fy-prettyprint linenums">document.getElementById(&nbsp;element_ID&nbsp;)</pre><p><strong>参数:</strong>该函数接受单个参数element_ID,用于保存元素的ID。</p><p><strong>返回值:</strong>返回给定ID的对象。如果传递给函数的ID不存在,则返回null。</p><p><strong>示例1:</strong></p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;script&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;用于更改元素颜色的函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;hello()&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;demo&nbsp;=&nbsp;document.getElementById(&quot;hello&quot;);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;demo.style.color&nbsp;=&nbsp;&quot;red&quot;;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;body&nbsp;style&nbsp;=&nbsp;&quot;text-align:center&quot;&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&nbsp;id&nbsp;=&nbsp;&quot;hello&quot;&gt;Hello&nbsp;world!&lt;/h1&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;getElementById()方法&lt;/h2&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!--&nbsp;Click&nbsp;on&nbsp;the&nbsp;button&nbsp;to&nbsp;change&nbsp;color&nbsp;--&gt; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&nbsp;type&nbsp;=&nbsp;&quot;button&quot;&nbsp;onclick&nbsp;=&nbsp;&quot;hello()&quot; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value&nbsp;=&nbsp;&quot;单击此处,更改颜色&quot;&nbsp;/&gt;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;&nbsp;&nbsp; &lt;/html&gt;</pre><p>示例2:</p><pre class="prism-highlight prism-language-markup">&lt;!DOCTYPE&nbsp;html&gt; &lt;html&gt; &lt;head&gt; &lt;meta&nbsp;charset=&quot;UTF-8&quot;&gt; &lt;script&gt; //&nbsp;更改元素内容的函数 function&nbsp;hello()&nbsp;{ var&nbsp;demo&nbsp;=&nbsp;document.getElementById(&quot;hello&quot;); demo.innerHTML&nbsp;=&nbsp;&quot;Welcome!&quot;; } &lt;/script&gt; &lt;/head&gt; &lt;body&nbsp;style=&quot;text-align:center&quot;&gt; &lt;h1&nbsp;id=&quot;hello&quot;&gt;Hello&nbsp;world!&lt;/h1&gt; &lt;h2&gt;getElementById()方法&lt;/h2&gt; &lt;input&nbsp;type=&quot;button&quot;&nbsp;onclick=&quot;hello()&quot;&nbsp;value=&quot;单击此处,更改内容&quot;&nbsp;/&gt; &lt;/body&gt; &lt;/html&gt;</pre>Thu, 12 Sep 2019 10:45:28 +0800