13个JavaScript 一行程序，让你看起来像个

13个JavaScript 一行程序，让你看起来像个专家

avaScript 可以做很多好玩的事，从复杂的框架到处理API，有太多的东西需要学习。但是，它也能让我们只用一行就能做一些了不起的事情。

1. 获得一个随机的布尔值（true/false）

该函数使用Math.random()方法返回一个布尔值（true 或者 false）。Math.random创建一个0到1之间的随机数，我们只要检查它是否高于或低于0.5，就有50%机会得到true或false。

const randomBoolean=()=> Math.random() >=0.5;
console.log(randomBoolean());

2. 检查所提供的日期是否为工作日

使用这种方法，我们能够检查在函数中提供的日期是否是工作日或周末的日子。

const isWeekday=(date)=> date.getDay() % 6 !==0;

console.log(isWeekday(new Date(2021, 7, 6)));
// true  因为是周五

console.log(isWeekday(new Date(2021, 7, 7)));
// false 因为是周六

3.反转字符串

有几种不同的方法来反转一个字符串。这是最简单的一种，使用split()、reverse()和join()方法。

const reverse=str=> str.split('').reverse().join('');
reverse('hello world');     
// 'dlrow olleh'

4.检查当前标签是否隐藏

Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。

const isBrowserTabInView=()=> document.hidden;
isBrowserTabInView();

场外：无意间发现爱奇艺广告播放时间居然是在当前标签页激活的时候才会进行倒计时，离开当前标签页的时候，倒计时停止，百度一下发现document.hidden这个东东。

document.hidden是h5新增加api使用的时候有兼容性问题。

var hidden
if (typeof document.hidden !=="undefined") {
    hidden="hidden";
} else if (typeof document.mozHidden !=="undefined") {
    hidden="mozHidden";
} else if (typeof document.msHidden !=="undefined") {
    hidden="msHidden";
} else if (typeof document.webkitHidden !=="undefined") {
    hidden="webkitHidden";
}
console.log("当前页面是否被隐藏：" + document[hidden])

5. 检查一个数字是偶数还是奇数

const isEven=num=> num % 2===0;
console.log(isEven(2));
// true
console.log(isEven(3));
// false

6. 从一个日期获取时间

const timeFromDate=date=> date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); 
// "17:30:00"

console.log(timeFromDate(new Date()));
// 打印当前的时间

7. 保留 n 位小数

const toFixed=(n, fixed)=> ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
// 事例
toFixed(25.198726354, 1);       // 25.1
toFixed(25.198726354, 2);       // 25.19
toFixed(25.198726354, 3);       // 25.198
toFixed(25.198726354, 4);       // 25.1987
toFixed(25.198726354, 5);       // 25.19872
toFixed(25.198726354, 6);       // 25.198726

8. 检查当前是否有元素处于焦点中

我们可以使用document.activeElement属性检查一个元素是否当前处于焦点。

const elementIsInFocus=(el)=> (el===document.activeElement);
elementIsInFocus(anyElement)
// 如果在焦点中返回true，如果不在焦点中返回 false

9. 检查当前浏览器是否支持触摸事件

const touchSupported=()=> {
  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
}
console.log(touchSupported());
// 如果支持触摸事件，将返回true，如果不支持则返回false。

10. 检查当前浏览器是否在苹果设备上

const isAppleDevice=/Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(isAppleDevice);

11. 滚动到页面顶部

const goToTop=()=> window.scrollTo(0, 0);
goToTop();

12. 获取参数的平均数值

const average=(...args)=> args.reduce((a, b)=> a + b) / args.length;
average(1, 2, 3, 4);
// 2.5

13.华氏/摄氏转换

const celsiusToFahrenheit=(celsius)=> celsius * 9/5 + 32;
const fahrenheitToCelsius=(fahrenheit)=> (fahrenheit - 32) * 5/9;
// 事例
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

~完，我是刷碗智，会所按摩走起！

