js三角函数

JavaScript036

js三角函数,第1张

1. Math.PI

2. Math.abs()

3. Math.sin()

sin 方法返回一个 -1 到 1 之间的数值，表示给定角度（单位：弧度）的正弦值。

4. Math.cos()

cos 方法返回一个 -1 到 1 之间的数值，表示角度（单位：弧度）的余弦值。

5. Math.tan()

tan 方法返回一个数值，表示一个角的正切值。

6. Math.atan()

函数返回一个数值的反正切（以弧度为单位)

7.已知两直角边Y,X长度，求夹角角度：

正弦（sin）     sinA = a / c       sinθ = y / r 余弦（cos）    cosA = b / c      cosθ = y / r 正切（tan）     tanA = a / b      tanθ = y / x 余切（cot）     cotA = b / a      cotθ = x / y js中计算三角函数用Math.sin()等静态方法，参数为弧度 角度与弧度都是角的度量单位 1弧度时，弧长等于半径，那弧长是半径的倍数就是弧度了 弧度 = 弧长 / 半径 弧长 = 弧度 * 半径 弧长 = （角度 / 360） * 周长 角度 = 弧长 / 周长 = 弧长/(2πr) = 弧度*r/(2πr) = 弧度/(2π) 弧度 = 弧长 / 半径 = [(角度 / 360) * 周长] / 半径 =[ (角度 / 360) * 2πr] / r = 角度 * π / 180

select属于浏览器内置组件，标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

<div class="mySelect"></div>

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

<div class="mySelect">

    <div class="mySelectValue"></div>

    <div class="mySelectDropdown"></div>

    <ul class="mySelectOptions"></ul>

</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）

// 创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）

var $mySelect = $('<div class="mySelect">...</div>')

// 把原来select有的样式复制到模拟的下拉框上

$mySelect.attr('class', $('#select').attr('class'))

$mySelect.attr('style', $('#select').attr('style'))

// 把原来select的选项复制到模拟的下拉框中

$('#select option').each(function () {

    var value = $(this).attr('value'),

        name  = $(this).html()

    $mySelect.find('.mySelectOptions').append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>')

})

// 在模拟下拉框中设置选中的值

$mySelect.find('.mySelectValue').html($('#select option:selected').html())

// 隐藏原有的select

$('#select').hide()

// 给模拟的下拉框绑定事件

$mySelect

    .on('click', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 反转下拉列表的显示

        $('.mySelectOptions', this).toggle()

        // 给原有的select模拟点击事件

        $('#select').trigger('click')

    })

    .on('click', '.mySelectOption', function (e) {

        // 阻止点击事件向上冒泡

        e.stopImmediatePropagation()

        // 把选中的值显示到模拟的下拉框中

        $mySelect.find('.mySelectValue').html($(this).html())

        // 隐藏下拉列表

        $mySelect.find('.mySelectOptions').hide()

        // 把选中的值给到原来的select中

        $('#select').val($(this).data('id'))

        // 给原来的select模拟change事件

        $('#select').trigger('change')

    })

// 基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。