作者：Shadeed 译者：前端小智来源：medium 原文：https://medium.com/dailyjs/13-javascript-one-liners-thatll-make-you-look-like-a-pro-29a27b6f51cb

挑战30天在头条写日记#

HTML是一种用于创建网页结构和内容的标记语言，其中包含了许多标签，可以用于排版、布局和展示内容。本文将详细介绍HTML中的<tr>和<td>标签的使用方法，并通过示例展示如何创建表格。

1. <tr>标签的作用： <tr>标签代表HTML表格中的一行（行数据），它可以包含一个或多个<td>元素作为单元格。

2. <td>标签的作用： <td>标签用于定义表格中的一个单元格（列数据），可以包含文本、图像、链接等内容。

3. 如何使用<tr>和<td>： 在使用<tr>和<td>标签时，首先需要创建一个<table>元素作为表格的容器，然后在其中嵌套<tr>和<td>标签，如下所示：

htmlCopy code<table>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
  </tr>
  <tr>
    <td>单元格3</td>
    <td>单元格4</td>
  </tr>
</table>

4. 表格样式： 可以使用CSS来为表格添加样式，如设置边框、背景颜色等。以下是一个简单的示例：

htmlCopy code<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  td {
    border: 1px solid black;
    padding: 8px;
    text-align: center;
  }
</style>

5. 示例应用： 以下示例演示了如何使用<tr>和<td>标签创建一个包含姓名、年龄和城市的简单表格：

htmlCopy code<!DOCTYPE html>
<html>
<head>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    td {
      border: 1px solid black;
      padding: 8px;
      text-align: center;
    }
  </style>
</head>
<body>

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>城市</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>广州</td>
  </tr>
</table>

</body>
</html>

6. 书籍参考：

"HTML and CSS: Design and Build Websites" by Jon Duckett
"Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics" by Jennifer Niederst Robbins

7. 总结： 通过本文的介绍，我们了解了HTML中<tr>和<td>标签的基本用法，以及如何创建简单的表格和添加样式。使用这些标签，我们可以轻松地创建具有结构和内容的网页表格，提升页面的可读性和可视性。

页面布局中，有两个非常常用的CSS属性。它们巧妙的控制着块级元素们之间的位置，灵活的让块级元素在一行内显示或者另起一行。说到这里，相信大家已经猜出来了，这两个属性就是控制块级元素浮动的属性。整个页面布局过程中，浮动属性的使用频率是最高的。今天，小海老师就来带领大家一同认识这两个神奇的CSS属性。

承接文章：发挥个人的优势，踏踏实实的学习前端开发，小海为你传授学习心得

技术等级：初级 | 适合前端开发的初学者阅读学习。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

一、浮动属性：

CSS技术使用float属性来实现块级元素的浮动效果。

CSS技术使用float属性实现浮动效果

该属性可以有下列取值：

left，控制块级元素左浮动。
right，控制块级元素右浮动。

属性说明：我们都知道，块级元素之间默认情况下是独占一行的。也就是说，两个在代码中紧密相连的块级元素，它们的摆放位置是一个在上一行，另一个在下一行。尽管通过width和height属性为块级元素设置了大小，使得块级元素无法占满整个行，但是块级元素右侧空余的位置仍然不允许出现任何内容。

让我们一同来看下列实例：

HTML代码如下所示：

<div id=”box01”></box>
<div id=”box02”></box>

CSS代码如下所示：

#box01,#box02{
width:200px; height:100px;
}
#box01{background-color:#ff5857;}
#box02{background-color:#5857ff;}

上述代码的运行结果如下图所示，这张图为我们展示了两个块级元素默认的位置摆放。

展示两个块级元素的默认位置

如果我想让两个块级元素在一行内显示该如何实现呢？这就需要float属性登场了。

将#box01的CSS代码中添加如下属性：float:left，会发生什么情况呢？同学们实践操作一下，我们会发现，屏幕中就只剩下红色的块级元素了。那蓝色的#box02去哪里了呢？其实#box02响应了#box01浮动的号召，和#box01一同出现在同一行了，只是被压在了红色的#box01的下面。

解决方法就是让蓝色的#box02也添加上 float:left的属性。这样，两个块级元素就可以共同出现在一行了。下图为我们展示了这样的效果。

展示两个块级元素的左浮动位置

下面让我们再看一个实例，这个实例中我们为两个块级元素添加一个容器。

HTML代码如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

我们设置容器#box的宽度为400px。内部的两个块级元素：.boxLeft的宽度设置为150px；.boxRight的宽度设置为100px。要求让这两个内部的块级元素在一行内显示，并且分布到容器的两端。

CSS代码如下所示：

#box{
width:400px; height:100px;
background-color:#cccccc;
}
#box .boxLeft{
width:150px; height:100px;
background-color:#ff5857;
float:left;
}
#box .boxRight{
width:100px; height:100px;
background-color:# 5857 ff;
float:right;
}

我们可以看到，在.boxRight对象上，我们添加了float:right的CSS属性，让这个块级元素发生了右浮动，则该元素跑到了容器的最右侧。下图为我们展示了这样的效果。

展示两个块级元素的左右浮动位置

浮动属性的使用结论：

若希望多个块级元素在一行内显示，则这几个块级元素都要具备float浮动属性。

二、清除浮动属性：

CSS技术使用clear属性来实现块级元素的清除浮动效果。

CSS技术使用clear属性设置清除浮动效果

该属性可以有下列取值：

left，清除块级元素的左浮动效果。
right，清除块级元素的右浮动效果。
both，清除块级元素的两端浮动效果。

属性说明：根据上面的float属性的使用，我们可想而知，一个紧跟在具有浮动属性的块级元素后面的块级元素，即使它不想和它前面的块级元素在一行内显示，也会受到前面块级元素浮动属性的影响，被压在前面块级元素的下方。

解决这个问题，可以对不希望和前面块级元素在同一行显示的块级元素使用清除浮动属性。

下面让我们来看这个实例：

HTML代码如下所示：

<div id=”box”>
<div class=”boxLeft”></div>
<div class=”boxRight></div>
</div>

CSS代码如下所示（#box .boxRIght）：

#box .boxRight{
width:100px; height:100px;
background-color:# 5857ff;
clear:left;
}

因为.boxRight具备clear:left属性，所以即使.boxLeft使用了float:left属性，它们也仍旧分布在两行，不会在同一行显示。就好像没有过使用任何浮动效果似的。

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

文章预告

结合前面所学的CSS知识，使用今天的浮动属性，可以做一个简单的导航栏。那么下一篇文章中，小海老师会带领大家一同利用最近的所学，做一个水平放置的导航栏。效果非常酷炫，希望正在学习前端开发的同学们千万不要错过。

在线咨询

上一篇：2015打造火爆H5页面全攻略！
下一篇：简单实用：web前端实现网页主题切换功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

13个JavaScript 一行程序，让你看起来像个

1. 获得一个随机的布尔值（true/false）

2. 检查所提供的日期是否为工作日

3.反转字符串

4.检查当前标签是否隐藏

5. 检查一个数字是偶数还是奇数

6. 从一个日期获取时间

7. 保留 n 位小数

8. 检查当前是否有元素处于焦点中

9. 检查当前浏览器是否支持触摸事件

10. 检查当前浏览器是否在苹果设备上

11. 滚动到页面顶部

12. 获取参数的平均数值

13.华氏/摄氏转换

希望收藏了这篇文章的你同时也可以关注一下“小海前端”的头条号，因为这些文章都是连载的，并且是经过系统的归纳和总结的。塌下心来认真阅读，你一定会学到对你有用的知识。

小海教材

小海声明

文章预告

您的项目需求